jquery datepicker ms ajax updatepanel ne fonctionne pas après le retour
J’ai donc lu un peu les questions qui s’y rapportaient, mais il y avait des choses intéressantes mais je n’ai pas trouvé ma réponse, du moins je n’ai pas compris la réponse.
Je suis très nouveau pour AJAX, javascript et les scripts côté sclient en général.
J’utilise C # asp.net depuis un moment et j’ai récemment ajouté des panneaux de mise à jour à mon côté afin de réduire les contrôles utilisateur et les bits mis à jour afin que la page ne soit pas rechargée à chaque fois. Tout fonctionne avec brio et j’en suis très heureux jusqu’à ce que je décide d’utiliser un peu de JQuery.
J’ai pris le datepicker de ui.jquery.js qui est cool et fonctionne très bien sur une page normale. Mon problème arrive lorsque je fais une publication à partir d’un Updatepanel. Le sélecteur de date cesse juste de fonctionner.
- jQuery FancyBox avec Ajax
- Comment télécharger un fichier via une requête ajax dans asp.net MVC 4
- jQuery Dialog-Postback mais UpdatePanel n’est pas mis à jour
- Demande ajax entre domaines
- ASP.NET MVC et Ajax, demandes simultanées?
D’après ce que j’ai lu, je dois relier manuellement cette sauvegarde après le retour.
1) Je ne comprends pas vraiment pourquoi. sur ma page principale j’ai:
$(function() { $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); }); qui récupère mes boîtes de saisie avec la classe mydatepickerclass atsortingbuée. et tout fonctionne. Pourquoi cela arrêterait-il de travailler sur le postback?
2) Comment puis-je résoudre ce problème …. comment puis-je le câbler pour qu’après une publication dans un updatepanel, cela fonctionne toujours.
Je comprends que l’ID peut changer sur un postback, je pense, mais comme je suis en train d’utiliser des classes, je ne sais pas ce qui ne va pas.
modifier
J’ai le code suivant dans mon contrôle utilisateur où la mise à jour est en cours:
Est-ce que le script dans le panneau de mise à jour ne le recrée pas?
Merci
Jon Hawkins
le panneau de mise à jour va recharger le contenu du code HTML. Vous devrez écouter UpdatePanel pour terminer et recréer le datepicker.
Voici un exemple très basique. Cela ne prend pas en compte plusieurs panneaux de mise à jour sur votre page, ni les memory leaks potentielles dues à une destruction incorrecte de votre datepicker.
Une autre chose à noter lorsque vous mélangez ASP.NET Ajax et jQuery est prudent, car les deux utilisent le $ dans des contextes différents.
Je sais que c’est vieux mais … essayez de remplacer:
$(document).ready(function() {
avec:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
Au lieu de cela, il existe une alternative simple.
Dans la publication de l’élément dans le panneau de mise à jour, ajoutez ce code
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();", True)
Et ceci en javascript
function getjquerydate() { $(".datepicker").datepicker({ numberOfMonths: 2, showButtonPanel: true, minDate: 1, dateFormat: 'dd/mm/yy', showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true });
}
Après la publication partielle dans le panneau mis à jour, il appelle à nouveau la fonction Datepicker.
$(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' }); } });
Vous pouvez faire comme ça. dans ce cas cela fonctionnera toujours;))
“Datepicker de l’interface utilisateur jQuery ne fonctionne pas après la publication partielle ajax”
Placez un gestionnaire de script et un panneau de mise à jour sur la page.
Placez maintenant une zone de texte et un bouton dans le contrôle updatepanel.
Select Date :
Liez maintenant le contrôle datepicker avec la zone de texte.
Maintenant, créez un clic côté serveur pour le bouton qui provoquera une publication partielle ajax.
protected void btnAjax_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(1000); }
En parcourant la page, vous verriez quelque chose comme ceci
Cliquez sur datepicker. Le datepicker est ouvert et la date sélectionnée devient la valeur de la zone de texte. Maintenant, cliquez sur le bouton. Le clic sur le bouton côté serveur est appelé et vous verrez maintenant quelque chose comme ceci.
Le bouton datepicker a disparu.Alors, que faisons-nous pour le faire fonctionner dans ajax. Voir ci-dessous le code.
La fonction pageLoad () est disponible en JavaScript si vous utilisez ajax ASP.NET. La structure AJAX connecte automatiquement toute fonction côté client nommée pageLoad () en tant que gestionnaire Application.Load.
Source Link Credits
http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html
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(); }); }
Je sais que ceci est un ancien post, mais je viens de rencontrer ce problème et de trouver la réponse dans ce fil. J’espère que cela pourra aider quiconque rencontrera cela.
Je n’ai mis aucun script côté client dans le code derrière. Je ne mets que ce code:
Le code ci-dessus doit être à l’intérieur de la section du corps et non de la section de la tête. J’ai essayé de le mettre avant et après le gestionnaire de script, ou à l’intérieur et à l’extérieur de UpdatePanel et je n’ai trouvé aucun problème avec toutes les options. Donc tant que ce code est dans la section body, ça marche pour moi.
Assurez-vous simplement que vous modifiez votre classe datetimepicker définie. Pour le mien est “pick-default-date-picker” dans le fichier js.
Je sais que ce post est vieux – mais placez simplement votre datepicker jquery en dehors du panneau de mise à jour – devrait fonctionner à 100% …