carthage webdev

Our application manages news items which can be assigned to any number of topics. The sequencing of the news items within each topic can be set independently of the sequencing of items in other topics. We wanted a simple drag-and-drop interface that would allow us to set the order of items in a topic.

The items are displayed in a simple unordered list that gets an id of "mylist", and its list items have ids that represent their primary keys in the database:

Dojo makes use of two objects DragSource and DropTarget. In order to make a list dragable, we include:

The next step is to initialize drag and drop sources.

Then we register this event with Dojo so this function is executed every time a page is loaded:

At this point we should have a dragable list, which is both a Dragable element and a Drop target. Our initial task is to have a list that writes to a database when a drag is finished. We use it to change the sequence of news articles. In order to do that, we need to make XMLHttpRequest everytime a drag occurs. Dojo allows you to extend the default functions so I decided to override the onDragEnd function. We change our init() so it looks like this:

In the dropSuccess section, we "collect" the ID's of the list items and put them in a string (orderstr). Then we call a custom function called 'sendreq' and pass the string along.

note:we do not need to override the dropFailure case, but since we are extending the OnDragEnd function, we have to include both cases, so go ahead and copy and paste the original code from the dojo libraries.

Our custom sendReq function calls dojo.io.bind which is provided by Dojo and takes care of the xmlHttpRequest:

Dojo's bind() function takes a url parameter and a handler parameter.

• URL specifies the location of the file that is going to accept the HttpRequest and update the database.
• Handler specifies the callback function that is going to accept the HttpResponse from the server.

In our case, we are not returning any data from the server, so the callback function is quite simple:

function callBack(type, data, evt)
{
   if (type == 'error')
     alert('Error when retrieving data from the server!');     
}

Having implemented the client side portion, it is time to handle the HttpRequest on the server. Our request is sent to:

'/project/app/view/reorder/?orderstr='+str

* str is a comma separated list of id's in the desired order

The reorder() function takes the orderstr from the 'request.GET' object, :

def reorder(request):
        if request.GET['orderstr']:
                orderstr = request.GET['orderstr']
                orderstr = orderstr.split(',')
                for i in range(len(orderstr)):
                        n = NewsSequence.objects.get(pk=orderstr[i])
                        n.sequence = i   
                        n.save()
                return HttpResponse(orderstr)

It updates the database and returns the string of IDs back to the client so we can indicate success.

This entry was posted on Wednesday, July 5th, 2006 at 1:20 pm and is filed under Ivan, tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.