Estoy tratando de crear una tabla dinámica con cada fila contiene dos campos de fecha. Estoy usando Jquery datepicker. Por alguna razón, sólo la primera fila se muestra en el selector de fecha de calendario. Otros crean de forma dinámica, los campos no se muestran en el calendario. Debo mencionar que la primera fila está por defecto en su lugar cuando este se cargue la página. Sólo a partir de la segunda línea es creado dinámicamente. Todas las soluciones decir que debo reiniciar .datepicker(). Yo lo hice y no funciona. He intentado cambiando los nombres e Identificadores todavía no hay solución. Hay algo que me estoy perdiendo aquí. A continuación se muestra el código utilizado para este propósito.

Sí sé que hay varias preguntas relacionadas a este aquí en este sitio. Pero de alguna forma no podía encontrar una solución a esto, ya que no trabajan para mí.

Javascript:

$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
        actNm = nameTemp.substring(nameTemp.indexOf("."));
  $(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
    }
    });
$('.datepicker').each(function(i) {
            this.id = 'datepicker' + i;
    }).datepicker();                
});

Html:

<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value=""  name="breachList[0].deactivationDt">
<input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
<input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
<input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
<img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
<input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
<td colspan="5" ><a href="javascript:void(0);" id="addurl">+ Add another row</a>
<input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>
  • ¿Tiene usted un poco de CSS que pueden estar afectando la estructura?
  • Yo no lo creo Brian. Actualmente estoy usando «jquery-ui-personalizado.css» para el selector de fecha y ningún otro css utilizado en la página es primordial ellos.A continuación, de nuevo el selector de fecha se está trabajando para la primera fila y en otros lugares donde las he utilizado por separado. Sus parece ser un problema al inicializar el datepicker de forma dinámica. yo.e llamando .datepicker() . No parece inicializar.
InformationsquelleAutor Har | 2012-11-14

2 Comentarios

  1. 6

    No es necesario asignar identificadores únicos para cada campo. Selector de fecha se puede identificar de manera única. Trate de poner código siguiente en el js.

    $('.datepicker').each(function(){
    $(this).datepicker();
    });

    Lo he utilizado para múltiples campos.

    *Actualización*

    He leído tu código js y en mal estado. Todo lo que quiero hacer es (de lo que haya dicho) es cuando el usuario hace clic en Añadir Otro Enlace , desea agregar una nueva fila en la tabla y queremos que ellos sean capaces de trabajar con jQuery datepicker. A la derecha?

    La razón de código anterior no funciona es, en este caso, los campos de texto que se añaden de forma dinámica . Mientras datepciker se inicializa en onDocumentReady. Así datepicker no puede unirse a estos recién creado campos de formulario. Una solución es colocar selector de fecha, mientras que la creación de nuevos campos de sí mismo.

    He aquí un modelo de trabajo que he preparado para lo que quieres lograr. Ver demo en http://jsfiddle.net/phazorrise/bRE6q/

    • Lo he probado . no es trabajo … ¿hay algún agujero del lazo int código distinto.
    • He actualizado mi respuesta y dado una demostración demasiado. A ver si te ayuda.
    • Debo decir genial y gracias por la línea de $(this).removeClass('hasDatepicker').datepicker(); . No puedo aceptar que mi JS está en mal estado de uno :). Es el tipo de necessasity que requiere lo que llamamos como desorden. He utilizado la misma JS y que la línea que he mencionado. Funciona como un encanto. También debo mencionar es que este datepicker también necesita un id diferente en algunos escenarios como el que tengo. Si el identificador no son la misma, entonces la fecha es donde he seleccionado se carga sólo en un campo de entrada no en el elemento apropiado. Gracias de nuevo por todo tu tiempo. De Nuevo… Brillante.Le voy a dar una garrapata.
    • Selector de fecha plugin asignar automáticamente unqiue ids. Si usted inspeccionar los campos de texto encontrarás identificadores únicos ya están establecidos mediante el uso de la marca de tiempo.
    • hmm sí he visto eso, pero en mi caso yo soy de la clonación el html que tenía la marca de identificación de datepicjker elemento. Así que todas las filas tienen el mismo id. No? Y que fue lo que está pasando..
  2. 1

    aquí está mi código actualizado

    Javascript
    Modificado en la parte inferior de la anterior javascript

    var nameTemp, actNm;
    $('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
    actNm = nameTemp.substring(nameTemp.indexOf("."));
    $(this).attr("name","breachList["+countNew+"]"+actNm);
    $(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added 
    }
    });
    $('.datepicker').each(function(i) {
    $(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
    });

Dejar respuesta

Please enter your comment!
Please enter your name here