How to build a portal page with saveable state in jquery UI?

Question

Hi,

I know I should spend more time researching this and having a go before asking the question but I've got just 2 weeks to build a site with a portal style homepage (much like http://www.bbc.co.uk).

I'm fairly good with jQuery and have played with jQuery UI draggables in the past but I was wondering if there were any tutorials or best practice examples of how to build a portal with multiple drop zones and the ability to remember which "portlets" have been dragged into which dropzones in some kind of state object.

I would need to be able to save the state object to the back-end using a $ajax() call and somehow reorganise the portlets when the user logs back in to the site, presumably by sending a JSON state object from the back-end.

Just some ideas of where to start would be useful. Thanks

Answer 1

I've been thinking about something similar recently. The best method I could come up with was to have several 'zones' on the page where items would be placed. In my case these were 3 columns. I gave each an identifier and used an Ajax call every time a block was moved to a different position to update the new position of that block.

For example, a sample database table:

tbl.blocks:
  userid | blockid | column | placement
     1   |    2    |   1    |     3

Where column is a simple column identifier and placement is the placement within that column. I used a query at page load that loaded the blocks in order of placement, and then wrote them in. blockid refers to a table of blocks.

Here's a tutorial I found that looks relevant: http://aymanh.com/drag-drop-portal-interface-with-scriptaculous

Answer 2

One suggestion that I have is to use the generated ordering information on the backend to build the page with the items in the correct locations initially rather than rely on javascript to reorder them on page load. This will reduce the chances of having the display morph before the user's eyes from the default to their chosen ordering. It also allows the page to render correctly even with javascript turned off, although they will lose their ability to reorder things obviously.

I think you're spot on with using AJAX to communicate back ordering changes to the server. The only other way you might do this is by having an "edit" mode that allows the user to make the changes, then "save" to get out of edit mode. The save would post back the current orderings. I prefer the AJAX way since you'll need Javascript to handle the drag-n-drop anyway.

Answer 3

This is a very good place to start - http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/. Also take a look at this reference here - http://docs.jquery.com/UI/Sortable. Using information from both sites you can try something like:

<div id='#left_sidebar'>
  <div id='box1'>somestuff</div>
  <div id='box2'>otherstuff</div>
</div>

$(#left_sidebar).sortable({
  update: function() {
     alert($("#left_sidebar").sortable("toArray"));
  }
});

And you can use 'serialize' instead of 'toArray'. Next you need to send the array (or string) to the backend using jquery/ajax - try something like:

$.post(
  "backend_script.php", 
  $("#left_sidebar").sortable("toArray"), 
  onready_function()
);

That line should replace the alert in the upper code - when you are sure the alert shows you what you wanna see (and save).

Answer 4

Thanks ..!, this discussion is very useful for me :)