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.jquery datepicker non funziona su html creato dinamicamente
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.
Il diavolo è nei dettagli! Funziona usando l'elemento creato come selettore (come si mostra) invece di $ ("# id "), Assegnerò bounty appena possibile, –
in realtà, funzionerebbe anche con' $ (". Datepicker") '... è il posizionamento, non il selettore che sta facendo la magia. Tuttavia, usando l'elemento in quanto il selettore evita di applicare nuovamente datepicker ad altri datepicker perfettamente validi – tucuxi
Grazie per la risposta, molto utile! Tuttavia, puoi modificare ".datePicker" in ".datepicker" nel tuo ultimo paragrafo? Non c'è maiuscola p (" P ") nel nome della funzione Sembra un evidente errore di sintassi ma ci sono voluti un paio di minuti per capire cosa fosse" TypeError: $ (...) datePicker non è una funzione "era circa .. – user2154283