More advances

July 10, 2007

First things first: I made some updates in the prototype. It now works as expected, allowing you to make a page a child of another page which doesn’t have children yet.

I also show in it what I think is the best way of handling pagination. The idea is to display an item from the main hierarchy before and another one after the items that belongs to the current page, in the ordering view. If the before/after main hierarchy item has children, all of its children should be displayed as well. In the demo, my before and after main hierarchy items are child less, therefore the “items bellow this” and “items above this” markers show up after one item, but that would vary. I did a lot thinking into this and think this is the only (and simpler) way you can move main items from one page into the other, without having “dark spots” (elements that are “stuck” in a page).

In trying to understand what was making nesting not working in the prototype, I had to dissect the Interface plugin code for the Draggables, Dropables and Sortables. I found the code pretty cluttered and hard to understand, filled up with variables with names such as “oC”, “oD”, “a”. In fact, almost no variables have meaningful, unabridged names. I had to do a lot of debugging, using Firebug. The code is very coupled as well as, for instance, you have calls to the Sortables plugin being made from the Draggable and Dropable (you would expect the Draggables and Dropables, as lower level elements, to be unaware of the Sortables existance). I didn’t like the code, but at least I understand it now.

Meanwhile, I found out the the jQuery team (John Resig, the creator, included) are creating an official, brand new set of UI plugins for jQuery. It is called jQuery UI. I wonder why they decided to skip Interface all together. It was not released yet, but already have working Draggables, Dropables and Sortables. I checked it out from SVN, looked at its code and tested it. The code is a great step foward from what I saw in Interface. Much cleaner, commented, well organized and easy to understand. Impressively, it also looks like they managed to keep it a lot smaller (30kB against 46kB of Interface’s). The coupling problem I mentioned doesn’t exist, as they created a generic callback in the Dragabble (called dropBehaviour), that the Sortable implements. That way, I could, for instance, create a brand new Sortable-like plugin, without having to modify Draggable’s or Dropable’s code. They seem to be tackling the “Sortable with Hierachy” problem as well, and have some partially working demos for it, in their test files.

Regarding the server side implementation, I am leaning towards passing the javascript a JSON representation of the page list, instead of generating the whole UL list in the server side. I think it will make things much more reusable, in both ways (reusing the javacript and the server side script). It will also download a lot faster for the client. I was thinking of using a JSON like this:

"columns":["Title(ID)", "Owner", "Updated"],
"info":["My Title(1)", "My Owner", "My Date"],
"info":["My Title(2)", "My Owner", "My Date"],
"info":["My Title(3)", "My Owner", "My Date"],

In this example we have a parent page which has two children.  It doesn’t look so good because I can’t indent the code to display it here. I already implemented it on the prototype, so now, instead of loading the page list from an file with HTML and just displaying it, it loads a file with JSON and processes it to create the HTML on the fly. The JSON file for the prototype can be seen here: list_demo_json.js  The JSON file has 2kB, versus 6kB for the HTML with the exact same data.



  1. I just noticed the demo is not working on IE7, because the ‘Edit Page Order’ button is not showing up. I will look into it. It works fine in Firefox, though.

  2. I see a couple bugs (I’m using FF).

    1. Drag title(6) so that it is a sibling (not a child) of title(5) but do not let go of the mouse. Then try to drag it back to its original position as a child of title(5). It won’t go.

    2. As I’m dragging a row, my hand-cursor must be hovering over the dashed box’s top border in order to drag the row to all possible horizontal positions. It feels weird that my mouse should have to be that high up. In other words: If I click and hold “[drag]”, I can’t move my mouse only left/right to get it the row to shift. I also have to move the mouse up a bit.

    3. I can’t move a row to the previous page unless I put it above the row that’s already there. I cannot put it between that row and the “items above this line” marker.

    How do I put the item several pages back/forward?

    Instead of your “above/below” markers and the item from the prev/next page, what would be really slick is:

    A section at the very top that when hovered over, would cause the entire table to JS “scroll” down and be replaced by the content from the previous page. You could keep going up and up to pages further back. Do the same with a section at the bottom for next pages.

    What do you think? It doesn’t sound too hard since it seems you’ve already got a nice way of getting server info to the client.

    Speaking of the server sending info to the client, JSON is fine as long as everything gets properly sanitized and the script won’t explode if given bad (malformed or malicious) JSON. (The same advice applies to anything really, including raw HTML.)

  3. Hi Mike,

    Regarding the bugs and misbehaviors, I am taking care of then. I am rewriting it almost entirely, to create a definitive jQuery plugin (I am calling it NestedSortable). It is looking god and already working, but there are still a few minor issues. I think tomorrow or the day after I should be able to publish it here.

    About your idea for pagination, I like it a lot, it is way better than what I was thinking. Mine wouldn’t be efficient at all for moving through a lot of pages. What I will probably do is “augment” the JSON array as the user move from page to page, so we won’t lose track of what was modified on the other pages. Then send the reordered array back to the server, with irrelevant information striped away.

    About sanitization, is being taken care of by jQuery, as I am using a jQuery method that is designed to fetch JSON (I am not using eval directly to parse the JSON).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: