Jquery Buscar y Mostrar Elemento

Slikp · 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 (html4strict) [Seleccionar]


<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="script/jquery-2.1.1.min.js"></script>
	<script src="script/ajax.js"></script>
<style>

	form {
		background: white;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
		height: auto;
		margin-top: 35px;
		width: 1336px;
	}
	td {
		border-bottom: solid 1px #DC272A;
	}
	#eliminar {
		background: #DC272A;
		border-radius: 4px;
		cursor: pointer;
		color: white;
		height: 25px;
		text-align: center;
		width: 25px;		
	}

</style>
</head>
<body>
  <center>	
	<form method="post" name="up_form" action="procesar.php">
	  <table id="up_form"><br> 		
  		<thead>
  		  <h3>
            <tr>
                <th>Nombre Documento</th>
                <th>Clasificación</th>
                <th>Descripción Documento</th>
                <th>Adjuntar Archivo</th>
            </tr>
          </h3>
        </thead>
        <tbody> 
          	<tr class="lire">
				<td>
					<input type="text" id="documento" name="documento[]" placeholder="Escriba El Nombre del Documento">
				</td>
				<td>
					<select id="taxonomia" name="taxonomia[]" id="">
						<option value="">SELECCIONE UNA OPCION VALIDA</option>
						<option value="">EXPEDIENTE MEDICO</option>
						<option value="">EXPEDIENTE LABORAL</option>
						<option value="">EXPEDIENTE SEGURIDAD INDUSTRIAL</option>
					</select>
				</td>
				<td>
					<textarea id="describe" name="describe[]"></textarea>
				</td>
				<td>
					<div class='input-file'>
			          <input type="file" name="images[]">
			           	Seleccionar archivo
			          <div class="files">...</div>
		          </div>
				</td>
			</tr>
		</tbody>	
	  </table>
		<td>
			<a href="#" id="btn-up" class="anex-up"> Anexar Otro Archivo </a>
			<input id="btn-up" type="submit" value="Cargar Documentos">
		</td><br><br>
	</form>

  </center>
</body>
</html>

- 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 (javascript) [Seleccionar]


$(document).ready(function() {
	 $(".lire").on("change", "input:file",function(){
        if($(this).val())
        {
            // Si tiene valor, se muestra en el class .files
            $(this).parent().find(".files").html($(this).val());
        }else{
            // Si no tiene valor, se muestran los puntos ...
            $(this).parent().find(".files").html("...");
        }
    });
});

$(document).on("click",".anex-up",function() {
	$("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
});

$(document).on("click",".eliminar",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
});

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

robe007 · 25 Noviembre 2014, 19:32 PM

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

Código (javascript) [Seleccionar]

$(document).ready(function() {
    // (Se borra la que estaba anteriormente, ya que la sintaxis no era la correcta)
    $(document).on('change', 'input:file', function(){  // NUEVA LINEA
       if($(this).val())
       {
         // Si tiene valor, se muestra en el class .files
         $(this).parent().find(".files").html($(this).val());
        }else{
         // Si no tiene valor, se muestran los puntos ...
         $(this).parent().find(".files").html("...");
        }
    });
});
 
$(document).on("click",".anex-up",function() {
   $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
    // (Se selecciona la ultima fila agregada, y se modifica el valor html del elemento con la clase 'files')
    $("#up_form tbody tr:eq(-1)").find(".files").html("..."); // NUEVA LINEA

});
 
$(document).on("click",".eliminar",function(){
    var parent = $(this).parents().get(0);
    $(parent).remove();
});

Saludos amigo ! Espero te sirva.

Slikp · 25 Noviembre 2014, 20:20 PM

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

Código (javascript) [Seleccionar]


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

- Saludos.

Test Foro de elhacker.net SMF 2.1

Jquery Buscar y Mostrar Elemento

Slikp

robe007

Slikp