Chosen : jQuery plugin…does not work after postbac

问题:

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 drop-downlist i.e AutoPostBack="true",after selecting one item the control lossing its property and converting to normal drop-down list

Can anyone have any idea about this? Please suggest me.

Thanks

回答1:

If you are binding plugins in $(document).ready();, then add this code and check.

$(document).ready(function(){
//Binding Code
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        //Binding Code Again
    }
});

回答2:

try adding this code,

 <script type="text/javascript">
    $(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
    });

    function PageLoaded(sender, args) {
        $("#dropdownid").chosen();
    }

</script>

because in each post back dropdown will refresh and the chosen binding will lose.You need to bind it in each postback

回答3:

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

});

回答4:

Cause: All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working

Solution: The solution to this problem is that we need to re-apply the jQuery Plugin every time the UpdatePanel’s Asynchronous request or Partial PostBack is completed. For which we can make use of the event handlers provided by the ASP.Net Framework to detect completion of UpdatePanel’s Asynchronous request or Partial PostBack.

Code

  //On UpdatePanel Refresh
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  if (prm != null) {
      prm.add_endRequest(function (sender, e) {
          if (sender._postBackSettings.panelsToUpdate != null) {

              for (var selector in config) {
                  $(selector).chosen(config[selector]);
              }

          }
      });
  };

add this to your javascript section