填充可通过AJAX调用选择的jQuery UI [英] Fill jQuery UI selectable by AJAX call

问题描述

我正在通过AJAX调用填充可选的jQuery.我已经准备好服务器端API，该API经过测试将返回序列化的jason对象.

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.

我已经在客户端声明了selectable

I have declared the selectable at client side

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

然后我有一个按钮将触发AJAX调用以获取数据.

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
    });                
}

我通过Google搜索，但发现的大多数情况是在客户端预定义了列表.

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?

推荐答案

对从服务器返回的数据进行循环，然后将li标签动态地构建到您的ol标签中，然后应用插件.

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
    }
});

这篇关于填充可通过AJAX调用选择的jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！