jquery - jQuery "Chosen" for Select Boxes - how to apply styling after AJAX loads the select element

Question

So I'm trying to apply the Chosen jQuery plugin to a select box after it has been loaded via XAJAX. Here's the code:

Normally, I start on page load, and all select boxes with the class are correctly styled appropriately:

$(document).ready( function () {        
    $(".chzn-select").chosen();
});

Next, I have a function that uses XAJAX to display the new select box in the specified DIV on the page. This works fine. HOWEVER, it's not styled by Chosen as it should be.

I have tried to add a delay in there too, because I read on some forums that that worked for some people. It does not work....

function getNewSelect(property_id){
    xajax_getNewSelect();
    $(".chzn-select-ajax").delay(5).chosen();
}

Does anyone have any ideas?

Answer 1

What does xajax do?

delay only delays animations, it has no effect on any other function.

If you want to delay a function use:

setTimeout(function() { $(".chzn-select-ajax").chosen(); }, 500);

Answer 2

<script language="javascript" type="text/javascript">
    $(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(loadControlDuringAjax);
        loadControlDuringAjax();
    });
    function loadControlDuringAjax() {
        $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({ allow_single_deselect: true });
    }
</script>

这对我很有用

希望这能解决你的问题