jQuery popups wizard, web 2.0 ideea and usability

sergiu — Fri, 23 Oct 2009 11:58:22 +0000

in this post, which i'll try to keep it short i'll explain something about web 2.0 concept and how to make pop ups wizards with jQuery, by popup wizards i understand a series a popup, pretty much like the wizards on your desktop when you install an application.

Web 2.0 is more about user experience and seeing the web as a platform, make the user feel like he is using a very complex, fast and easy to use at the same time application, and for that wizards are great.

In this tutorial i will explain the basic concepts and give an basic wizard example for user authentication and sign up, here is how i wanted the wizard to work :

Wizard steps

this wizard will only have 3 pop ups, here they are, to be more clear :

Wizard starts

Create account in wizard

As you can see each popup is clear and you can navigate back and forward between them.

Now, some of the advantages of using those wizards :

no extra html is loaded when the page loads, all popups are loaded dinamicaly
no extra load on browser to create all the popups at load time
all have the same style
they are very easy to open (just call a function with the popup name)
they are stored in a xml file and very easy to change
they are very user frendly
popups are destroyed on close so no extra load on browser

There are also a lot o feature that i want to implement but they are missing...

So here how it's done in a few easy steps

1. make sure that you added jquery, and jqueryUI with the dialog functionality

2. create a custom jQuery theme, just in case you want to change the design at a later date.

3. create the function that loads and shows a popup, here is the entire file. Just make sure that you change the APP_URL in the file with the url to your project.

4. Create the php file which will send the data to the client (in my case that file is index.php) also you can send more parameters to that if you want only name is mandatory in my case, the name must be the same as the .xml file in which the popup is stored (i'll show the xml file later). Here is the php code which wil generate the data for the javascript part, this is json data :

 
$content = file_get_contents ("popups/".$_POST['name'].".xml");
			$xml =  new SimpleXMLElement($content);
			$res = array();
 
			$res['count'] = $vars['count'];
			$res['title'] = (string)$xml->title;
 
			$res['content'] = (string)$xml->body[0];
			$res['content'] = str_replace("{[","<",$res['content']);
			$res['content'] = str_replace("]}",">",$res['content']);
 
			$res['buttons'] = array();
			foreach($xml->buttons->button as $button)
			{
				$res['buttons'][]=array("label"=>trim((string)$button->label),"action"=>trim((string)$button->action));
			}
 
			die(json_encode($res));

As you can see here the xml files are stored in a separate folder to make them easier to organize. Also you need to have the simpleXML (php extension) installed on your server but this is there on 99% of the cases, so no need to worry.

5. The last thing is the xml file that will store the popup, this is my login popup :

 
 version='1.0' standalone='yes'?>
>
	>
		{[div class='error' id='login_errors']}{[/div]}
		Enter your credentials here :
		{[form]}
			{[div class='form_line']}{[div class='form_label']}Username:{[/div]}{[input type='text' id='login_username' class='form_input'/]}{[/div]}
			{[div class='form_line']}{[div class='form_label']}Password:{[/div]}{[input type='password' id='login_password' class='form_input'/]}{[/div]}
		{[/form]}
	>
	>Login>
	>
		>
			>Login>
			>
				data = new Object();
 
				data.action = "User::auth";
				data.username = $('#login_username').val();
				data.password = $('#login_password').val();
				data.ajax = 1;
 
				$.post(APP_URL+"index.php",data,function(data){
					$('#login_errors').html(data.content);
				},"json");
			>
		>
		>
			>Close>
			>$(this).dialog('close')>
		>
		>
			>Back>
			>
				DialogsManager.getInstance().loadDialog('auth_method');
				$(this).dialog('close');
			>
		>
	>
>

One problem with this is that you can't use "<" and ">" in your xml so you need to replace them, i used "{[" and "]}" so a

now it's {[div]}.

And this is it, you should try it and let me know if there are any problems.

umkk.eu » dialog wizards

jQuery popups wizard, web 2.0 ideea and usability