A complete iGoogle like interface example with jQuery

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 these features:

• The user starts with an empty page, where he can add widgets. There is a link “Add widget at column …” that creates a new widget at the selected column.
• Any widget can be configured in the same way that before.
• Widget content comes from an ajax request to a page called “widgets_rpc.php”. This page receives the id of the widget and should respond with the HTML content of that widget.
• Widget configuration is stored in the database when the user changes something and loaded at the beginning.

You can see a working example here: http://www.jsabino.com/test

And you can download the complete source code here: http://www.jsabino.com/iNettutsDB2.zip

Inside the ZIP file, you can find:

• script.sql: the script to create the required table in the database. You must execute it.
• iNettuts_rpc.php: the same file for saving and loading widget configuration. Change here the database connect parameters (server, database, username and password).
• index.html: now it is a simple page with the columns layout but without any widget, because they are created dynamically by a function called “Add”. It looks for the last added widget id and creates a new one in the selected column.

function Add() {
  var i=1;
  while ($("#widget"+i).length>0) i++;
  iNettuts.addWidget("#"+$("#col").val(), {
    id:    "widget"+i,
    color: "color-blue",
    title: "widget "+i
  })
}

• widgets_rpc.php: file that retrieves the content of each widget. It is a simple version showing only “This is the content for widget n” yet.
• inettuts.js: the core file where the widget logic is located. It was first programmed by James Padolsey but I have changed many things. There are three new functions: initWidget (returns the default widget layout), loadWidget (gets widget content with an ajax call) and addWidget (creates a new widget). I have also modified makeSortable (now it is called several times) and sortWidgets (draws widgets in a different way).

initWidget : function (opt) {
  if (!opt.content) opt.content=iNettuts.settings.widgetDefault.content;
  return '<li class="new widget '+opt.color+'"><div class="widget-head"><h3>'+opt.title+'</h3></div><div class="widget-content">'+opt.content+'</div></li>';
},

loadWidget : function(id) {
  $.post("widgets_rpc.php", {"id":id},
    function(data){
      $("#"+id+" "+iNettuts.settings.contentSelector).html(data);
    }
  )
},

addWidget : function (where, opt) {
  $("li").removeClass("new");
  var selectorOld = iNettuts.settings.widgetSelector;
  iNettuts.settings.widgetSelector = '.new';
  $(where).append(iNettuts.initWidget(opt));
  iNettuts.addWidgetControls();
  iNettuts.settings.widgetSelector = selectorOld;
  iNettuts.makeSortable();
  iNettuts.savePreferences();
  iNettuts.loadWidget(opt.id);
},

I have tested this example both in Firefox and Internet Explorer. Some users have reported problems in the comments of my last article, but it works fine for me.