[SOLUCIONADO] Datapicker UI cargado dinamicamente

[braian125]

Buenas Tardes,

No acostumbro crear nuevos temas, sino basarme en las inquietudes que ya han sido resueltas. me disculpan pero ya busque demasiado y me rompi el coco tratando de resolverlo por mi mismo.

Quiero crear dinamicamente unas fechas a medida que el usuario lo va necesitando de la siguiente manera con:


(jquery)

$("[name*=fecha_salida]").live('focus', function(){
$(this).datepicker({ dateFormat: 'yy-mm-dd' });
});


$("#agregar").click( function(){

$("#tabla").append("<tr><td><input type='text' name='fecha_salida' class='selector' id='fecha_salida-10' size='7'></td></tr>");

});

(html)

<table id="tabla">
<tr>
<td><input type='text' name='fecha_salida' class='selector' id='fecha_salida- 10' size='7'></td>
<td><a href="#" id="agregar"><img src="iconos/add.png" title="Agregar Segmento"></a></td>
</tr>
</table>

cabe anotar que el DATAPICKER es de jquery UI, asi que voy a omitir las librerias necesarias para que cargue, ahora; el inconveniente q tengo es cuando voy a seleccionar las fechas de los elementos que cargo dinamicamente me modifica siempre el primer elemento, asi lo maneje con un contador para controlar el id de cada elemento cargado tampoco me funciona.

les agradezo su cordial ayuda!

Saludos

[jonni09lo]

Sería bueno que dijeras que versión de jQuery usas, ya que live está deprecado en las versiones más nuevas de jQuery. Así que debes de usar on y esta esta disponible unicamente a partir de jQuery 1.7+

Para esas versiones puedes hacer esto:

Código Javascript:

$(document).on("focus", "[name*=fecha_salida]", function(){ 
    $(this).datepicker({ dateFormat: 'yy-mm-dd' }); 
});
 

Y te debería de funcionar

Saludis

[braian125]

Iniciado por jonni09lo

Sería bueno que dijeras que versión de jQuery usas, ya que live está deprecado en las versiones más nuevas de jQuery. Así que debes de usar on y esta esta disponible unicamente a partir de jQuery 1.7+

Para esas versiones puedes hacer esto:

Código Javascript:

$(document).on("focus", "[name*=fecha_salida]", function(){ 
    $(this).datepicker({ dateFormat: 'yy-mm-dd' }); 
});
 

Y te debería de funcionar

Saludis

Gracias por la agilidad:

esta es la referencia a jquery que uso:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


ya intente hacerlo tal y como me lo indicas y me sigue funcionando igual que con .live(), en cualquiera de los campos creados me muestra el calendario perfectamente, pero al seleccionar una fecha me modifica el value del primer elemento original de la pagina.

gracias

[braian125]

Ya lo solucione!! Muchas Gracias,


Solo me faltaba era controlar los id, con un contador y utilizar la instruccion que me diste (jonni09lo).


Muchas Gracias!! aqui pongo el codigo como quedo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<scritp>

$(document).on("focus", "[name*=fecha_salida]", function(){
//selector = $(this).attr("class").split("-")[1];
$(this).datepicker({ dateFormat: 'yy-mm-dd' });
});


$.fn.AgregarCampo = function (contador)
{

$("#rutas").append("<tr id='"+contador+"'><td><select id='origen-"+contador+"' class='select_style'><option value=''>"+contador+"</option></select></td><td><select id='destino-"+contador+"' class='select_style'><option value=''>Seleccione...</option></select></td><td><input type='text' name='fecha_salida-"+contador+"[]' class='selector-"+contador+"' id='fecha_salida-"+contador+"' size='7'><span id='fecha_salida_mm'></span><input type='text' name='fecha_salida_hh[]' id='fecha_salida_hh-2' size='1'><span id='fecha_salida_hh'></span><input type='text' name='fecha_salida_mm[]' id='fecha_salida_mm-2' size='1'><span id='fecha_salida_mm'></span></td><td><select name='vuelo[]' id='vuelo-"+contador+"' class='select_style'><option>Seleccione...</option></select></td><td><select name='clase[]' id='clase-"+contador+"' class='select_style' style='width:75px;'><option value=''>Seleccione...</option></select></td><td><img src='../../iconos/cross.png' id='eliminarCampo-"+contador+"'></td><td><span='error_"+contador+"' class='hide'></span></td></tr>");

$.each([ "A","B","C","D","E","F","G","H","I","J","K","L","M ","N","O","P","Q","R","S","T","U","V","X","Y", "Z" ], function( index, value ) {
$("#clase-"+contador).append("<option value='"+value+"'>"+value+"</option>");
});

}


$("#agregar").click( function(){
contador = $("#contador").val();
contador++;
$(this).AgregarCampo(contador);
$("#contador").val(contador);
$(this).LlenarCombo('origen-'+contador);
});

</script>
<table>
<tr>
<td>
<input type="text" name="fecha_salida-1[]" class="selector-1" id="fecha_salida-1" size="7"><span id="fecha_salida"></span>
<input type="text" name="fecha_salida_hh[]" id="fecha_salida_hh-2" size="1"><span id="fecha_salida_hh"></span>
<input type="text" name="fecha_salida_mm[]" id="fecha_salida_mm-2" size="1"><span id="fecha_salida_mm"></span>
</td>
</tr>
</table>


Lo siento por omitir muchas de las etiquetas y algunas funciones, pero esta es la idea ya resuelta!


Gracias!!