jquery datepicker ms ajax updatepanel non funziona dopo il post back

Così ho fatto qualche lettura delle domande correlate e ho avuto alcune cose interessanti ma non ho trovato la mia risposta, almeno non ho capito la risposta.jquery datepicker ms ajax updatepanel non funziona dopo il post back

Sono molto nuovo per AJAX, javascript e sclient scripting lato in generale.

Ho usato C# asp.net per un po 'e recentemente ho aggiunto alcuni pannelli di aggiornamento al mio lato per smussare in modo che i controlli utente e i bit vengano aggiornati in modo che la pagina non sia stata ricaricata ogni volta. Tutto funziona brillantemente e ne sono rimasto molto contento fino a quando ho deciso di provare ad usare JQuery.

Ho raccolto il datapicker da ui.jquery.js che è bello e funziona alla grande su una pagina normale. Il mio problema arriva quando faccio un postback all'interno di un updatepanel. Il datepicker smette di funzionare.

da quello che ho letto ho bisogno di collegare manualmente questo backup dopo il post.

1) Non capisco davvero perché. sulla mia pagina master ho:

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

che raccoglie le mie caselle di input con il mydatepickerclass assegnato. e tutto funziona. Perché questo smetterebbe di funzionare sul postback.

2) Come faccio a risolvere questo problema .... come lo leggo in modo che dopo un postback in un updatepanel funzioni ancora.

Capisco che l'ID potrebbe cambiare su un postback, penso, ma mentre sto usando le classi non so cosa stia andando male.

modificare

Ho il seguente codice nel mio UserControl in cui l'aggiornamento sta accadendo:

<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>

Vuol lo script all'interno del UpdatePanel non ricablaggio vero?

Grazie

Jon Hawkins

fonte

2009-02-06 Jon

il pannello di aggiornamento sta per ricaricare il contenuto della html. Dovrai ascoltare UpdatePanel per completare e ricreare il DatePicker.

Ecco un esempio molto semplice. Questo non tiene conto di più pannelli di aggiornamento sulla tua pagina o potenziali perdite di memoria da non distruggere correttamente il tuo datepicker.

Un'altra cosa da notare quando si mescolano ASP.NET Ajax e jQuery fare attenzione perché entrambi utilizzare il $ in diversi contesti

<!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>

fonte

2009-02-06 15:20:25 bendewey

come potrei fare per questo? – Jon

aggiunto un campione. Ti concatena. – bendewey

Ha funzionato con il tuo suggerimento. Grazie .. Non capisco davvero, dovrò fare delle ricerche su ciò che hai dato, ma grazie :) – Jon

So che questo post è vecchio - ma è sufficiente posizionare il datepicker jquery al di fuori della pannello di aggiornamento - dovrebbe funzionare al 100% ...

fonte

2012-02-28 10:19:15 Mike

È vero! ma l'OP ha un requisito. – Zerotoinfinity

So che questo è vecchio ma ...provare sostituire:

$(document).ready(function() {

con:

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

fonte

2012-04-24 15:17:33

Grazie mille. Mi hai salvato il tempo –

Invece di fare questo c'è una semplice alternativa.

Nel postback dell'elemento in pannello di aggiornamento aggiungere questo codice

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

E questo in javascript

function getjquerydate() { 

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

}

dopo il postback parziale nel pannello aggiornato di nuovo chiamare il DatePicker function

fonte

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' }); 
     } 
    });

Puoi fare così. in questo caso funzionerà sempre;))

fonte

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(); 
    }); 
}

fonte

2014-06-17 17:10:19

So che questo è un vecchio post, ma ho appena riscontrato questo problema e ho trovato la risposta in questa discussione. Spero che possa aiutare chiunque incontri questo.

Non ho inserito nessuno script lato client nel codice. Ho solo messo questo codice:

 <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>

Il codice sopra deve essere all'interno della sezione del corpo e non della sezione della testa. Ho provato a metterlo prima e dopo il gestore di script, o all'interno e all'esterno di UpdatePanel e non ho riscontrato alcun problema con tutte le opzioni. Quindi finché questo codice è nella sezione del corpo, funziona per me.

Assicurati di cambiare la classe di datetimepicker definita. Perché il mio è "default-date-picker" nel file js.

fonte

2015-07-31 03:07:19

"jQuery UI Datepicker non funziona dopo ajax postback parziale"

Posizionare uno script manager e un pannello di aggiornamento sulla pagina.

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

Ora posizionare una casella di testo e un pulsante all'interno del controllo 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>

Ora associare il controllo datapicker con la casella di testo.

<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>

Ora creare un click lato server per il pulsante che causerà un postback parziale ajax.

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

Su l'esecuzione della pagina, u potrebbe vedere qualcosa di simile

Cliccare sulla datepicker. Il datapicker viene aperto e la data selezionata diventa il valore della casella di testo. Ora clicca sul pulsante. Il clic sul pulsante lato server viene chiamato e ora vedrai qualcosa di simile.

tasto

Il datepicker è gone.So cosa facciamo ora per farlo lavorare all'interno ajax. Vedi sotto il codice.

<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>

pageLoad() funzione è disponibile in JavaScript se si utilizza ASP.NET ajax. AJAX framework fili automaticamente qualsiasi funzione sul lato client di nome Pageload() come un gestore di Application.Load

Credits Link alla fonte

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

fonte

2016-12-30 19:00:33 Krishna

grazie! questo mi ha aiutato .. –

jquery datepicker ms ajax updatepanel non funziona dopo il post back

risposta

Problemi correlati