jquery datepicker non funziona su html creato dinamicamente

Question

Sto creando dinamicamente un paio di div con controlli interni. Due di questi controlli dovrebbero essere datepickers. Ma per qualche ragione non vengono mostrati (viene mostrato solo il testo di input) Funziona se creo html statico, ma non quando sto usando uno dinamico.

Questo è il codice che sto usando per generare il codice HTML (posso vedere il 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); 

Poi in un file .js che ho questo (ho controllato e ho incluso il file)

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

Perché il datapicker non viene visualizzato? Grazie! Guillermo.

Answer 1

Quando si scrive

$(document).ready(function() { 
    $(".datepicker").datepicker({...}); 
}); 

Questo frammento è sempre eseguita subito dopo la pagina è stata caricata. Pertanto, i tuoi datepickers dinamici non ci sono ancora. È necessario chiamare $(aSuitableSelector).datepicker(...) su ciascun elemento appena inserito.In primo luogo, utilizzare una var di tenere le opzioni: si

var datePickerOptions = { 
    dateFormat: 'yy/m/d', 
    firstDay: 1, 
    changeMonth: true, 
    changeYear: true, 
    // ... 
} 

Questo permette di scrivere

$(document).ready(function() { 
    $(".datepicker").datepicker(datePickerOptions); 
}); 

e di scrivere

// right after appending dateFrom to the document ... 
$(dateFrom).datepicker(datePickerOptions); 

//... 

// right after appending dateTo ... 
$(dateTo).datepicker(datePickerOptions); 

È inoltre possibile utilizzare la capacità di jQuery per listen to DOM changes per evitare di dover applicare la magia JS agli elementi appena inseriti - ma non penso che ne valga la pena.

Answer 2

Il codice jQuery viene eseguito quando il documento è pronto: ciò significa quando il markup iniziale della pagina è pronto, non dopo che i file javascript sono stati eseguiti.

Suppongo che il codice per inizializzare i datepicker sia eseguito prima dello lo script che crea gli elementi, quindi non accade nulla.

---

provarvi esecuzione di codice jQuery quando la pagina è caricata utilizzando .load() invece di .ready(). L'evento load viene generato quando tutte le risorse (js, image ...) sono state caricate.

$(window).load(function() { 
    $(".datepicker").datepicker({ 
     ... 
    }); 
}); 

---

si potrebbe anche usare semplicemente il modo in cui JavaScript è eseguito. Gli script vengono eseguiti nell'ordine in cui si verificano nella pagina. Così si potrebbe:

• spostare i vostri script subito prima del tag di chiusura corpo `` `
• assicurarsi che il primo script (la creazione di elementi) viene prima del codice datepicker
• rimuovere il .ready() gestore per il selezionatore di date. Quando metti il ​​tuo script alla fine, sono implicitamente in esecuzione quando il DOM è pronto ...

Answer 3

È probabilmente una questione di in quale ordine viene eseguito il javascript. Prova a mettere

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

Dopo il javascript che crea l'html.

Answer 4

Il codice che lega i datepicker è preferibile che venga eseguito subito dopo la creazione dinamica dell'html. Se si desidera mantenere il codice per l'inizializzazione datepicker in un file separato, mi sento di raccomandare il seguente approccio: Dopo aver finito di generare il codice HTML (presumo che viene generato sul documento pronto), utilizzare

$(document).trigger("customHtmlGenerated"); 

E in il file datepicker, invece di utilizzare $(document).ready(function(){...})$(document).bind("customHtmlGenerated", function(){...});

Answer 5

il modo più semplice che ho trovato per risolvere questo problema è quello di utilizzare il plugin livequery:

http://docs.jquery.com/Plugins/livequery

Invece di applicare i datepickers a tutti gli oggetti di una classe specifica, comunicate a LiveQuery di applicarlo a tali oggetti. LiveQuery a sua volta, continua ad applicare il DatePicker, anche quando il DOM viene modificato in seguito.

Non ho riscontrato alcun calo di prestazioni quando si utilizza questo e le modifiche al codice sono davvero minime (è necessario aggiungere il plug-in alla pagina e modificare solo una riga di codice).

si sarebbe utilizzando in questo modo:

$(".datepicker").livequery(
     function(){ 
      // This function is called when a new object is found. 
      $(this).datepicker({ ...}}); 
     }, 
     function() { 
      // This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function. 
     } 
); 

Da allora in poi, ogni volta che si aggiunge un oggetto con la classe DatePicker, il plugin datepicker verrà automaticamente applicato ad esso.

Answer 6

ho messo il

$("#InstallDate").datepicker({ 
    showOn: "button", 
    minDate: 0, // no past dates 
    buttonImage: "../images/Date.png", 
    buttonImageOnly: true, 
    buttonText: "Select date", 
    dateFormat: 'yy-mm-dd', 
}); 

in un file di script DatePicker.js e poi aggiunta la seguente riga alla fine della mia forma Ajax HTML generato

<script type='text/javascript' src='/inc/DatePicker.js'></script> 

Answer 7

$(".datepicker").datepicker({inline: true,dateFormat: "dd-mm-yy"}); 

Answer 8

Si prega di aggiungere il codice qui sotto dopo aver aggiunto l'elemento.

$ ("datepicker") datepicker ({ dateFormat:. 'Aa/m/g', FirstDay: 1, changeMonth: vero, changeYear: vero, showOn: 'sia', AutoSize : true, pulsante Testo: "Seleziona data", pulsante Immagine: '../Content/images/calendar.png', buttonImageOnly: true });