如何在更新面板中使用Pace loader jquery插件？

Question

我想在asp.net applicaiton.My when i change dropdownlist pace loader should work中同时使用jquery pace loader plugin和update panel。

在更新面板中有Initialize request和End Request，指示更新面板中ajax请求的开始和结束。

我的问题是如何在Initialize request和End Request事件中调用加载器插件

我在pace加载器插件中使用的脚本

<script src="../Scripts/external/jquery-1.7.2.min.js"></script>
<script src="../Scripts/pace.min.js"></script>
<link href="../Content/flash.css" rel="stylesheet" />

下面给出了我使用的代码

$(document).ready(function () {      
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);           
        prm.add_endRequest(EndRequest);         

        paceOptions = {
            ajax: true, // Monitors all ajax requests on the page
            document: false, // Checks for the existance of specific elements on the page
            eventLag: false, // Checks the document readyState
            elements: {
                selectors: ['.my-page'] // Checks for event loop lag signaling that javascript is being executed
            }
        };          
    });
    function InitializeRequest(sender, args) {
        //pace loader should start
    }
    function EndRequest(sender, args) {            
        $(".chzn-select").chosen();
       //pace loader should end
    };

更新面板的用法如下

 <table style="text-align: left;" class="searchbox">
    <tr>
       <td class="labelnames" style="width: 100px">
           <label class="control-label" for="focusedInput">Location </label>
       </td>
       <td>
           <div class="controls" style="width: 250px">
              <asp:DropDownList ID="locationList" runat="server" 
              CssClass="chzn-select" AutoPostBack="true"           
              OnSelectedIndexChanged="locationList_SelectedIndexChanged">
              </asp:DropDownList>
           </div>
       </td>
       <td class="labelnames" style="width: 100px">
            <label class="control-label" for="focusedInput">Cashsafes </label>
       </td>
       <td>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
               <ContentTemplate>
                    <div class="controls">
                         <asp:DropDownList ID="CashSafeLists" runat="server" 
                          CssClass="chzn-select"></asp:DropDownList>
                     </div>
               </ContentTemplate>
               <Triggers>
                      <asp:AsyncPostBackTrigger ControlID="locationList" 
                      EventName="SelectedIndexChanged" />
               </Triggers>
           </asp:UpdatePanel>
    </td>
    <td style="width: 150px; text-align: right">
                   <input type="submit" id="Submit1" name="btnSearch" value="Search" 
                    class="btn btn-primary btn-Addbutton " style="margin-left: 4px;" 
                    runat="server" onserverclick="SearchButtonClicked" />
     </td>
  </tr>
</table>

Answer 1

您可以简单地在请求initialize和end中添加Pace.start()；和Pace.Stop()；。

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {
        Pace.start();
    }

    function EndRequest(sender, args) {
        Pace.stop();
    }