Initialize jQuery Multiselect using AJAX

Question

I have a problem with AJAX and JQUERY.

I have a form, which contents a tag. After select an option, I use AJAX to generate a formular, fill it with some data from a database and show it.

I would like to use the jQuery UI MultiSelect Widget

The problem is that I need to initialize the select with jQuery but it doesn't work when I call this function in the file that generates the new content: (it works well if I don't use AJAX).

<script type="text/javascript">
        $(function(){

            $("#ExampleSelect").multiselect({
                selectedList: 4
            });

        });

</script>

The structure is the following:

• PHP file with the main form which contains a normal and a which will contain the elements that are generated after the AJAX call. (onChange event in the <select>).
• Ajax file

---

function LoadDiv()
{

    var xmlhttp;

    var serie_id = document.getElementById('serie_id').value;


    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("divForm").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","divDataManagement.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("serie_id="+serie_id);

}

$.ajax({

         success: function(){
                $("#ExampleSelect").multiselect("destroy").multiselect({
                     selectedList: 4
              });

     }
});

• PHP file that contains the jQuery UI MultiSelect which wil be displayed in the main php form (inside the <div> tag).

---

<select id = "ExampleSelect"  multiple>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>

                </select>

Thanks for your help.

Answer 1

Initialize it in AJAX success method.

$.ajax({
 ...
 success: function(){
      $("#ExampleSelect").multiselect({
           selectedList: 4
      });
 }
...

If you make changes on a selected instance of multiselect, destroy it and reinitialize after changing.

$.ajax({
 ...
 success: function(){
    $("#ExampleSelect").multiselect("destroy").multiselect({
         selectedList: 4
  });
 }
...

In case you use XMLHttpRequest instead of jQuery ajax, you should init multiselect in onreadystatechange method.

xmlhttp.onreadystatechange=function()
{
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
       document.getElementById("divForm").innerHTML=xmlhttp.responseText;
       $("#ExampleSelect").multiselect({
             selectedList: 4
       });
     }
}