[eluser]slowgary[/eluser]
I see. There are a few things I'd recommend... let's walk through the JS first so you get a better understanding of what's going on.
The first line of your Javascript is referred to as "on DOM ready". This means that the code within will be run as soon as all of the HTML has been downloaded, but before all of those bulky images are downloaded. That's the best time to run your Javascript, as in most cases you can't run it any sooner but very infrequently do you want to wait for all of the images to load. There's actually a shorter version of what you are using:
Code:
// your version. all of your DOMready code goes between these two lines:
$(document).ready(function(){
// code here
});
// shorter version... does the exact same thing:
$(function(){
// code here
});
Next, you basically just have one call to jQueryUI's sortable() function, which takes a collection of list-items and makes them sortable, offering a bunch of other features to ease development. Now you need to call the sortable() method on a jQuery object, which is really just a reference to a specific place in your document, or a collection or these references. In your case, sortable expects that you're calling it on an unordered list <ul> I believe (correct me if I'm wrong). This is where the dollar sign function comes into play $().
Something you should know is that every time you call the dollar sign function, you're asking jQuery to traverse through your entire document (every single tag) finding matching elements. In some cases, this can be quick, like in the case below. This is because you're passing it an ID, which is unique and maps directly to only object which can be retrieved using Javascript's native document.getElementById('#myID'); In other cases, you may be asking jQuery to do a LOT of traversing and checking on elements. In all cases, regardless of how easy or difficult the selection may be, it's recommended that you CACHE the selection. This can be done very simply:
Code:
var my_variable_name = $("#sortable-list");
// or:
var $my_sortable = $("#sortable-list");
// usually it's a good idea to start your variable names with a dollar sign when they refer to a jquery object, then you (or anyone else) will always know what it points to
By caching the selector, you can now avoid asking jQuery to do the DOM traversal unnecessarily. In your case, you've already made the same call twice (" $('#sortable-list') "). Here's your code with the changes so far:
Code:
$(function(){
var $my_sortable = $("#sortable-list");
$my_sortable.sortable({
update: function(){
var order = $my_sortable.sortable('serialize');
$("#info").load("http://localhost/ci/process-sortable.php?"+order);
}
});
});
Now sortable(), just like many plugins, has many possible parameters that you can pass it. In your case, you're only passing it one. That's the 'update' parameter, which is a callback function that gets called after an update is made. In your callback function, you've captured the serialized list data and passed it to "process-sortable.php" by making a call to jQuery's load() method. You're doing two things here, calling the serverside script, and sticking the output from that script into the element on your current page with an ID of #info.
Where the problem appears to lie is that nowhere in your "process-sortable.php" are you ever actually executing that SQL statement. It appears that it is just being displayed on the page.
What I would recommend is to copy that query and paste it into something like phpMyAdmin and see if it executes without any errors. If it works, all you need to do is actually execute it in your serverside script instead of printing it to the screen.
As far as the MVC portion of it is concerned, the idea would be to take whatever code you have that's processing the sortable list data and put that into one of your CodeIgniter controllers. Then in the controller, do whatever preprocessing you might need to do to the data before passing it to a model for saving to the database.
I hope this helps. Let us know.
