CODEWITHSUNDEEP
jqueryjsonmulti-select
Chani Poz
Chani Poz

Reputation: 1463

source of json in Multiselect jQuery

I have a multiselect of jQuery and I want to get the source from json. I took the source code from my autocomplete combobox that works, but here it does not work.

My code:

 $(document).ready(function () {
        var warning = $("#message");
        $("select").multiselect({
            //selectedText: function (numChecked, numTotal, checkedItems) {
            //    return numChecked + ' of ' + numTotal + ' checked';
            //},
            source: function (request, response) {
                $.getJSON('http://' + $("[id$='ip']").val() + "/JSON/Auctocomplete.aspx?city=1&term=" + request.term, function (data) { response(data); });
            },
            select: function (event, ui) {
                $("#mfr").textContent = ui.item.id;
            },
            selectedList: 5,
            header: "choose up to 5",
            click: function (e) {
                if ($(this).multiselect("widget").find("input:checked").length > 5) {
                    warning.addClass("error").removeClass("success").html("choose up to 5");
                    return false;
                } else {
                    warning.addClass("success").removeClass("error").html("");
                }
            }
        });
    });

Upvotes: 6

Views: 3568

Answers (2)

serefbilge
serefbilge

Reputation: 1724

I searched, and I think there is not a source property for Jquery multiselect. Take a look at http://www.erichynds.com/blog/jquery-ui-multiselect-widget . Are you sure there is a source property for it?

I advice you, first load select from json, then convert it to multiselect.

// The empty select element:
<select></select>

// In javascript:
$(document).ready(function () {
     var url = 'http://...';

     $.getJSON(url,function(result){
               $.each(result, function(i, field){
                      var option = $('<option value="' + field.value + '">' + field.text + '</option>');
                      $('select').append(option);
               });

               $('select').multiselect({...});
     });
});

Upvotes: 3

Chamika Sandamal
Chamika Sandamal

Reputation: 24332

this is because of the Same origin policy. you cannot use ajax to call external sites. if you really want to use, you have to use JSONP. Or you can use serverside proxy for this. means, call external site in the server side and do ajax call to the that webservice.

for more information please refer this link

Upvotes: 7

Related Questions