Initialize jQuery Multiselect using AJAX - php

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