Chosen : jQuery plugin…does not work after postback in asp.net

Question

i am using http://harvesthq.github.io/chosen/ control in drop-down list. Everything is going good but i am facing a problem like if i am setting the property of dro

Answer 1

I literally had this problem the other day. Total pain in the butt it was to find an answer to, so I will sum it up here.

The DOMReady event is not fired again after the AJAX call finishes. What I did was added this code to the page..

// handlers for msajax
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, args) {

    try {
        args.get_request().set_userContext(args.get_postBackElement().id);
        $(window).trigger("beginMsAjaxRequest", [sender, args, args.get_postBackElement().id]);
    } catch (e) { }

});


Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {

    try {
        if (args.get_error() == undefined) {
            var sName = args.get_response().get_webRequest().get_userContext();
            $(window).trigger("endMsAjaxRequest", [sender, args, sName]);
        }
    } catch (e) { }

});

Essentially what it does is extends the built-in .NET AJAX events to work with jQuery. However it will return the id of the UpdatePanel or whatever that initiated the AJAX request allowing you to target just the controls within it so that your plugin can update it.

Example as follows..

$(window).on("endMsAjaxRequest", function(event, sender, args, sName) {

    // sname is the id of the UpdatePanel, so..
    $('.my-dropdown', '#' + sName).theDropDownPluginInit();

});

Hope that explains it well...

EDIT:

You can also use the begin event to do anything like hide the elements or disable them or whatever...

$(window).on("beginMsAjaxRequest", function(event, sender, args, sName) {

    // sname is the id of the UpdatePanel, so..
    $('#' + sName).fadeTo(300, 0.6); // fade the UpdatePanel to 60% opacity

});