elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Solucionado] Jquery visualizar un calendario en un input clonado
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Solucionado] Jquery visualizar un calendario en un input clonado  (Leído 5,184 veces)
Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
[Solucionado] Jquery visualizar un calendario en un input clonado
« en: 1 Diciembre 2014, 17:34 pm »

- Buenas a todos espero puedan ayudarme ya tengo un par de varias horas con esto y nada que encuentro la solucion, veran a raiz de que el atributo Date de html5 no me sirve en Mozilla Firefox busque otra alternativa en Google y me encontre con el Calendario Datepicker lo probe por separado de mi proyecto y de una vez me funciono lo cambie a español y todo fino todo bello, bien lo quise integrar a mi proyecto y hasta cierto punto pense que estaba bien hasta que me di cuenta que si añadia otro campo en mi documento el calendario en el segundo elemento clonado no funciona, para ser mas claro yo tengo el siguiente formulario.

Código
  1. <form method="post" name="up_form" class="formulario">
  2. <input type="hidden" name="insertar">
  3.  <table id="up_form"><br>
  4.   <thead>
  5.            <tr>
  6.                <th>Clasificación</th>
  7.                <th>Descripción Documento</th>
  8.                <th>Fecha del Documento</th>
  9.                <th>Fecha de Expiración</th>
  10.                <th>Adjuntar Archivo</th>
  11.            </tr>        
  12.        </thead>
  13.        <tbody>
  14.           <tr class="lire">
  15. <td>
  16. <select id="taxonomia" name="cod_clasificacion">
  17. <option value="">SELECCIONE UNA OPCION VALIDA</option>
  18. <option value="0">EXPEDIENTE MEDICO</option>
  19. <option value="1">EXPEDIENTE LABORAL</option>
  20. <option value="2">EXPEDIENTE SEGURIDAD INDUSTRIAL</option>
  21. </select>
  22. </td>
  23. <td>
  24. <textarea id="describe" name="descripcion" required /></textarea>
  25. </td>
  26. <td>
  27. <input type="text" class="datepicke" name="fecha_doc" required />
  28. </td>
  29. <td>
  30. <input type="text" class="datepicker" name="fecha_exp" required />
  31. </td>
  32. <td>
  33. <div class='input-file'>
  34.          <input type="file" name="archivo[]">
  35.          <input type="hidden" name="codigo" value="<?php echo $fila["cod_emp"]; ?>">
  36.           Seleccionar archivo
  37.          <div class="files">...</div>
  38.          </div>
  39. </td>
  40. </tr>
  41. </tbody>
  42.  </table>
  43. <td>
  44. <a href="#" id="btn-up" class="anex-up"> Anexar Otro Archivo </a>
  45. <input id="btn-up" class="sub" type="submit" value="Cargar Documentos">
  46. </td><br><br>
  47. </form>


- Eso me da la siguiente interfaz.


- Si hago un click en cualquier de los dos input de Fecha del Documento y Fecha de Expiracion me sale el siguiente calendario.

.

- Ahora bien si yo hago un click en Añadir otro Archivo la fila de arriba se clona y se anexa de bajo, hice 2 click por lo tanto obtuve lo siguiente.

.

- Ok ahora el problema si yo doy click en los inputs CLONADOS de Fecha del Documento y Fecha de Expiracion no "Hace nada" no se muestran los calendario.

- Con este codigo hago la clonacion de filas.
Código
  1. $(document).ready(function() {
  2.    $(document).on('change', 'input:file', function(){  // NUEVA LINEA
  3.       if($(this).val())
  4.       {
  5.         // Si tiene valor, se muestra en el class .files
  6.         $(this).parent().find(".files").html($(this).val().replace("C:\\fakepath\\", ""));
  7.        }else{
  8.         // Si no tiene valor, se muestran los puntos ...
  9.         $(this).parent().find(".files").html("...");
  10.        }
  11.    });
  12.  
  13.  
  14. $(document).on("click",".anex-up",function() {
  15.   $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
  16.    // (Se selecciona la ultima fila agregada, y se modifica el valor html del elemento con la clase 'files')
  17.    $("#up_form tbody tr:eq(-1)").find(".files").html("..."); // NUEVA LINEA
  18.  
  19. });
  20.  
  21. $(document).on("click",".eliminar",function(){
  22.    var parent = $(this).parents().get(0);
  23.    $(parent).remove();
  24. });
  25. });



- Y para usar el Datepicker uso lo siguiente, tal cual como vi en su documentacion esto lo tengo en el html donde tengo el formulario.
Código
  1. <script src="script/jquery-2.1.1.min.js"></script>
  2. <script src="script/jquery-ui.js"></script>
  3.      <script>
  4.  $(document).ready(function() {
  5.    $( ".datepicker" ).datepicker();
  6.    $( ".datepicke" ).datepicker();
  7.  });
  8.    </script>
  9.  

- Alguna idea? espero puedan ayudarme un Saludo.


« Última modificación: 7 Diciembre 2014, 19:15 pm por #!drvy » En línea

Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: Jquery visualizar un calendario en un input clonado
« Respuesta #1 en: 3 Diciembre 2014, 19:28 pm »

- Buenas aun no he podido resolver este problema. Sin embargo en intentado unas cosas con los siguientes resultados.

-Aplicar el widget datepicker al elemnto que clono para que dicho clon también tenga el comportamiento deseado, lo inserte en este fragmento del codigo.


 
Código
  1. $(document).on("click",".anex-up",function() {
  2.       $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
  3.  
  4.        $("#up_form tbody tr:eq(-1)").find(".files").html("...");
  5.        $("#up_form tbody tr:eq(-1)").find(".datepicker").datepicker(); // NUEVA LINEA
  6. $("#up_form tbody tr:eq(-1)").find(".datepicke").datepicker(); // NUEVA LINEA  
  7.  
  8.    });


- Y la verdad no entiendo porque no funciono entonces sin darme cuenta elimine esto.


Código
  1. <script>
  2.          $(document).ready(function() {
  3.            $( ".datepicker" ).datepicker();
  4.            $( ".datepicke" ).datepicker();
  5.          });
  6.      </script>
  7.  

- Aclaro El primer codigo que coloque aun no lo habia eliminado y cuando fui al programa todos los clones que enexe desplegaban el calendario sin embargo los input Originales no hacian nada.




-Agregue denuevo.

Código
  1. <script>
  2.          $(document).ready(function() {
  3.            $( ".datepicker" ).datepicker();
  4.            $( ".datepicke" ).datepicker();
  5.          });
  6.      </script>


- Y los inputs Originales despliegan el calendario y los Clonados ahora no hacen absolutamente nada. Y no se que tan mal hice lo siguiente pero intente hacer una condicion de la siguiente manera Sin ningun resultado...


  
Código
  1.   $(document).ready(function() {
  2.   if($("#up_form tbody tr:eq(-1)").find(".datepicker")){
  3.   $("#up_form tbody tr:eq(-1)").find(".datepicker").datepicker(); // NUEVA LINEA
  4.     $("#up_form tbody tr:eq(-1)").find(".datepicke").datepicker(); // NUEVA LINEA  
  5.   }else {
  6.    $(".datepicker").datepicker();
  7.    $(".datepicke").datepicker();
  8. }
  9.  });


- Seguire intentando de momento espero puedan ayudarme, Saludos.

PD: Intente hacer tambien unas cosas con el Evento LIVE que lei unas cosas sobre el y tampoco puede solucionar y trate de hacer tambien los BIND sobre elementos Existentes y nada :/ .


« Última modificación: 7 Diciembre 2014, 19:02 pm por #!drvy » En línea

JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Jquery visualizar un calendario en un input clonado
« Respuesta #2 en: 5 Diciembre 2014, 01:39 am »

Hay que estar seguros como funciona javascript. Ten en cuenta que cuando se carga el DOM de tu doc HTML ($(document).ready(function(){})) sólo tienes agregado el primer par de inputs y es ahí, dónde, el plugin carga los calendarios sólo en éstos mismos (todos los input que tengan la clase CSS que especificas).

Entonces, yo te recomendaría lanzar el plugin a dichas clases CSS cuando ya tengas dibujado todos los par de inputs que necesitas aplicar el efecto. O en su defecto, tal cómo lo hiciste, que es cada vez que crees unos nuevos.
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Jquery visualizar un calendario en un input clonado
« Respuesta #3 en: 5 Diciembre 2014, 11:43 am »

JQueryUI Datepicker dinamico.

https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui

http://jsfiddle.net/SJ7bJ/98/

Nos cuentas luego ;).
En línea

Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: Jquery visualizar un calendario en un input clonado
« Respuesta #4 en: 5 Diciembre 2014, 14:48 pm »

- Buenas JorgeEMX, Gracias por responder la verdad es que soy novato en esto y si he leido mucho sobre el tema y ya he visto ese tipo de sugerencias que me has dado.

Hay que estar seguros como funciona javascript. Ten en cuenta que cuando se carga el DOM de tu doc HTML ($(document).ready(function(){})) sólo tienes agregado el primer par de inputs

- Pero igual a veces por mi falta de experiencia no encuentro la forma de aplicar el plugin u otras cosas que hago cuando los elementos ya existan por completo en el DOM.

- EFEX, compañero tu respuesta me ha sido de mucha ayuda de verdad me solvento el problema, sin embargo en primera instancia cuando intente tuve varios problemas dado que no me funciono, pero insisti un par de veces guiandome del ejemplo que has aportado y a la final creo yo que el problema del porque tu ejemplo no me funcionaba en mi proyecto era la Version de Jquery-UI que yo estaba usando, la volvi a descargar y de la pag oficial y solo el Widget Datepicker sin mas nada reemplaze  la anterior que tenia probe y listo, Muchas gracias a la final quedo asi.

Código
  1. <form method="post" name="up_form" class="formulario">
  2. <input type="hidden" name="insertar">
  3.  <table id="up_form"><br>
  4.   <thead>
  5.            <tr>
  6.                <th>Clasificación</th>
  7.                <th>Descripción Documento</th>
  8.                <th>Fecha del Documento</th>
  9.                <th>Fecha de Expiración</th>
  10.                <th>Adjuntar Archivo</th>
  11.            </tr>        
  12.        </thead>
  13.        <tbody>
  14.           <tr class="lire">
  15. <td>
  16. <select id="taxonomia" name="cod_clasificacion">
  17. <option value="">SELECCIONE UNA OPCION VALIDA</option>
  18. <option value="0">EXPEDIENTE MEDICO</option>
  19. <option value="1">EXPEDIENTE LABORAL</option>
  20. <option value="2">EXPEDIENTE SEGURIDAD INDUSTRIAL</option>
  21. </select>
  22. </td>
  23. <td>
  24. <textarea id="describe" name="descripcion" required /></textarea>
  25. </td>
  26. <td>
  27. <input type="text" class="datepicke" name="fecha_doc" required />
  28. </td>
  29. <td>
  30. <input type="text" class="datepicker" name="fecha_exp" required />
  31. </td>
  32. <td>
  33. <div class='input-file'>
  34.          <input type="file" name="archivo[]">
  35.          <input type="hidden" name="codigo" value="<?php echo $fila["cod_emp"]; ?>">
  36.           Seleccionar archivo
  37.          <div class="files">...</div>
  38.          </div>
  39. </td>
  40. </tr>
  41. </tbody>
  42.  </table>
  43. <td>
  44. <a href="#" id="btn-up" class="anex-up"> Anexar Otro Archivo </a>
  45. <input id="btn-up" class="sub" type="submit" value="Cargar Documentos">
  46. </td><br><br>
  47. </form>
  48.  
  49. <script src="script/jquery-2.1.1.min.js"></script>
  50. <script src="script/ext/external/jquery/jquery.js"></script>
  51. <script src="script/jquery-ui.js"></script>
  52.  

Código
  1. $(document).on("click",".anex-up",function() {
  2.   $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
  3.    // (Se selecciona la ultima fila agregada, y se modifica el valor html del elemento con la clase 'files')
  4.  
  5.    $("#up_form tbody tr:eq(-1)").find(".files").html("...");
  6.  
  7. });
  8.  
  9. $(document).on("click",".eliminar",function(){
  10.    var parent = $(this).parents().get(0);
  11.    $(parent).remove();
  12. });
  13.  
  14. $('body').on('focus',".datepicker", function(){
  15.    $(this).datepicker();
  16. });
  17.  
  18.  
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
jquery cargar texto en input y intro
Desarrollo Web
OssoH 2 7,866 Último mensaje 28 Septiembre 2010, 15:33 pm
por OssoH
Deshabilitar dias Datepicker JQuery UI (calendario)
Desarrollo Web
painkillerpucela 0 4,923 Último mensaje 8 Agosto 2012, 13:49 pm
por painkillerpucela
Clonar el value de un input con Jquery
Desarrollo Web
.:Weeds:. 0 1,825 Último mensaje 21 Agosto 2012, 08:43 am
por .:Weeds:.
Calendario en PHP (SOLUCIONADO)
PHP
Maistere 4 1,532 Último mensaje 5 Diciembre 2013, 14:58 pm
por Maistere
[LIBRERIA] Jquery para dar formato de miles a un input box
Desarrollo Web
Graphixx 0 3,594 Último mensaje 17 Mayo 2014, 00:19 am
por Graphixx
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines