jquery datepicker no funciona en html creado dinámicamente

Question

Estoy creando dinámicamente un par de div con controles internos. Dos de esos controles deberían ser datapickers. Pero por alguna razón no se muestran (solo se muestran texto de entrada) Funciona si creo html estático, pero no cuando estoy usando uno dinámico.

Este es el código que estoy utilizando para generar el HTML (Puedo ver el 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); 

Luego, en un archivo .js He esto (he comprobado y estoy incluyendo el archivo)

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

¿Por qué the datepicker no se está mostrando? Gracias! Guillermo.

Answer 1

Cuando se escribe

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

Este fragmento se está ejecutado inmediatamente después de la página se ha cargado. Por lo tanto, sus datapickers dinámicos todavía no están allí. Debe llamar al $(aSuitableSelector).datepicker(...) en cada elemento recién insertado.En primer lugar, utilizar un var a cabo sus opciones:

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

Esto le permite escribir

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

y escribir

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

//... 

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

También puede utilizar la capacidad de jQuery para listen to DOM changes para evitar tener para aplicar magia JS a los elementos recién insertados, pero no creo que valga la pena.

Answer 2

El código jQuery se ejecuta cuando el documento está listo: esto significa que el marcado inicial de la página está listo, no después de que se ejecutaron los archivos javascript.

Supongo que su código para inicializar los datapickers ejecuta antes de, su secuencia de comandos crea los elementos, por lo que no sucede nada.

---

Pruebas a la ejecución de código jQuery cuando la página se ha cargado usando .load() en lugar de ready(). El evento de carga se activa cuando se han cargado todos los activos (js, imagen ...).

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

---

Usted podría también utilizar simplemente la forma en javascript se ejecuta. Los scripts se ejecutan en el orden en que ocurren en la página. Por lo que pude:

• mover sus guiones justo antes de la etiqueta de cierre del cuerpo `` `
• asegurarse de que su primer guión (la creación de los elementos) viene antes del código de selector de fecha
• quitar el ready() manejador para el selector de fecha. Cuando coloca el script al final, se ejecutan implícitamente cuando el DOM está listo ...

Answer 3

Es probablemente una cuestión de en qué orden se activa el javascript. Intente poner

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

Después de su javascript que crea el html.

Answer 4

El código que vincula los marcadores de fecha es mejor ejecutarlo justo después de que se haya creado dinamicamente su html. Si desea mantener el código de inicialización selector de fechas en un archivo aparte, recomiendo el siguiente enfoque: Después de terminar de generar su html (supongo que se genera en el documento listo), utilice

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

Y en el archivo selector de fechas, en lugar de utilizar $(document).ready(function(){...})$(document).bind("customHtmlGenerated", function(){...});

Answer 5

la manera más fácil que he encontrado para solucionar este problema es mediante el uso el plugin livequery:

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

En lugar de aplicar los selectores de fecha a todos los objetos de una clase específica, le indica a LiveQuery que los aplique a esos objetos. LiveQuery a su vez sigue aplicando el marcador de fecha, incluso cuando su DOM se modifique más adelante.

No he visto ninguna caída en el rendimiento al usar esto, y los cambios de código son realmente mínimos (es necesario agregar el complemento a la página y solo cambiar una línea de código).

Usted estaría utilizando de este 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. 
     } 
); 

A partir de entonces, cada vez que se agrega un objeto con la clase selector de fechas, el plugin selector de fechas se aplicará automáticamente a la misma.

Answer 6

pongo el

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

en un archivo de secuencia de comandos DatePicker.js y luego se añade la siguiente línea al final de mi forma Ajax HTML generado

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

Answer 7

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

Answer 8

Por favor, añadir a continuación el código después de agregar el elemento.

$ ("datepicker") datepicker ({ dateFormat:. 'Yy/m/d', FirstDay: 1, changeMonth: true, changeYear: true, showOn: 'ambos', tamaño automático : true, buttonText: "Seleccionar fecha", buttonImage: '../Content/images/calendar.png', buttonImageOnly: true });