jquery datepicker ne fonctionne pas sur html créé dynamiquement
Je crée dynamiquement un couple de div à l'intérieur des contrôles. Deux de ces contrôles doivent être datepickers. Mais pour une raison quelconque, ils ne sont pas visibles (seule l'entrée de texte sont affichées)
Il fonctionne si j'ai créer la page html statique, mais pas quand je suis à l'aide de dynamique.
C'est le code que j'utilise pour générer le code HTML (je peux voir la div)
var ShowContainerDiv = document.createElement('DIV');
var btnShowDiv = document.createElement('DIV');
btnShowDiv.id = 'btnShowDiv ';
btnShowDiv.title = 'Change';
btnShowDiv.index = 120;
var lblShow = document.createElement('label')
lblShow.htmlFor = "btnShowDiv";
lblShow.appendChild(document.createTextNode('Show'));
btnShowDiv.appendChild(lblShow );
btnShowDiv.onclick = function () {
dropdown.style.visibility = "visible";
};
var dropdown = document.createElement('DIV');
dropdown.style.backgroundColor = 'white';
dropdown.style.borderStyle = 'solid';
dropdown.style.borderWidth = '2px';
dropdown.style.cursor = 'pointer';
dropdown.style.textAlign = 'left';
dropdown.style.width = '150px';
var chkRed = document.createElement("input");
chkRed.type = "checkbox";
chkRed.id = "chkRed";
chkRed.value = "Red";
chkRed.checked = false;
var lblRed = document.createElement('label')
lblRed.htmlFor = "chkRed";
lblRed.style.color = "#F00";
lblRed.appendChild(document.createTextNode('Red'));
var chkYellow = document.createElement("input");
chkYellow.type = "checkbox";
chkYellow.id = "chkYellow";
chkYellow.value = "Yellow";
chkYellow.checked = false;
var lblYellow = document.createElement('label')
lblYellow.htmlFor = "chkYellow";
lblYellow.style.color = "#FF0";
lblYellow.appendChild(document.createTextNode('Yellow'));
var chkGreen = document.createElement("input");
chkGreen.type = "checkbox";
chkGreen.id = "chkGreen";
chkGreen.value = "Green";
chkGreen.checked = false;
var lblGreen = document.createElement('label')
lblGreen.htmlFor = "chkGreen";
lblGreen.style.color = "#0F0";
lblGreen.appendChild(document.createTextNode('Green'));
var dateFrom = document.createElement("input");
dateFrom.id = "txtDateFrom";
dateFrom.type = "text";
dateFrom.className = "datepicker";
dateFrom.style.width = "70px";
dateFrom.readonly = "readonly";
var lblDateFrom = document.createElement('label')
lblDateFrom.htmlFor = "txtDateFrom";
lblDateFrom.appendChild(document.createTextNode('From'));
var dateTo = document.createElement("input");
dateTo.id = "txtDateTo";
dateTo.type = "text";
dateTo.className = "datepicker";
dateTo.style.width = "70px";
dateTo.readonly = "readonly";
var lblDateTo = document.createElement('label')
lblDateTo.htmlFor = "txtDateTo";
lblDateTo.appendChild(document.createTextNode('To'));
var btnDone = document.createElement("input");
btnDone.type = "button";
btnDone.name = "btnDone";
btnDone.value = "Done";
btnDone.onclick = function () {
dropdown.style.visibility = "hidden";
};
dropdown.appendChild(chkRed);
dropdown.appendChild(lblRed);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkYellow);
dropdown.appendChild(lblYellow);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkGreen);
dropdown.appendChild(lblGreen);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateFrom);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateTo);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(btnDone);
ShowContainerDiv.appendChild(btnShowDiv);
ShowContainerDiv.appendChild(dropdown);
g.event.addDomListener(btnShowDiv, 'click', function () {
dropdown.visible = true;
dropdown.style.visibility = "visible";
});
g.event.addDomListener(btnDone, 'click', function () {
dropdown.visible = false;
dropdown.style.visibility = "hidden";
});
map.controls[g.ControlPosition.TOP_RIGHT].push(ShowContainerDiv);
Puis dans une .fichier js, j'ai ceci (j'ai vérifié et je suis y compris le fichier)
$(document).ready(function () {
$(".datepicker").datepicker({
dateFormat: 'yy/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
showOn: 'both',
autosize: true,
buttonText: "Select date",
buttonImage: '../Content/images/calendar.png',
buttonImageOnly: true
});
});
Pourquoi le datepicker ne s'affiche pas?
Merci! Guillermo.
source d'informationauteur polonskyg
Vous devez vous connecter pour publier un commentaire.
Lorsque vous écrivez
Ce fragment est d'obtenir exécutée juste après la page est chargée. Par conséquent, votre dynamique datepickers ne sont pas encore là. Vous devez appeler
$(aSuitableSelector).datepicker(...)
sur chaque nouveau élément inséré. Tout d'abord, utilisez un var pour tenir vos options:Cela permet d'écrire
et à écrire
Vous pouvez également utiliser du JQuery capacité à écouter DOM changements pour éviter d'avoir à appliquer JS magie nouvellement inséré des éléments, mais je ne pense pas que cela en vaut la peine.
La façon la plus simple que j'ai trouvé pour résoudre ce problème est l'utilisation de la livequery plugin:
http://docs.jquery.com/Plugins/livequery
Au lieu de l'application de la datepickers à tous les objets d'une classe spécifique, vous dites LiveQuery à s'appliquer à ces objets. LiveQuery à son tour continuer d'appliquer une le datepicker, même lorsque votre DOM est modifié par la suite.
Je n'ai pas vu les performances chutent lorsque usnig cela, et les modifications de code sont vraiment minimes (il faut ajouter le plugin à la page et seulement changer une ligne de code).
Vous serait de l'utiliser comme ceci:
À partir de là, chaque fois que vous ajoutez un objet avec le datepicker de classe, le datepicker plugin sera automatiquement appliqué.
Le code qui lient le datepickers est préférable d'être exécuté immédiatement après votre code html est dinamically créé. Si vous voulez garder le code pour datepicker d'initialisation dans un fichier séparé, je vous recommande l'approche suivante:
Après l'arrivée de la génération de votre code html (je présume que c'est généré sur le document de prêt), l'utilisation
Et dans le datepicker de fichier, au lieu de
$(document).ready(function(){...})
utilisation$(document).bind("customHtmlGenerated", function(){...});
J'ai mis le
dans un fichier de script DatePicker.js et puis ajouté la ligne suivante à la fin de mon généré Ajax formulaire Html
Veuillez ajouter le code ci-dessous après l'ajout de l'élément.
$(".datepicker").datepicker({
dateFormat: 'aa/m/d',
firstDay: 1,
changeMonth: true,
changeYear: true,
showOn: 'deux',
autosize: true,
buttonText: "Sélectionnez date",
buttonImage: '../Content/images/agenda.png',
buttonImageOnly: vrai
});
La façon la plus simple que j'ai trouvée pour ajouter datepicker pour ajouter dynamiquement plusieurs champs de saisie:
Le jQuery, le code est exécuté lorsque le document est prêt: cela signifie que lors de la première majoration de votre page est prête, pas après vos fichiers javascript couru.
Je suppose que votre code d'initialisation de la datepickers s'exécute avant votre script qui crée les éléments ne, rien ne se passe.
Essayez d'exécuter la vous code jquery que lorsque la page est chargée à l'aide de .charger() au lieu de .ready(). La charge de l'événement est déclenché lorsque l'ensemble des actifs (js, images...) ont chargé.
Vous pouvez aussi tout simplement utiliser le chemin du javascript est exécuté. Les Scripts sont exécutés dans l'ordre qu'ils se produisent dans la page. Donc, vous pourriez:
C'est probablement une question de l'ordre dans lequel le javascript est déclenché. Essayez de mettre
Après votre javascript qui crée le code html.