Question

I have a form which populates div elements based on selections from a select box using an AJAX call.

The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the ‘chzn-select’ is not firing, no doubt due to this being pulled in dynamically.

I have added this:

    <script type="text/javascript">
    $(".chzn-select").chosen();
    </script>

To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?

Answer 1

Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:

    <script type="text/javascript">
    function doChosen() {
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    }
    </script>

And in the AJAX script itself, I added a call to the function after the responseText part:

    document.getElementById(div).innerHTML=oXmlHttp.responseText
    doChosen();