jQuery Панель событий и панели обновления jQuery

Question

Я не уверен, что я делаю следующее правильно, но хочу, чтобы мой график jQuery запускался кнопкой и в то же время не нужно было возвращать всю страницу, поэтому панель обновления была включена , По-видимому, график загружается, но почему-то я думаю, что это произошло до того, как возникла обратная связь, поэтому каждый раз, когда я нажимаю кнопку «previewgraph», я вижу, что анимация графика снова возвращается к пустой диаграмме. Пожалуйста, любезно совет.

Спасибо.

<script type="text/javascript"> 
      $("#<%=btnPreviewGraph.ClientID%>") .click(function() { 
       alert("Here"); 
       jQuery(document).ready(function ($) { 
        // for each result row.. 
        $(".extras_result").each(function() { 
         // get the width of the bar from the span html 
         var length = $(this).find("span").html(); 
         // Animate the width of the 'p' with a callback function 
         $(this).find("p").animate({ 'width': length }, 2000, function() { 
          // once the bar animation has finished, fade in the results 
          $(this).find("span").fadeIn(300); 
         }); 
        }); 
       }); 
      }); 
     </script> 


    <asp:Button ID="btnPreviewGraph" runat="server" ClientIDMode="Static" Text="Preview"/> 

      <asp:UpdatePanel ID="upnlPreviewChart" runat="server" UpdateMode="Conditional"> 
      <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="btnPreviewGraph" EventName="Click" /> 
      </Triggers> 
      <ContentTemplate> 
    <div class="row"> 
        <asp:Label runat="server" ID="Label1" Text="<%$ Resources:loyaltyManagerResources, uilblCamQualAccumulatedSpending %>" 
         CssClass="label"> 
        </asp:Label> 
           <br /><br /> 
      <table cellpadding="0" cellspacing="0" class="extras_table"> 
       <tr> 
        <th class="extras_y-desc" scope="row"> 
         Male 
        </th> 
        <td> 
         <div class="extras_result"> 
          <p class="extras_p"> 
           &nbsp;<span>10%</span></p> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <th class="extras_y-desc" scope="row"> 
         Female 
        </th> 
        <td> 
         <div class="extras_result"> 
          <p class="extras_p"> 
           &nbsp;<span>30%</span></p> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <th class="extras_y-desc" scope="row"> 
         Unknown 
        </th> 
        <td> 
         <div class="extras_result"> 
          <p class="extras_p"> 
           &nbsp;<span>55%</span></p> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td> 
        </td> 
        <td class="extras_x-desc"> 

        </td> 
       </tr> 
      </table> 
      </div> 
     </ContentTemplate> 
     </asp:UpdatePanel> 

Answer 1

JQuery (документ) .ready Я не думаю, будет срабатывать, поскольку это работает только с полными обратными передачами.

var Manager = Sys.WebForms.PageRequestManager.getInstance(); 
    Manager.add_endRequest(function() { 
     $(".extras_result").each(function() { 
      // get the width of the bar from the span html 
      var length = $(this).find("span").html(); 
      // Animate the width of the 'p' with a callback function 
      $(this).find("p").animate({ 'width': length }, 2000, function() { 
       // once the bar animation has finished, fade in the results 
       $(this).find("span").fadeIn(300); 
      }); 
     }); 
    }); 

это добавляет вашу же функцию в конец запроса события менеджера - вы можете фильтровать по идентификатору панели я думаю (не знаю, как), или в идеале на кнопке мыши добавить какую-то сторону переключателя клиента.

Я не тестировал вышеуказанный код, но он ДОЛЖЕН работать.

Answer 2

, если вы используете эту кнопку для отображения графика только тогда вы можете ограничить поведение btnPreviewGraph по умолчанию с помощью preventdefault() следующим образом

$("#btnPreviewGraph").click(function (e) { 
    e.preventDefault(); 
    //your code continues 

Answer 3

Если вы используете updatepanel, вам нужно поместить его под функцию pageLoad().

function pageLoad(sender, args) 
{ 
    $(document).ready(function(){ 

    $(".datePick").datepicker(); 

    $(".collapsibleContainer").collapsiblePanel(); 

    });   
} 

это прекрасно работает для меня. Я использую то же самое.