Building html from an ajax call to jquery UIs sortable list

Question

Im having a design problem in HTML/JavaScript.

I appended jquery UIs sortable to my web-application: Heres a demo on sortable (cant show my application now): http://jqueryui.com/demos/sortable/default.html

Now im populating that drag and drop list in JavaScript with data from an ajax call. The list is changed by users all the time.

I try do something like this:

Var htmlData = '<div id=wrapper>'
             +'<div>'
             +data.title
             +'</div>'
             +'<div>'
             +data.description
             +'</div>';

${"#sortable-list"}.html(htmlData);

And so on. Some of the divs also have attributes set in variables like 'id="' + data.id + '"' I then try to fit this string htmldata in the sortable-list. But it's getting messy pretty quick. I tried to fit <tables> in it, and <p> with <span> s in. But it's still hard to get the design that I want.

Cant post images due to lack of reputation but here's the design i want (this is just one <li> in the <ul> ):

http://img546.imageshack.us/img546/9179/48361880.gif http://img546.imageshack.us/img546/9179/48361880.gif

So how would you do this? I've been reading about templates like mustache but it don't seems to help me. And the way I building the table with a string can't be the best way.

Any example or info on how to do this is much appreciated

Answer 1

You could do something like this.

var items[]

items.push($('<div />', { html: data.title }));
items.push($('<div />', { html: data.description}));

$("#sortable-list").html($('<div />', {
     'id' : 'wrapper',
     'class' : 'yourclass',
     html: items.join('')
  })
);

the items.push you can use in a loop to cycle all data and push items into the array. Later join the array items into the html

Answer 2

There are many advantages of client side tempting but the main one is that you don't have to mess with stringing HTML together in JavaScript. Doing so is not only error prone but it also quickly becomes a maintenance nightmare.

For example here's how you could tackle your requirements with Underscore.js tempting.

As you can see the HTML is clearly laid out and will be easy to alter as your requirements change.

<script type="text/template" id="sortable-entry">
    <% _.each(items, function(item) { %>
        <div>Title: <%= item.title %></div>
        <div>Description: <%= item.description %></div>
        <hr />
    <% }); %>
</script>

<ul id="sortable-list"></ul>​

<script>
    var data = {
        items: [
        { title: 'title1', description: 'description1' },
        { title: 'title2', description: 'description2' },
        { title: 'title3', description: 'description3' },
        { title: 'title4', description: 'description4' },
        { title: 'title5', description: 'description5' }
        ]
    };

    var event_html = _.template($('#sortable-entry').html());
    $(event_html(data)).appendTo($('#sortable-list'));
</script>

Here's a live example of this - http://jsfiddle.net/tj_vantoll/kmXUr/ .