How to Mimic the iGoogle Interface with Database

19 09 2009

James Padolsey wrote a great tutorial about “How to mimic the iGoogle interface” with jQuery. Thank you very much, James. I have used your code intensively.

The next step was a new article explaining how to save widgets configuration into a cookie. Very useful too. But the final part was to store that data in a database.

That’s what a have done: an example of the same code, but using a database. The changes are very easy to implement. I have just had to modify savePreferences and sortWidgets functions in inettuts.js file, and to write a new PHP file for saving and loading data.

I call jQuery post function to send the data using AJAX for savePreferences:


As you can see, cookieString is the same variable stored into a cookie. Then iNettuts_rpc.php manages with the database. It’s a very simple PHP showing how to store the value for a user called John Doe:

header("Cache-Control: no-cache");
header("Pragma: nocache");

// User_id -> Should come from a session variable
$user_id="john doe";

// DB connect parameters


// DB connect

if (isset($_REQUEST["value"])) {
 // SET value  


 $rs=mysql_query("SELECT * FROM $table WHERE user_id='$user_id'");
 if (mysql_numrows($rs)==0)
 mysql_query("INSERT INTO $table($field,user_id) VALUES('$value','$user_id')");
 mysql_query("UPDATE $table SET $field='$value' WHERE user_id='$user_id'");
 echo "OK";

} else {
 // GET value 

 $rs=mysql_query("SELECT $field FROM $table WHERE user_id='$user_id'");
 if ($row=mysql_fetch_row($rs))
 echo $row[0];
 echo "";


And finally, the most difficult part: loading data to sort widgets:

sortWidgets : function () {
 var iNettuts = this,
 $ = this.jQuery,
 settings = this.settings;

 if(!settings.saveToCookie) {

 $.post("iNettuts_rpc.php", "",

 var cookie=data;

 if (cookie=="") {

 /* For each column */

 var thisColumn = $(this),
 widgetData = cookie.split('|')[i].split(';');

 if(!this.length) {return;}
 var thisWidgetData = this.split(','),
 clonedWidget = $('#' + thisWidgetData[0]),
 colorStylePattern = /\bcolor-[\w]{1,}\b/,
 thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern);

 /* Add/Replace new colour class: */
 if (thisWidgetColorClass) {

 /* Add/replace new title (Bring back reserved characters): */

 /* Modify collapsed state if needed: */
 if(thisWidgetData[3]==='collapsed') {
 /* Set CSS styles so widget is in COLLAPSED state */

 $('#' + thisWidgetData[0]).remove();

 /* All done, remove loading gif and show columns: */



I have used the same variable names to make it easier.

You can download the full example here.




53 responses

23 09 2009

thanks for the writeup – very helpful.

i have one question though – how to set a widget’s editable attribute to true or false dynamically? i can see how it can be set in the inettus.js in the widgetIndividual section, but in my case, each widget’s setting is dynamic based on some user criteria. any pointers? i am totally struck and cannot proceed.

i post on James Padolseys blog and have no luck.

24 09 2009

Hi mango

Insert this new function for iNettuts object in inettuts.js:

toggleEditable : function (id) {
        var $ = this.jQuery,
            settings = this.settings;
        var w=$(settings.widgetSelector, $(settings.columns)).get(id);
        if (iNettuts.getWidgetSettings(

        return ;

Call it with the number of the widget you want to toggle editable property. For example: iNettuts.toggleEditable(2);
I can upload and example if you need.

21 07 2010

Can you please give me an example on this section.


28 09 2009


II was looking on the website of James Paddolsy to see if anyone had solved de ‘database’ problem, but discoverd that the sit of Padolsy wasnt online anymore!

But reading your comment on the other site i became very enthousiastic, but i face a problem.

Your example, which i have downloaded, doesnt work in firefox, de loading icon just runs and runs but in never loads actually? What do i wrong?

Thanx in advance!


30 09 2009

Hey Vincent, If you Dont get code running please do little change in following lines :

Original lines :
if ($row=mysql_fetch_row($rs))
echo $row[0];
echo “”


Changed and working lines :

if ($row=mysql_fetch_row($rs))
echo $row[0];
return $row[0];
echo “”;
return $row[0];

i think here jsabino forgot to return the value to jquery ….

but atlast Good Work jsabino ..

just chill ….

3 10 2009

Hi Niraj,

In which file i have to change these lines?

thnx in advance

3 10 2009

Hi Nlraj

The return call you have inserted doesn`t do anything. The value passed to js throught jQuery ajax call is already done by echo. You don’t need to “return” anythings.

Vincent’s problem could be related to database.


28 09 2009

Me estoy encontrando con un problema, si el index tiene menos de 6 widgets deja de funcionar, si tiene más en las pruebas que he realizado funciona, he estado repasando el código y no encuentro cual puede ser el problema.

28 09 2009

Me respondo a mi mismo, el problema viene dado al conectar a la base de datos, si tenemos la configuración de 6 widgets grabada en la base de datos y hemos eliminado un widget manualmente en el codigo HMTL, entonces no se cargara la pagina.

2 10 2009


I need some help. Do you think you can make the version save a different type of widgets set for different users and let them add a widget ? I need this for a project i’m working for at school and would really like some help.

Thank you

3 10 2009

I dont know what i do wrong but the downloadable example doesnt work, can anyone help me?


3 10 2009

Hi Vincent

The example works fine both in Explorer and Firefox. I am sure of that.

– Have you created a database called “iNettuts”? You can use other database but you should change $database variable in iNettuts_rpc.php file.

– Have you created the table in the database using the provided script “script.sql”?

– Have you checked the database connection variables ($server, $user, $password, $database…)?

Try to execute iNettuts_rpc.php file directly in your browser to check if there is an error.


7 10 2009

Hello I setup all that is needed. Then open error console in firefox and it show me this errors:

Error: $(clonedWidget).attr(“class”) is undefined
Source File: file:///D:/Program%20Files%20(x86)/Zend/Apache2/htdocs/testing/inettus/inettuts.js
Line: 255


Error: no element found
Source File: file:///D:/Program%20Files%20(x86)/Zend/Apache2/htdocs/testing/inettus/iNettuts_rpc.php
Line: 46, Column: 3
Source Code:

4 05 2010

Hi Danilo

I am getting same error here ,

$(clonedWidget).attr(“class”) is undefined , at line 255 inettuts.js . I think this is something with mismatching cookie data at client side and one that comes from database.

Your help would be much appreciated!! Can you respond to this by email agentsas (at) gmail (dot) com

Thank you

7 10 2009

I soloved above problem but when I delete some boxes and than refresh page the boxes are still on screen. How can I add this option?

31 10 2009

Hi Danilo

I am getting same error here ,

$(clonedWidget).attr(“class”) is undefined , at line 255 inettuts.js . I think this is something with mismatching cookie data at client side and one that comes from database.

Your help would be much appreciated!! Can you respond to this by email prathyush (at) cre8tivebug (dot) net

Thank you

2 11 2009

can you tell how could you be able to fix above issue

7 11 2009

Excellent work… Thanks…

14 11 2009

you write “// User_id -> Should come from a session variable ”
is possible that evry user ged ID from his session?

6 02 2010

no and yes, what i did was use my session being made from my login script and just display the $_SESSION[‘id’] as the $user_id

14 11 2009

nice work save my day 🙂
i try make box with rss or twitter links editor , it make this script +1

7 12 2009

Can you give me an example of a widget picker? I have seen lots of examples for the cookie version but I can’t get them working with database.
I am also having trouble emptying the config field for a certain user so I can have a reset function

11 01 2010
Anand Selvaraj

i can delete the widget and updated in the db. but when i refresh the page that time all the widgets loading including deleted one.

what my need is once widgets deleted it will not show in the page.

5 02 2010


I was able with trail and error store the users’ session ID as the table ID for the widgets. But I lost my configuration and I can’t reproduce my code! haha, but I was wondering I can only get this script to work if I put all the files into 1 parent folder. I tried to spread out my files to folders like /js/ and /css/ but the entire script breaks, even after setting the correct paths to all the files I moved.

Incidentally, does this script not work if the index.html is rename to index.php?

6 03 2010

hello, your tutorial is helpful. but i want to do in the you worked in php page and i want to work with .aspx page.can you help me how can i get the value from cookie and save into database using

its urgent please help me and mail me the answer

17 04 2010

Hey, If you want to use it together with you must change the $.post command to post to an aspx file e.g.:


and then you must look at the request you get at this aspx side. You’r page_load function could e.g. look like this:

protected void Page_Load(object sender, EventArgs e)
if (Request[“Value”] != null)
// Here you place the code to store the data in the database
// Here you place the code to retrieve the data from the database

30 04 2010

Hay andres will you plz post the whole logic for application please i need it..

16 03 2010

In IE7 it returns some errors for me,
line: 214
character: 1
code: 0
URI: http://localhost/tf2/test/gerekliler/move/inettuts.js

how can i solve that?

29 04 2010

I get this error when I run my page


500 Internal Server Error

in firebug. my widget.php doesn’t return an error so i know its connecting to my database.

hmmm, what could be the problem?

11 05 2010
A complete iGoogle like interface example with jQuery « El blog de Súper Mario

[…] complete iGoogle like interface example with jQuery 5 05 2010 After my previous post about how to mimic the iGoogle interface with database, I have been working in a new version. Now I have added all you need to build a simple page, with […]

28 06 2010
Eric Blue’s Blog » Weekly Lifestream for June 27th

[…] Shared How to Mimic the iGoogle Interface with Database « El blog de Súper Mario. […]

6 07 2010


I converted it to asp but noticed the post is striping all spaces so if the widget name was ‘Widget panel 1’ after the post it is ‘Widgetpanel1’.

7 07 2010

If anyone one else has the same problem with loosing spaces it seems a Ajax POST removes them.

To fix it go to +- line 202 in the inettuts.js file and replace




Take from –

22 07 2010

Please post ASP code

5 11 2010

Hi Jsabino,

Many thanks for this work ! It works perfectly on JQuery version “1.2.6.min.js” but I can’t make it work on latest Jquery versions. That is the blocks are not movable anymore. But they’re still editable. I was wondering if I did something wrong or if somebody else had encountered the same problem ? I can call the 1.2.6.min.js jquery, so I’m not cornered…:-). Have a nice day !

5 11 2010

Hello again,

Actually, the blocks are movable, but the ajax query to php file is not called…
mystery….If I put your old jQuery version, it works…but creates conflicts with my other jQuery scripts….

31 12 2010
Marco Ribeiro

When I try do drag:
this.helper.scrollParent is not a function
[Break On This Error] this.scrollParent = this.helper.scrollParent();

4 02 2011

the collapse button is not working if we use jquery 1.4.x .
any ideas??. t work fine if we are using google chrome or firefox.

8 05 2011

It works perfect, chrome, ie8+9, firefox3+4

11 08 2011

I am getting same error here ,

$(clonedWidget).attr(“class”) is undefined , at line 255 inettuts.js
how to fix it

19 08 2011

If you’re using a more recent version of jquery and the jquery-ui.

jquery-1.6.2.min.js with jquery-ui-1.8.16.custom.min.js the script will not work. Anyone knows what the problem could be?

Because I really need the newer version of jquery.

5 09 2011


I have updated the code to the latest version of jQuery and jQuery UI as you suggest:

26 11 2011
free php scripts

great script….I was working to save in DB since last week today I found it thanks for sharing..

18 07 2012

Thank you very much for this! I started to code this for myself from scratch but then i found the original then the cookie version then this version then your cookie and database version.

I integrated this with UserCake and changed the SaveToDB variable with a php variable which checks if a user is logged in or not.

If they are it saves it to the database if not it saves it to the cookie. Working like a charm.

Now i am just trying to list all my widgets and let a user pick which ones to insert and which ones to remove.

If they are removed they go to a “dock” where they can drag them back at a later date.

(right now in my testing i am using a select drop down box to insert specific widgets)

What i do have a question about is. How can i have a default view?

Basically once someone new, not logged in or no session stored. Will have default widgets displayed. Then they can proceed to edit them. Either by logging or using a sesson.

Right now when a user visits the site it is just blank and that isn’t very appealing. Ideally i would like it to copy the admins widget layout.

I tried to play with the sql in the get value in iNettuts_rpc.php by changing the $user_id depending whether the user is logged in or not but that didn’t seem to work correctly.

Could anyone point me in the right direction?

I hope this is semi active still.

Once again thank you for this it saved me weeks or work!

13 09 2012

Hi Keelan

I think I have already anwered that question in another post in my blog… The best way to do is in iNettuts_rpc.php. Instead of returning an empty string (echo “”;) when the user is not registered in the DB (line 46 in my example), return a valid widget config string, for example:

$rs=mysql_query("SELECT $field FROM $table WHERE user_id='$user_id'");
  if ($row=mysql_fetch_row($rs)) 
    echo $row[0];
    echo "widget1,color-blue,widget 1,not-collapsed|widget2,color-red,widget 2,not-collapsed|widget3,color-blue,widget 3,not-collapsed";

The easiest way to build this string is to make the changes in the page (add the widgets you need) and then copy the string from the config field in the DB.

13 09 2012

Hey, in the end I just turned my js file into php so I could change a variable, when a user logs in it changes to use database else use cookie, then outputs the php file as js witha header.

I pushed a cookie to them when they first visit if they are not logged in, with user 1 widgets from the database.

Works pretty good, when they first register it takes their cookie and writes it to the database.

Then when they visit they and not logged in they will see user 1 untill they login and it pulls there settings from the database.

7 12 2012
recif (@recif67)

Doesn’t work in IE9!

23 12 2012

Great Post, but it doesn’t work with IE 9. I’d appreciate if you could help me.

27 12 2012

Hi Shahzeb and Recif

Please check my updated version here:

It works fine with IE 9.

31 12 2012

Thanks for reply, One more thing, when i drag left to right any div its add new row, could you tell me how do i add replacement functionality, like A1, A2, B1, B2, C1, C2, if i move A2 to C1 then C1 should move to the A2 place and A2 move to the C2 place.

15 04 2013
vacation reply

Hi, just wanted to mention, I liked this post.
It was inspiring. Keep on posting!

25 04 2013

I have been browsing online more than 3 hours today, yet
I never discovered any attention-grabbing article like yours.
It’s pretty value enough for me. In my opinion, if all site owners and bloggers made just right content material as you did, the web might be much more helpful than ever before.

25 04 2013

Hi Jeffry and “vacation reply”

Thank you very much for your encouragement!!!


Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: