How to effectively change local changes made to an html document via javascript back to the server ?

Question

So let's say you display a list of divs that each represent a list item with certain properties (for an example a todo list):

<div class="list">
    <div class="items" id="item1">
        <div class="itemtitle">Some title</div>
        <div class="icon"><img src="1.jpg"></div>
        <div class="footer1" />
    </div>
    .
    .
    .
    <div class="items" id="itemN">
        <div class="itemtitle">Some other title</div>
        <div class="icon"><img src="2.jpg"></div>
        <div class="footer4" />
    </div>
</div>

Now each item has three properties (title, a specific icon, and a custom footer). All these properties can be changed via javascript (say clicking on one cycles through the options). Now everytime something is changed i want to save these changes to the server (and no, i don't want to store the whole html code block (that way i can't sort by the properties later, also it's ugly ;) ). What would be the most elegant and effective way to do this ? (I'm using jQuery if that helps...)

Thanks a bunch !

Answer 1

As long as you have a unique id for each block, you could push each change on blur of that element.

A user changes .itemTitle in #item4, you know the id is 4. So you can use an ajax post, send the item id, the item type (title), and the updated value. Then, on the server side (php, for example), you can do a simple mysql (i'm assuming) update.

Does that make sense? I can show actual code if need be.

Answer 2

If you want to transmit all the changes back to the server in one go, then naturally you need to put them into some kind of <input> element. <input type="hidden"> is the most obvious choice. If you go that route, you can either use an onsubmit handler on your form to update your hidden inputs from the text in the document, or you can update the hidden inputs in realtime as you update the document itself.

As far as how to structure the inputs, that's a harder question because there are several ways to do it and the best way to decide between them, it seems to me, is what's easiest to parse in your server-side framework.

You could create a whole bunch of hidden inputs with name="itemtitle" and a bunch with name="icon" etc, as long as your server-side framework knows how to interpret the resulting form post data as a list-of-values for itemtitle and for icon.

You could create hidden inputs with name="itemtitle1" etc.

Or you could just use one fixed hidden input and populate it with the entire list encoded in some form, such as JSON, if your server-side framework has an easy method for parsing JSON. Then you'd use javascript either in onsubmit or on every change to update the hidden input to consist of [{itemtitle="whatever", icon="whatever, ...}, {itemtitle="..."}] and parse that out as a JSON list on the server side.

Another choice would be to not use hidden inputs at all, but actual textboxes in the document itself. With styling, it's possible to make a textbox look un-editable. If you did that, then your list structure would post back all by itself when it's part of a form post.

Answer 3

One thing you can try is to collect the information into a JavaScript object literal, which essentially like a hashtable/dictionary structure, but you can nest structures inside. It's not a fixed structure, and doesn't require you to have hidden elements in your DOM -- you can have this completely separated from your DOM.

You can then take advantage of JSON notation for transferring this information to your server via a POST. Using Douglas Crockford's JSON2.js library allows you to serialize and de-serialize this structure to/from the object literal notation. And, there's lots of support for JSON on the server side.

So for your example, you could do something like this in jQuery (I extended your markup a little just to have a valid working example):

<div class="list">
    <div class="items" id="item1">
        <div class="itemtitle">Some title</div>
        <div class="icon"><img src="1.jpg"></div>
        <div class="footer1">blah</div>
    </div>
    <div class="items" id="item2">Stuff</div>
    <div class="items" id="item3">Stuff2</div>
    <div class="items" id="item4">
        <div class="itemtitle">Some other title</div>
        <div class="icon"><img src="2.jpg"></div>
        <div class="footer4">boo</div>
    </div>
</div>

(I'm assuming that your DIV ids are sequentially numbered -- item1, item2, item3, etc.)

and the JavaScript...

var theData = {};
$(document).ready(function() {
    $(".items").click(function() {
        theData["title"] = $(this).find(".itemtitle").text();
        theData["icon"] = $(this).find(".icon img").attr("src");
        theData["footer"] = $(this).find(".footer" + ($(this).index()+1)).text();

        alert(JSON.stringify(theData));
    });
});

(I'm assuming the footer data can be selected based on the sequentially numbered DIV id.)

Now that your changed data is in the theData object literal variable, you can send it to your server/service via a jQuery $.ajax call:

$.ajax({
    url: "/ajax_json_echo/",
    data: theData,  //just pass the literal to your server...most can handle it
    type: "POST",
    dataType: "json",
    success: function(data) { alert(JSON.stringify(data)); },  //output it readable form
    error: function(x, t, m) { alert("Error: " + t + " :: " + m); }
});

You can check out a fiddle I put together that demos this.

I hope this helps!

Answer 4

@D Hoerster Thanks a bunch that seems to be the best solution for me - also i really like fiddle ;)