Jquery Duda con Cargar un Select

Slikp · 7 Noviembre 2014, 15:02 PM

- Buenas yo denuevo por aqui espero puedan ayudarme con lo siguiente, la verdad no se bien como expresarme así que les muestro lo que intento hacer.

- Tengo este formulario:

Código (html4strict) [Seleccionar]


<?php 
	require_once "php/Clases/conexion/conexion.pro.php";
	require_once "php/Clases/crud/crud.php";

	$model = new Crud();
	$model->Read();
	$filas = $model->rows;
	$total = count($filas);
?>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="script/jquery-2.1.1.min.js"></script>
	<script src="script/ajax.js"></script>
</head>
<body>	
	<section class="criterio">
		<div id="crit-form">
			<h3>Criterio de Busquedas</h3>
			<fieldset>
			<form class="crit-form" method="post" name="search_form" id="search_form">
				<small> El Total de Filas en Base de Datos: <?php echo $total ?> </small>
						
						<div id="resultados"></div>
						
					<small>Por Ficha</small>
					<input type="text" name="cod.ficha" id="search_fi" class="parse" placeholder="introduzca Codigo Ficha Ej: Ch001">
					<small>Por Cedula</small>
					<input type="text" name="ci" id="search_ci" class="parse" placeholder="Cedula Use Puntos Ej: 49.781.190">
					<small>Por Nombre</small>
					<input type="text" id="search" class="parse" placeholder="introduzca un Nombre Ej: Antonio">
					<small>Por Estatus</small>
					<select>
						<option value="A" selected>Activo</option>
						<option value="I">Inactivo</option>
						<option value="PL">Por Liquidar</option>
						<option value="L">Liquidado</option>
					</select>
					<input type="submit" id="btn-sub" class="parse" Value="Procesar">
			</form>
			</fieldset>
		</div>
	</section>
	<section>
		<p>
			<div id="result"></div>
		</p>
	</section>
</body>
</html>

- En <div id="resultados"></div> se van cargando una serie de resultados dependiendo de lo que escriba en los inputs esto ya lo pude hacer, anexo a eso quise realizar una funcion que al darle click ha X resultado se generara otra busqueda y a su vez se mostraran resultados mas detallados hasta ese punto no he llegado al 100% sin embargo hice mis pruebas de la siguiente manera.

- Esta es mi funcion para generar la primera busqueda.

Código (javascript) [Seleccionar]


$(document).ready(function() {
	$('#search').focus();
	$('#search_form').submit(function(e){
		e.preventDefault();
	})

	$('#search_form .parse').on('change',function(){
		
		var envio = $(this).val();

		$('#resultados').html('<h2><img src="img/loadin.gif" width="20" /> Cargando...</h2>');
		$.ajax({
			type: 'POST',
			url: 'php/search.php',
			data: ('search='+envio),
			success: function(resp){
				if (resp!="") {
					$('#resultados').html(resp);
				}
			}
		})
	})
})

- Esa me funciona de 10 y tengo esta otra que está en el mismo documento es la que se supone que me debe mostrar la info que yo quiero al darle click al select que esta en Search.php y que se carga en <div id="resultados"></div>

Código (javascript) [Seleccionar]


$(document).ready(function() {
	$('#display-lps').on('click',function(){
		$.ajax({
			type: 'POST',
			url: 'script/process.php',
			data: $('#search_form').serialize(),
			success: function(data){
				if (data!="") {
					$('#result').html(data);
				}
			}
		});
	});
});

- Esta funcion no se ejecuta y realizando mas pruebas me percate que si hago esto, la funcion si funciona.

Código (html4strict) [Seleccionar]


<?php 
	require_once "php/Clases/conexion/conexion.pro.php";
	require_once "php/Clases/crud/crud.php";

	$model = new Crud();
	$model->Read();
	$filas = $model->rows;
	$total = count($filas);
?>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="script/jquery-2.1.1.min.js"></script>
	<script src="script/ajax.js"></script>
</head>
<body>	
	<section class="criterio">
		<div id="crit-form">
			<h3>Criterio de Busquedas</h3>
			<fieldset>
			<form class="crit-form" method="post" name="search_form" id="search_form">
				<small> El Total de Filas en Base de Datos: <?php echo $total ?> </small>
						
						<select size="10" name="nombre" id="display-lps">
							<?php 
								foreach ($filas as $fila) 
								{
							?> <option id="resultados" >
							<?php echo $fila['cod_emp'] . $fila['nombres'] ." ". $fila['apellidos'];
							?> </option>
							<?php
								} 
							?>
						</select>
						
					<small>Por Ficha</small>
					<input type="text" name="cod.ficha" id="search_fi" class="parse" placeholder="introduzca Codigo Ficha Ej: Ch001">
					<small>Por Cedula</small>
					<input type="text" name="ci" id="search_ci" class="parse" placeholder="Cedula Use Puntos Ej: 49.781.190">
					<small>Por Nombre</small>
					<input type="text" id="search" class="parse" placeholder="introduzca un Nombre Ej: Antonio">
					<small>Por Estatus</small>
					<select >
						<option value="A" selected>Activo</option>
						<option value="I">Inactivo</option>
						<option value="PL">Por Liquidar</option>
						<option value="L">Liquidado</option>
					</select>
					<input type="submit" id="btn-sub" class="parse" Value="Procesar">
			</form>
			</fieldset>
		</div>
	</section>
	<section>
		<p>
			<div id="result"></div>
		</p>
	</section>
</body>
</html>

- Lo que hice fue eliminar <div id="resultados"></div> y colocar ese select con el Foreach que son un fragmento de lo que esta en Search.php y es lo que Ajax mostraba en el <div id="resultados"></div> que elimine.

- Yo me imagino que la funcion no se cumple porque el #display-lps que esta en el select que trae Ajax aun no se construido en el Html, entonces cual seria la solucion, yo inventando hice esto: En el Search.php inclui <script src="script/ajax.js"></script> justo en el momento donde Ajax trae el fragmento del Select y eso me funciono la funcion se ejecuta sin problema, sin embargo quiero saber si hay una forma mas eficiente de hacerlo?

- Claro yo puedo crear otro script y sacar la funcion click y incluirla sola en search.php para no repetir la funcion ready, pero hay una manera en Jquery mas eficiente?

-Saludos

MinusFour · 7 Noviembre 2014, 15:22 PM

En tu HTML inicial, el select no tiene la id display-lps, de hecho en ninguna parte del script le agregas esa id, así que no creo que sea algo que agregues dinamicamente.

O le pones esa id a tu select, o cambias el selector para que agarre el select.

Código (javascript) [Seleccionar]


$('.crit-form select').on('click', function() {

Slikp · 7 Noviembre 2014, 15:43 PM

- Hola MinusFour, creo que no me exprese bien veras en mi Html principal no esta el Select con id display-lps porque ese Select lo trae Ajax desde Search.php osea desde aqui:

Código (php) [Seleccionar]


<?php 
	require_once "Clases/conexion/conexion.pro.php";
	require_once "Clases/crud/crud.php";

	sleep(1);

		$search = '';
		if (isset($_POST['search'])){
			$search = $_POST['search'];
		}

		$model = new Crud();
		$model->Searchi($search);
		$filas = $model->rows;
		$total = count($filas);
		
  if ($total>0 && $search!='')
  {
?>
	<select size="10" name="cod" id="display-lps">
	<?php 
		foreach ($filas as $fila) 
		{
	?> <option id="resultados" value="<?php echo $fila['cod_emp']; ?>">
	<?php echo $fila['cod_emp'] . $fila['nombres'] ." ". $fila['apellidos'];
	?> </option>
	<?php
		} 
	?>
	</select>
	<?php 
  }
 	 
  	else { if($total>0 && $search=='') {
  	?>
  	<select size="10" name="cod" id="display-lps">
  	<?php  
  	foreach ($filas as $fila) 
		{
	?> 
	<option id="resultados" value="<?php echo $fila['cod_emp']; ?>">
		<?php echo $fila['cod_emp'] . $fila['nombres'] ." ". $fila['apellidos']; ?> 
	</option>
	<?php 
  		}
  	?>
  		</select>
  	<?php 
  }
}
	?>

- Y eso Ajax lo cargar en el <div id="resultados"></div> de mi Html Inicial cuando escribo algo en los Inputs.

- Este select que vez en mi Html principal no tiene nada que ver con lo quiero.

Código (html4strict) [Seleccionar]


<select>
	<option value="A" selected>Activo</option>
	<option value="I">Inactivo</option>
	<option value="PL">Por Liquidar</option>
	<option value="L">Liquidado</option>
</select>

MinusFour · 7 Noviembre 2014, 16:20 PM

No hagas el bind entonces sobre el elemento inexistente y usa un parent con un selector.

Código (javascript) [Seleccionar]


$('.crit-form').on('click', '#display-lps', function() {

Slikp · 7 Noviembre 2014, 16:31 PM

- MinusFour ud es grande, efectivamente su respuesta me dio la solucion muchisimas gracias...

-Saludos

Test Foro de elhacker.net SMF 2.1

Jquery Duda con Cargar un Select

Slikp

MinusFour

Slikp

MinusFour

Slikp