How to capture DOM modifications with JavaScript and send them to a PHP server

Question

I've been asked to create a web UI that allows a user to modify a specific section of the HTML DOM and then POST the modifications back to the server for storage. The modification should be done via drag'n'drop, with my tool of choice being jQuery. The server will be PHP, but written by someone else since I'm not a PHP programmer.

The only way I can think to do this is to send back to the server the entire DOM section via AJAX whenever it is modified. However, that is expensive since the section could be quite large. Furthermore I'm not sure how I'd efficiently capture the modified section and write it to a string which can be sent to the server. Overlapping events would also be a big concern.

Any ideas for a better approach? Are there libraries/tools (JavaScript or server-side) that I should be considering? Many thanks.

Answer 1

Instead of sending the entire DOM section you should try to serialize the DOM section you're sending to something more lightweight (like JSON). Since it's HTML, serializing it to JSON will dramatically reduce it's size. Apart from that I think there's not much you can do besides some AJAX request to allow the server to save the changes.

Answer 2

Well if you are dealing with some list of elements, say rows in table you can send back a map where particular row is mapped to a position then when you re-initialize the page you can feed such map back and rearrange the list. Also - another idea (since you are using PHP) you can have some sort of a model on the back end which backs your visual DOM element, then again - you send back some parameters you have changed (order, size, etc.) and adjust/save the model

Answer 3

You'd want to use something like the UI plugin to facilitate the actual dragging/dropping/reorganizing. I don't know of any libraries that will pick out DOM objects and AJAX information to a server in a particular fashion, so you would probably have to code something like that yourself to suit your specific needs. It might help to know what sort of DOM node you're trying to send.

If you're building something like a custom WYSIWYG, sending the entire node might be the best approach without losing information. If you're doing something simple like allowing users to drag and drop to reorder a list something like the following code might suffice:

var toPost = '';
function handler(data) {//handle server response}
$("ul#container li").each(function(){toPost+=this.getAttribute('rel');});
$.post('processing_script.php',{data:toPost},handler);

I checked into how Google handles these. If you drag and drop an element on the iGoogle homepage, a GET request is sent to the Google handling script with the following parameters:

et  '4af26272PQUMZP8V'
mp  '19_1:4_1:7_1:13_1:16_1:18_2:2_2:3_2:14_2:11_2:_opt_3:17_3:6_3:12_3'