[RESOLVED]Set selected in multiselect dropdown using JQuery from AJAX return

I have an AJAX call that is returning JSON objects.  There are two lists in each returned object and I am iterating through the first then inside that iteration I iterate through the other.  I have a select that lists a number of options with value.  I was
going to use my second iteration of the AJAX return using each and set the option with the value of the returned object to selected. 

                          $(this.UsedLinesList).each(function () {
                                $("#cbselLines").val(this.PRLineID);
                            });

However the JQuery api seems to indicate that for multiselects you should use the construct $("#IdOfMultiSelect").val(["valueJSON1", "valueJSON2", "ValueJSON3"]);

This seems to indicate I first have to create an Array of the values of all of the objects returned by the JSON call and then set the val() of the multiselect  to be that array.

However, I have no idea of how to take the value of all the returned objects and make it an array all at once.  I did the below

                            var UsedArray = [];
                            $(this.UsedLinesList).each(function () {
                                UsedArray.push(this.PRLineID);
                            });
                            $("#cbselLines").val(UsedArray);

However given my SQL orientation I wasa always under the impression that doing a "set-based" change is better than a iterative change, but I have no idea of any way to do that.  Is this the best way to do this or is there a something I am overlooking.

 

Hi joeller,

It seems that you want to set mutliselect dropdownlist  via ajax ,I suggest that you can try  code snippet which from (http://stackoverflow.com/questions/8326161/multiselect-biding-after-ajax-load)like
below:

$.ajax({
  url: yoururl,
  method: 'POST',
  success: function(data){
            //do what you need to do and then initialize the multiselect

    $("#parent_task").multiselect({
        selectedList: 4,
       click: function(event, ui){
            var cntInput=$("#child_task").multiselect("widget").find('input[value='+ui.value+']').parent('label');
            if(ui.checked){ cntInput.hide() }else{cntInput.show() }
       }

    }).multiselectfilter();
    $("#child_task").multiselect({
        selectedList: 4,
       click: function(event, ui){
            var cntInput=$("#parent_task").multiselect("widget").find('input[value='+ui.value+']').parent('label');
            if(ui.checked){ cntInput.hide() }else{cntInput.show() }
       }
    }).multiselectfilter();

 }

Best Regards,

Kevin Shen.

This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore,
Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you
completely understand the risk before retrieving any software from the Internet.

Kevin Shen – MSFT

$.ajax({
  url: yoururl,
  method: 'POST',
  success: function(data){
            //do what you need to do and then initialize the multiselect

    $("#parent_task").multiselect({
        selectedList: 4,
       click: function(event, ui){
            var cntInput=$("#child_task").multiselect("widget").find('input[value='+ui.value+']').parent('label');
            if(ui.checked){ cntInput.hide() }else{cntInput.show() }
       }

    }).multiselectfilter();
    $("#child_task").multiselect({
        selectedList: 4,
       click: function(event, ui){
            var cntInput=$("#parent_task").multiselect("widget").find('input[value='+ui.value+']').parent('label');
            if(ui.checked){ cntInput.hide() }else{cntInput.show() }
       }
    }).multiselectfilter();

 }

Hi Kevin;

I am not very experienced in JQuery and am not very conversant it it.  So here what it looks like to me this code is doing.

The ajax call is made. In the success function a multiselect is set on the Select "#parent_Task" and a click event handler is implemented

However I am not sure what this doing

It looks like it is setting a multi select on an already existing "#child_task" select, but setting a parameter of "widget" for some unknown reason.  Then within this multiselect you are looking for a all inputs whose value equals the value property of the
ui parameter and setting the parent to be all label elements.

Is that correct?  I am not clear on what is going on in that click function, and whether I need it for what I am doing.

Turns out that the JQuery UI multi-select i chose to use was in fact defective.  Once I published  it and deployed it to a test machine it revealed a JavaScript error that was not shown in the development environment.  Seems as though that plugin was missing
a ")" somewhere.  So I ended up using another multi-select with checkboxes that is not as versatile or attractive but at least works.  However, in trying to get these mechanisms to work, I had updated to the latest versions of JQuery 1.11.1 and JQuery UI 1.11.2
that I could find on their websites.  Much to my dismay this caused a problem when I deployed to the test machine in that JQuery UI was making use of the "browser" object which had been removed as of JQuery 1.9.  This caused an error to be thrown

Message: 'n.browser.msie' is null or not an object
Line: 1
Char: 156483
Code: 0
URI: http://localhost:51718/VFS_ProcurementTracking/bundles/jqueryui?

Which broke all of my tools I was getting from JQuery UI.  I ended up having to revert to the version provided with VS2012 JQuery 1.8.2 and JQuery UI 1.8.24.

I am not happy.

Leave a Reply