jquery datepicker ms ajax updatepanel nie działa po odesłaniu z powrotem

Więc zrobiłem trochę czytania powiązanych pytań i miałem kilka interesujących rzeczy, ale nie znalazłem odpowiedzi, przynajmniej nie rozumiałem odpowiedzi.jquery datepicker ms ajax updatepanel nie działa po odesłaniu z powrotem

Jestem bardzo nowy w AJAX, javascript i schelient side scripting w ogóle.

Używam C# asp.net na chwilę i ostatnio dodałem kilka komentarzy do mojej strony, aby wygładzić tak, że formanty użytkownika i bity są aktualizowane, aby strona nie była ponownie ładowana za każdym razem. Wszystko działa doskonale i byłem z niego bardzo zadowolony, dopóki nie zdecydowałem się użyć JQuery.

Podniosłem datepicker z pliku ui.jquery.js, który jest świetny i działa świetnie na normalnej stronie. Mój problem pojawia się, gdy wykonuję odświeżenie od wewnątrz updatepanel. Datepicker przestaje działać.

z tego, co przeczytałem Muszę ręcznie połączyć to z powrotem po powrocie do wiadomości.

1) Nie do końca rozumiem dlaczego. na mojej stronie wzorcowej mam:

<script type="text/javascript"> 
    $(function() { 
     $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
    }); 
</script>

która odbiera moje pola wejściowe z przypisaną klasą mydatepicker. i wszystkie dzieła. Dlaczego miałoby to przestać działać na poczcie zwrotnej.

2) Jak to naprawić .... w jaki sposób go podłączyć, aby po odświeżeniu strony w updatepanel nadal działa.

Rozumiem, że identyfikator może ulec zmianie na poczcie zwrotnej, myślę, ale ponieważ używam klas, nie wiem, co się dzieje.

edit

Mam następujący kod w moim usercontrol gdzie dzieje się aktualizacja:

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server"> 
<ContentTemplate> 
    <%-- Start of Company History section --%> 
    <fieldset> 
     <legend>Activity History</legend> 

      <script type="text/javascript"> 
       $(function() { 
       $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
       }); 
      </script>    

     <div> 
      <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" /> 
      <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" /> 
      <label>Date To:</label><input class="mydatepickerclass" type="text" /> 
      <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" /> 
      <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" /> 
     </div> 


    </fieldset> 
</ContentTemplate>

Czy skrypt wewnątrz updatepanel nie rewire go?

Dzięki

Jon Hawkins

Źródło

2009-02-06 Jon

panel aktualizacja będzie odświeżyć zawartość HTML. Będziesz musiał wysłuchać UpdatePanel, aby zakończyć i ponownie utworzyć datepicker.

Oto bardzo podstawowa próbka. Nie uwzględnia to wielu paneli aktualizacyjnych na twojej stronie ani potencjalnych wycieków pamięci, ponieważ nie niszczą one poprawnie Twojego datepika.

Inną rzeczą, aby pamiętać podczas mieszania ASP.NET Ajax i jQuery być ostrożnym, ponieważ zarówno użyć $ w różnych kontekstach

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

      function EndRequestHandler(sender, args) { 
       $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
      } 

     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox> 
      <br /> 
      <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
       onclick="Button1_Click" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    </form> 
</body> 
</html>

Źródło

2009-02-06 15:20:25 bendewey

jak pójdę na ten temat? – Jon

dodano próbkę. Łączy cię. – bendewey

To zadziałało z twoją sugestią. Dziękuję .. Naprawdę nie rozumiem tego, będzie musiał zbadać, co dałeś, ale dziękuję :) – Jon

Znam ten post jest stary - ale tylko postawić jquery datepicker z zewnątrz panel aktualizacji - powinien działać w 100% ...

Źródło

2012-02-28 10:19:15 Mike

To prawda! ale OP ma wymagania. – Zerotoinfinity

Wiem, że jest stary, ale ...spróbuj wymienić:

$(document).ready(function() {

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {

Źródło

2012-04-24 15:17:33

Dziękuję bardzo. Uratowałeś mój czas –

Zamiast robić to istnieje proste rozwiązanie.

W odświeżenie strony elementu w panelu aktualizacji dodać ten kod

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();", True)

i to w javascript

function getjquerydate() { 

$(".datepicker").datepicker({ 
    numberOfMonths: 2, 
    showButtonPanel: true, 
    minDate: 1, 
    dateFormat: 'dd/mm/yy', 
    showOn: "button", 
    buttonImage: "images/calendar.gif", 
    buttonImageOnly: true 
});

}

po częściowym odświeżenie strony w zaktualizowanym panelu ponownie wezwać datepicker funkcja

Źródło

2013-05-21 07:00:09

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack(); 
     function EndRequestHandler(sender, args) { 
      $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
     } 
    });

Możesz zrobić tak. w tym przypadku będzie działać zawsze;))

Źródło

2013-07-02 21:55:22

Sys.Application.add_load(LoadHandler); 

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() { 
    $(document).ready(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: "M d, yy", 
      changeMonth: true, 
      changeYear: true, 
      onSelect: function (dateText, ubst) { your code here... } 
     }).val(); 
    }); 
}

Źródło

2014-06-17 17:10:19

Wiem, że to stary post, ale właśnie napotykam ten problem i znalazłem odpowiedź w tym wątku. Mam nadzieję, że pomoże to każdemu, kto się z tym spotka.

Nie umieściłem żadnego skryptu po stronie klienta w kodzie. Umieszczam tylko ten kod:

 <script type="text/javascript">  
     Sys.WebForms.PageRequestManager.getInstance().add_pageL 
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

       function EndRequestHandler() { 
        $('.default-date-picker').datepicker({ 
         format: 'dd-mm-yyyy' 
        }); 
       } 

      }); 
      </script>

Powyższy kod musi znajdować się wewnątrz sekcji ciała, a nie sekcji głowy. Próbowałem umieścić go przed i po menadżerze skryptów lub wewnątrz i na zewnątrz UpdatePanel i nie znalazłem problemu ze wszystkimi opcjami. Dopóki ten kod znajduje się w sekcji ciała, działa to dla mnie.

Po prostu upewnij się, że zmieniłeś zdefiniowaną klasę datetimepicker. Dla mojego jest "domyślny selektor daty" w pliku js.

Źródło

2015-07-31 03:07:19

„jQuery UI Datepicker nie działa po częściowym odświeżenie strony ajax”

Place menedżera skryptów i panelu aktualizacji na stronie.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<asp:UpdatePanel ID="upd1" runat="server"> 
<ContentTemplate> 
</ContentTemplate> 
</asp:UpdatePanel>

Teraz umieść pole tekstowe i przycisk wewnątrz kontrolki updatepanel.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<asp:UpdatePanel ID="upd1" runat="server"> 
<ContentTemplate> 
    <div style="font-family: Arial; font-size: small;"> 
     Select Date : 
     <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">   
     </asp:TextBox> 
    </div> 
    <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack" 
     OnClick="btnAjax_Click" /> 
    </ContentTemplate> 
</asp:UpdatePanel>

Teraz powiązać formant datepicker z polem tekstowym.

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
}); 
<script>

Teraz utwórz kliknięcie po stronie serwera dla przycisku, który spowoduje częściowy odświeżenie wyniku w pliku ajax.

protected void btnAjax_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(1000); 
}

na prowadzenie strony, by u zobaczyć coś takiego

Kliknij na datepicker. Datepicker zostanie otwarty, a wybrana data stanie się wartością pola tekstowego. Teraz kliknij przycisk. Kliknij przycisk po stronie serwera, a teraz zobaczysz coś takiego.

przycisk

datepicker jest gone.So co robimy teraz, aby go pracy w AJAX. Zobacz poniższy kod.

<script type="text/javascript" language="javascript"> 
function pageLoad(sender, args) 
{ 
    $(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
    }); 
} 
</script>

Funkcja pageLoad() jest dostępna w JavaScript, jeśli używasz ASP.NET ajax. AJAX ramy automatycznie drutów o dowolnej funkcji po stronie klienta o nazwie pageload() jako przewodnika Application.Load

Źródło link Kredyty

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

Źródło

2016-12-30 19:00:33 Krishna

dzięki! to mi pomogło .. –

jquery datepicker ms ajax updatepanel nie działa po odesłaniu z powrotem

Odpowiedz

Powiązane problemy