source of json in Multiselect jQuery

Question

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

I had a similar issue and resolved using YQL - Check http://stackoverflow.com/a/12941673/297641 and see if this is any helpful. — Selvakumar Arumugam, Apr 29 '13 at 14:40

score 7 · Answer 1 · answered Apr 28 '13 at 11:19

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

serefbilge · Accepted Answer · 2013-05-01T10:08:31.533

3

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({...});
     });
});

edited May 01 '13 at 10:08

answered May 01 '13 at 08:39

serefbilge

1,654
4
29
55

How can I convert from select to multiselect? and how can I get json into the select? – Chani Poz May 01 '13 at 09:10
$("select").multiselect({ ... as you did, turns select to multiselect. Before this, you should fill select elements with json data with javascript. – serefbilge May 01 '13 at 09:23

source of json in Multiselect jQuery

2 Answers2

Linked