Here's my set up. On the page there's a dropdown box. When the value of this dropdown is changed, I build out the HTML for any number of multiselect boxes (based on the value chosen in the dropdown) via an AJAX call (I build out the HTML along with bind events on these multiselects) via a .load( ) call). In my callback, I trigger this event which applies the multiselect to these dynamically-generated multiselect boxes. The problem is that the multiselect doesn't get applied consistently. Sometimes it works perfectly, other times I get the following error message:
$('#denials').multiselect( ) is not a function
At first I thought maybe the DOM wasn't being loaded, or maybe the HTML wasn't being loaded, but then I threw in a setTimeout( ) where I trigger the event as the callback. I still get this error sometimes (it's about a 50/50 shot whether it works correctly) even though I can see that the multiselects have fully loaded.
Is there any issue with applying this widget to multiple dynamically-generated multiselect boxes on the same page? Is there something else I'm missing?
It's weird. When it works successfully, if I inspect the multiselect with Firebug, I can see the multiselect( ) object. However, when it fails, multiselect( ) is not there - which makes sense based on the error message.
But you think that change can help? Does it explain why this multiselect widget works some times but not all the times?
Hmmmm... Actually, that might be a good point. I know we load jQuery on our page load. Then I think we might be including a call to jQuery again when rebuilding that HTML that creates the multiselect boxes. Maybe that's our problem like you said? Would that make sense in explaining why the multiselect works sometimes, but fails at other times?
Hey man! You were right! It was the multiple copies of jQuery stepping on top of each other. I changed the references to only point to one instance and everything is working MUCH more reliably!!! Thanks again man!