Windtalker Windtalker - 2 months ago 25
Javascript Question

asp.net, fill jQuery UI selectable by ajax call

I am working on filling a jQuery selectable via ajax call. i have prepared server side API, which has been tested will return serialized jason object.

I have declared the selectable at client side

<ol id="selectable"></ol>


Then I have a button will trigger the ajax call to get data.

$.ajax({
url: '/api/XXX/XXX,
contentType: "application/json; charset=utf-8",
dataType: "json",
//error: OnAjaxError,
success: function (data) {

}
});

button.onclick = function () {
$("#selectable").selectable({
//here to fill the selectable list
});
}


I searched via google but most of the case I found were predefined the list at client side.

Then how I render the list after I got my data?

Thanks!

Answer

Do a loop of your returned data from the server and build li tags dynamically into your ol tag and then apply the plugin.

    $.ajax({
                url: '/api/XXX/XXX,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //error: OnAjaxError,
                success: function (data) {
                   $.each(data,function(){
                     $("#selectable").append('<li>'+this.Name+'</li>');
                     //here I am using data.item change it to whatever your server is returning and what you have to show in the li tags
                   });
                   $("#selectable").selectable(); //apply the plugin
                }
            });