p3d.co.uk

The following is one way to handle json responses from a rails application.
So, I have a ajax request in a script in my page. In this example I am using the jquery poll plugin to poll the status of a file import.

$("#<%=import.id%>").poll({
    url: "/mis_imports/import_state/<%=import.id%>",
    interval: 3000,
    type: "GET",
    success: function(data){
                   var return_data = eval('(' + data + ')');
                   $("#<%=import.id%>").attr("class","mis_import_state_"+return_data.state);
		   $("#<%=import.id%>_message").html(""+return_data.status+"");
		   $("#<%=import.id%>_timestamp").html(""+return_data.timestamp+"");
		   if (return_data.state == 1){
		     $(this).stop();
		   }
    }
});

And on the server, my rails action method looks like this:

def import_state
    import = MisImport.find(params[:id])
    render :text => {:state => import.state,:status => import.message,:timestamp => Time.now.strftime("%d:%b:%Y %H:%M:%S")}.to_json
  end

The key part to this working is line 6 of the javascript listing, where one ‘evals’ the data returned from the server.
This effectively rehydrates the data structure into a usable javascript object, and that’s the bit I keep forgetting!

There are probably smarter ways of doing this; I know there is a jQuery.getJSON() function, but in this case I couldn’t work out how to use that with jquery poll. Again, probably very simple…

I have a page in an application where the user can move names from one column (table) to another.

I have a bunch of js that removes the selected row from table a and adds it to table b.

Everytime I change one of the tables I want to sort the tables.

The syntax is below, if only for my own reference as it took me ages to get it just right. I need to write a custom sorter as I need to sort on the second word (i.e. surname). But anyway, the following is in a function that gets called when a row is moved between tables…

function sort_table(table){
   $(table).tablesorter();
   $(table).trigger("update");
   var sorting = [[0,0]];
   // sort on the first column
   $(table).trigger("sorton",[sorting]);
}

There’s nothing particularily novel here, all available around the net. The call to

$(table).trigger("update");

is there as I found that when I moved a row over to the right column and then sorted the left column the row appeared to be still in that table. This is because tablesorter uses a cache of some sort. Calling .trigger(“update”) forces it to rebuild the cache. Or something like that…

I recently discovered the exellent tablesorter jquery plugin for sorting tables of data. It works very well and saved a lot of time having to write server side sorting code.

I did hit a small snag with dates of the format “12 Aug 2008″. The default sorter seemed to be sorting on the day part of the date and ignoring everything else.

In the end I had to set the sorter for these columns as the isoDate sorter which works perfectly, once I set the dateFormat to “uk”.

eg

<script type="text/javascript" charset="utf-8">
 $(document).ready(function()
 {
   $("#pupils_table").tablesorter({
                                   headers: {
                                             4: {
                                                 sorter:'isoDate'
                                                 }
                                   },
                                   dateFormat: "uk"
                                   });
 }
 );
</script>