umkk.eu » JSON

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.

Greasemonkey, create a options panel using jQuery

sergiu — Thu, 22 Oct 2009 07:06:20 +0000

greasemonkey options panel with jquery

Hi, this tutorial is also based on the mouse hunt script "facebook mousehunt improvements" created by me, and in this one i will explain how to create an options panel (only check boxes at this time) and save it.

Here is my final result with this script :

If you want to try this, remember to load jquery correctly as described in this post at number #4.

First of all, the data is saved in a cookie as JSON, i have an object where i save all my data and i save that object as JSON on a cookie. Because javascript does not know to convert an object to a json string i used a class which does that, the class is not created by me, I just use it as it is, here is the fie : json
I copied the content of the file inside my script so i don't have to load it remotely, anyway it's just a line , so you should also copy this at the beginning of your greasemonkey script.

As i said the data is saved as cookie, here is the functions which will create, and read a cookie :

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

Also in my program i read the cookie when the script starts so the data object "myData" in my case will be populated and available in the entire script :

var myData = new Object();
try {
	if(readCookie("gm_pl_data")!=null)
	{
		myData = JSON.parse(readCookie("gm_pl_data"));
	}
	else
	{
		//if there is no cookie we initialize it
		initCookie();
	}
}catch (err)
{
	initCookie();
}

In my case gm_pl_data is the name of the cookie in which i save the data. Here is the initCookie() function, this will just initialize the objects inside the myData object :

function initCookie ()
{
	myData = new Object();
	myData.allLogs = new Object();
	myData.allChese = new Object();
 
	savePersistentData();
}
 
//will be valid 1000000 days
function savePersistentData ()
{
	createCookie("gm_pl_data",JSON.stringify(myData),1000000);
}

I let in there all my init objects so io can see how to initialize them if you have more. You can also notice the savePersistentData function which will update the cookie and save the persistent data .

Until here we only had generic information about how data is saved and the functions which save the data. Now I'll go in more details for the actual options panel. The panel is actually a div in which you can enter any thing you want, but the values of the check boxes will be saved and their status restored when the page reloads.

So here is how my panel looks like :

jQuery("#gm_pl_options_container").append("Show the timer
" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Automaticaly sound the horn
" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Kings rewared options
");
	jQuery("#gm_pl_options_container").append("Play youtube on kings reward
" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Play midi on kings reward
" type="checkbox" />
");
	jQuery("#gm_pl_options_container").append("Show alert on kings rewared
" type="checkbox" />
");
 
	setOptions();
 
jQuery("#gm_pl_options_container input").click(function () {saveOptions()});

in this case the id of the div inside which i enter the options is "gm_pl_options_container", and i you can see that setOptions() is called, this will set the default options for the check boxes based on the myData object, here's the code :

function setOptions ()
{
	if(typeof myData["options"] == "object")
	{
		for(i in myData["options"])
		{
			jQuery("#"+i).attr("checked",myData["options"][i]);
		}
	}
}

In my case the options are saved in myData["options"] the myData object is the main script object and all the scripts data is saved there, not just the options.

And after the setOptions function is called we also have an intresting line, this will add an onclick function to each input on that div, and in this function we call saveOptions(), this function will get all the inputs in that div, and save the values in myData['options'] object, and also write the cookie to make sure that the values are not lost on page refresh :

function saveOptions ()
{
	if(!(typeof myData["options"] == "object"))
	{
		myData["options"] = new Object();
	}
	jQuery.each(jQuery("#gm_pl_options_container input"),function () {
		if(this.checked == true)
		{
			myData["options"][this.id] = true;
		}
		else
		{
			myData["options"][this.id] = false;
		}
	});
	savePersistentData();
}

Every thing you have to do now is use those options, there are 2 ways to do this, you can check the status of the check box or you can get the value from the myData['options'] object, they are the same, i use the object :

if(myData["options"]['gm_pl_show_alert_on_reward'] == true)
		{
			alert("You have a king's reward!");
		}

And this is it, if you have any questions let me know, and remember, if you use mouse hunt don't forget to use my script : Facebook mousehunt improvements