jquery update on screen from drag and drop

cretaceous

I've been implementing drag and drop table row functionality so as to set row order display. It all works fine with a jquery script.
In the rows there is a column showing the row order number (e.g 1 at top, 2 second etc)
So when I drag and drop the rows I have a messy thing to update the row numbering shown on screen.

There must be a cleaner way to do this I think??

onDrop: function(table, row) {
            var ajxa=$.tableDnD.serialize(); 
            var myarr = ajxa.split("&");
            var num=1;	
            $.each(myarr, function(i,v) {
       			var nv = v.split("=");
        		if(nv[1]>=1){
        			$('#ord'+nv[1]).html(num);
    				++num;
    				}
			});    

        }

var ajxa=$.tableDnD.serialize();
gets the new row order into ajxa and I then do my messy string splits on it to get relevant data

$('#ord'+nv[1]) is id of the cell I am updating

this is a sample of ajxa:
dragtable[]=&dragtable[]=&dragtable[]=74&dragtable[]=13&dragtable[]=11&dragtable[]=1&dragtable[]=14&dragtable[]=12

Each item is a table row, the empty ones are the irrelevant header rows

or is this ok?

Weedpacket

Well .... why serialise anything if you're just going to have to parse it again? Surely you can get the value of dragtable from $.tableDnD directly (i.e., without having to convert it to a URL querystring first)?

cretaceous

ah, it's serialised as I send that to a php script to do the actual db update (left that bit out).
Will have a look at doing that..

cretaceous

@ Weedpacket
Got it figured out, thanks, but after looking a bit more carefully at the TableDnd plug-in I realised that the serialize function is overwritten with it's own custom function.
Surely that's bad practice??

johanafm

tableDnD does not override the serialize function, neither globally nor for a "tableDnD'ed" table.

You'd override the jQuery serialize function (jQuery-)globally with

$.fn.serialize = $.tableDnD.serialize;

Or if you'd want to override it for all tableDnD tables, before return this in $.tableDnD.build

$(this).serialize = $.tableDnD.serialize;

Either way, you wouldn't be able to get the same results by explicitly calling serialize from the outside

$('dnd-table').serialize()

since $.tableDnD.currentTable wouldn't be set. It needs to be called from within tableDnD during one of its events after currentTable has been set.

cretaceous

Yes I know it doesn't do it globally - but why did he name the function in the plug-in "serialize" when all it is doing is returning a string:

serialize: function() {
if (jQuery.tableDnD.currentTable) {
var result = "";
var tableId = jQuery.tableDnD.currentTable.id;
var rows = jQuery.tableDnD.currentTable.rows;
for (var i=0; i<rows.length; i++) {
if (result.length > 0) result += "&";
result += tableId + '[]=' + rows.id;
}
return result;
} else {
return "Error: No Table id set, you need to set an id on your table and every row";
}

what I queried was "is this good practice?"

johanafm

As far as the implementation of the function into jQuery, I'd call it good practice and is what I aimed at answering.

Naming something "serialize" which returns a string also seems like a good idea, since this is a common way of serializing stuff, and in particular the common way to serialize stuff for post/get requests.

However, I'd say its bad practice to return "Error: No Table id set..." when it won't serialize the table, since it's a jQuery plugin and jQuery returns an empty string when there is nothing to serialize.

cretaceous

ok - thanks for that

I can see on the plug in page why he added the error message : he got sick of answering queries where users did not add an id
though yes I understand he could have handled it generically elsewhere