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

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Jquery Buscar y Mostrar Elemento
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Jquery Buscar y Mostrar Elemento  (Leído 2,670 veces)
Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Jquery Buscar y Mostrar Elemento
« en: 24 Noviembre 2014, 23:01 pm »

- Buenas a todos disculpe si el asunto no es el adecuado pero la verdad no sabia como describir mi duda en el asunto.

- Espero puedan ayudarme, mi problema es el siguiente cuento con el siguiente html

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Document</title>
  5. <link rel="stylesheet" href="css/style.css">
  6. <script src="script/jquery-2.1.1.min.js"></script>
  7. <script src="script/ajax.js"></script>
  8.  
  9. form {
  10. background: white;
  11. box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
  12. height: auto;
  13. margin-top: 35px;
  14. width: 1336px;
  15. }
  16. td {
  17. border-bottom: solid 1px #DC272A;
  18. }
  19. #eliminar {
  20. background: #DC272A;
  21. border-radius: 4px;
  22. cursor: pointer;
  23. color: white;
  24. height: 25px;
  25. text-align: center;
  26. width: 25px;
  27. }
  28.  
  29. </head>
  30.  <center>
  31. <form method="post" name="up_form" action="procesar.php">
  32.  <table id="up_form"><br>
  33.   <thead>
  34.    <h3>
  35.            <tr>
  36.                <th>Nombre Documento</th>
  37.                <th>Clasificación</th>
  38.                <th>Descripción Documento</th>
  39.                <th>Adjuntar Archivo</th>
  40.            </tr>
  41.          </h3>
  42.        </thead>
  43.        <tbody>
  44.           <tr class="lire">
  45. <td>
  46. <input type="text" id="documento" name="documento[]" placeholder="Escriba El Nombre del Documento">
  47. </td>
  48. <td>
  49. <select id="taxonomia" name="taxonomia[]" id="">
  50. <option value="">SELECCIONE UNA OPCION VALIDA</option>
  51. <option value="">EXPEDIENTE MEDICO</option>
  52. <option value="">EXPEDIENTE LABORAL</option>
  53. <option value="">EXPEDIENTE SEGURIDAD INDUSTRIAL</option>
  54. </select>
  55. </td>
  56. <td>
  57. <textarea id="describe" name="describe[]"></textarea>
  58. </td>
  59. <td>
  60. <div class='input-file'>
  61.          <input type="file" name="images[]">
  62.           Seleccionar archivo
  63.          <div class="files">...</div>
  64.          </div>
  65. </td>
  66. </tr>
  67. </tbody>
  68.  </table>
  69. <td>
  70. <a href="#" id="btn-up" class="anex-up"> Anexar Otro Archivo </a>
  71. <input id="btn-up" type="submit" value="Cargar Documentos">
  72. </td><br><br>
  73. </form>
  74.  
  75.  </center>
  76. </body>
  77. </html>
  78.  
- El cual me genera la siguiente interfaz.



- Si yo selecciono un archivo con el boton que esta de bajo de "ADJUNTAR ARCHIVO" obtengo lo siguiente.



- A traves de Jquery he creado una funcion para añadir mas campos al presionar el boton Anexar otro Archivo y como resultado obtengo lo siguiente.



- Aclaro que al pulsar Anerxar Archivo el mismo msj en el Boton "ADJUNTAR ARCHIVO ", se mantuvo sin embargo ese es no es mi real problema claro si hay alguna forma de arreglar eso estaria mucho mejor. Pero a lo que vengo es lo Siguiente si yo trato de "Adjuntar otro Archivo" en el segunto Elemento que cree el mensaje del Primer elemento se mantiene, no cambia sin embargo pareciera que el segundo archivo que adjunto si esta pero con el msj del primero mas claro con estas imagenes.

- Adjunto algo en el segunto boton.



- Si mantengo unos segundos el cursor posicionado en el segundo boton me sale el nombre de la imagen que acabo de adjuntar indicandome que efectivamente no es la de el nombre que contiene en BLANCO el boton.



- Tengo como javascript/Jquery lo siguiente:

Código
  1. $(document).ready(function() {
  2. $(".lire").on("change", "input:file",function(){
  3.        if($(this).val())
  4.        {
  5.            // Si tiene valor, se muestra en el class .files
  6.            $(this).parent().find(".files").html($(this).val());
  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. });
  17.  
  18. $(document).on("click",".eliminar",function(){
  19. var parent = $(this).parents().get(0);
  20. $(parent).remove();
  21. });
  22.  

- Espero puedan ayudarme y de ante mano muchas gracias, igual seguire haciendo unas cuantas pruebas.


« Última modificación: 24 Noviembre 2014, 23:16 pm por Slikp » En línea

robe007

Desconectado Desconectado

Mensajes: 15


Ver Perfil
Re: Jquery Buscar y Mostrar Elemento
« Respuesta #1 en: 25 Noviembre 2014, 19:32 pm »

Hola, para poder realizar lo que pides, debes de cambiar tu javascript por lo siguiente:

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

Saludos amigo ! Espero te sirva.


« Última modificación: 25 Noviembre 2014, 19:42 pm por robe007 » En línea

Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: Jquery Buscar y Mostrar Elemento
« Respuesta #2 en: 25 Noviembre 2014, 20:20 pm »

- robe007, Hombre eso era exactamanete lo que necesitaba y muchas gracias por el.

Código
  1. $("#up_form tbody tr:eq(-1)").find(".files").html("..."); // NUEVA LINEA
  2.  

- Saludos.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Buscar y eliminar un elemento.
PHP
‭lipman 3 3,057 Último mensaje 8 Diciembre 2008, 22:27 pm
por basantadi
[jQuery] Mostrar y Ocultar cada 5 segundos
Desarrollo Web
Shell Root 1 2,482 Último mensaje 26 Abril 2013, 21:13 pm
por engel lex
Duda Seleccionar o Alterar Elemento con Jquery
Desarrollo Web
Slikp 1 2,313 Último mensaje 15 Enero 2015, 12:45 pm
por #!drvy
Busqueda y mostrar elemento en array
Programación C/C++
matver 3 2,500 Último mensaje 6 Febrero 2017, 03:44 am
por JS3
Buscar elemento k-esimo en un array no ordenado
Java
lRetro 3 8,432 Último mensaje 10 Noviembre 2017, 22:13 pm
por Serapis
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines