Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Datapicker UI cargado dinamicamente

Estas en el tema de Datapicker UI cargado dinamicamente en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/01/2014, 16:30
 
Fecha de Ingreso: mayo-2011
Ubicación: Medellin
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Exclamación Datapicker UI cargado dinamicamente

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
  #2 (permalink)  
Antiguo 24/01/2014, 17:08
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 3 meses
Puntos: 396
Respuesta: Datapicker UI cargado dinamicamente

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:
Ver original
  1. $(document).on("focus", "[name*=fecha_salida]", function(){
  2.     $(this).datepicker({ dateFormat: 'yy-mm-dd' });
  3. });
Y te debería de funcionar

Saludis
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #3 (permalink)  
Antiguo 24/01/2014, 17:24
 
Fecha de Ingreso: mayo-2011
Ubicación: Medellin
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Pregunta Respuesta: Datapicker UI cargado dinamicamente

Cita:
Iniciado por jonni09lo Ver Mensaje
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:
Ver original
  1. $(document).on("focus", "[name*=fecha_salida]", function(){
  2.     $(this).datepicker({ dateFormat: 'yy-mm-dd' });
  3. });
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
  #4 (permalink)  
Antiguo 24/01/2014, 17:33
 
Fecha de Ingreso: mayo-2011
Ubicación: Medellin
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Datapicker UI cargado dinamicamente

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!!

Etiquetas: datapicker, dinamicos, elementos, jquery-ui
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:42.