[SOLUCIONADO] Agregar Selects dependientes en un formulario dinamico

[jessita_16]

Hola a todos, espero que me puedan orientar, llevo ya varios días tratando de solucionar un problema, se los explico a continuación:

Estoy haciendo unos formularios dinámicos y entre sus campos hay dos selects uno dependiente del otro, cada vez que agrego nuevos campos dinamicamente el select dependiente no me funciona abajo dejo el código Jquery que estoy usando para cargar el select dependiente cada cada vez que se generan nuevos campos, a continuación explico las variables del codigo

ceuntaInputs: es el contador que cambia el nombre de los nuevos campos generados.

'Sp'+cuentaInputs: ID de un select que no tiene dependencia

'ref'+cuentaInputs: id de el select padre

'refhdp'+cuentaInputs: id del select hijo.

las paginas PHP que llamo es donde se encuentran las query a la BDD para cada select

Código:

$('#agrega').click(function(){
		cuentaInputs++; 
		


		$.ajax({
						url:'procesa.php',
						type: 'POST',
				
						success: function(opciones){
							$('#Sp'+cuentaInputs).html(opciones);
						}
					})
		
			$.ajax({
						url:'trip-ref.php',
						type: 'POST',
				
						success: function(opciones2){
							$('#ref'+cuentaInputs).html(opciones2);
						}
					})			
					
					$('#ref'+cuentaInputs).change(function(){
					$.ajax({
						url:'hdp-ref.php',
						type: 'POST',
						data:'idref='+$('#ref'+cuentaInputs).val(),
						success: function(opciones3){
							$('#refhdp'+cuentaInputs).html(opciones3);
						}
					})
				});

Agradecería mucho que me pudiesen orientar ya que debo dejar funcional esto lo antes posible. Gracias.

[fhederico]

Hola,

Consulta, cuando dices "no me funciona" te refieres a que no lo esta agregando a tu pagina??

Porque por lo que veo, tu tienes un div o boton con un ID "agrega", este internamente tiene un contador que va aumentando (cuentaInputs) y lo que hace es buscar un DIV con dicho ID y agrega ahi el resultado es decir, si yo tengo solo esto

Código HTML:

<div id="Sp1"></div>
<div id="ref1"></div>
<div id="refhdp1"></div>
 

La primera vez que lo ejecute funcionara sin problemas, ya que encontrara los IDs asumiendo que "cuentaInputs" es 1, el buscaria

Código HTML:

#Sp1
#ref1
#refhdp1
 

Pero, si lo ejecuto por 2da vez, "cuentaInputs" valdria 2, y no existe un ID con el valor 2, esta parte deberia ser dinamica, me explico, tu tienes por ejemplo 3 div

Código HTML:

<div id="cont_Sp"></div>
<div id="cont_ref"></div>
<div id="cont_refhdp"></div>
 

Y dentro de estos DIV deberias ir agregando los nuevos, asi siempre existirian los ID de los DIV que el buscara ya que "cuentaInputs" cada vez que se pinche en el boton "agregar" aumentara su valor.

No se si me explico

Saludos

[jessita_16]

Hola Fhederico, si me agrega correctamente los nuevos campos y me los diferencia bien, mi problema es la dependencia con los selects, yo lo que hago es que cree una clase que se la agrego a cada input dinámico, (class="fila'+cuentaInputs+'), debería es ponerlos dentro de un div en vez de agregarle la clase? probare lo que me dices hoy a ver si así me funciona la dependencia. Gracias

[fhederico]

Hola,

No es necesario, es decir, si tu me dices que te funciona bien, puedes hacerlo de esa misma manera o hacerlo como te sugiero.

Una consulta, porque dices que no te funciona el select dependiente? ando mas lento de lo normal.¡ hoy.

Tu deberias agregar 3 div con contenido, por lo que me dices los agregas, pero creo, que tu problema seria por ejemplo

Código HTML:

#Sp1
    #ref1
    #refhdp1
 
    #Sp2
    #ref2
    #refhdp2
 
    #Sp3
    #ref3
    #refhdp3
 

Aqui asumimos que agregamos 3 div con contenidos (Sp1, Sp2, Sp3), creo que tu problema seria si yo selecciono una opcion del DIV #ref1 deberia cambiar el contenido del DIV #refhdp1 y no lo hace????? ese es tu problema?

Saludos

[jessita_16]

Exactamente eso es lo que no hace, no cambia el contenido que esta dentro de refhdp , y he intentado cambiarlo pero el problema con ese select dependiente persiste....

[jessita_16]

Solucionado... :) de esta manera

Código HTML:

<script  type="text/javascript">


$(document).ready(function(){
	var cuentaInputs=$('#elementos').children().length;

	
		
     $("#Sproyectos").change(function () {
     $("#Sproyectos option:selected").each(function () {
            proy=$(this).val();
            $.post("queries/query_wp.php", { proy : proy }, function(opciones3){
            $("#Swp"+cuentaInputs).html(opciones3);
            });
			
			});          
	 })
				var algo="Swp"+cuentaInputs;
			$("#Swp"+cuentaInputs).change(function () {
            $("#Swp1  option:selected").each(function () {
                id=$(this).val();
                $.post("queries/query_task.php", { id : id }, function(opciones){
            $("#Stask"+cuentaInputs).html(opciones);
            });
			
			});          
	 })
	 
	 		
	 
			$('#agrega').click(function(){
		cuentaInputs++;
		
	
		
$('<br class="fila'+cuentaInputs+'" /> <br class="fila'+cuentaInputs+'"/><select class="fila'+cuentaInputs+'" id="Swp'+cuentaInputs+'" name="wp'+cuentaInputs+'"><option value="0">Select WP</option></select> <select class="fila'+cuentaInputs+'" id="Stask'+cuentaInputs+'" name="task'+cuentaInputs+'"><option value="0">Select Task</option></select> ').appendTo('#inputs');				
					
		   $("#Sproyectos option:selected").each(function () {
            proy=$(this).val();
            $.post("queries/query_wp.php", { proy : proy }, function(opciones3){
            $("#Swp"+cuentaInputs).html(opciones3);
            });
			});        
			
			$("#Swp"+cuentaInputs).change(function () {
            $(this).find("option:selected").each(function () {
                id=$(this).val();
                $.post("queries/query_task.php", { id : id }, function(opciones){
            $("#Stask"+cuentaInputs).html(opciones);
            });
			
			});          
	 })		
		
		});
			
			});
</script>



 <div id="elementos">
 <form  id="datos"  action="prueba.php" method="post" >
 <div id="inputs">
  <p id="demo"></p>
 <select id="Sproyectos" name="proy"  onchange="myFunction()">
				<option value="0">Select Project</option>
				<?php
					$proyecto = obtenerTodosLosProyectos();
					foreach ($proyecto as $proy) { 
						echo '<option value="'.$proy->id.'">'.utf8_encode($proy->acronimo).'</option>';		
					}
				?>
			</select>
            
       
            <br /><br />
            <select id="Swp1" name="wp1">
				<option value="0">Select WP</option>
			</select>
            <select id="Stask1" name="task1">
				<option value="0">Select Task</option>
			</select>
 



 </div>
<input type="button" id="agrega" value="+">
<br /><br /><br />
<center><button type="button" /> </center>

 </form>
 </div>
 </body> 

Espero que sea de ayuda para quien lo pueda necesitar

[livemusic]

Creo que tu error siempre fue ...


data:'idref='+$('#ref'+cuentaInputs).val(),

-----------------------------------------

data: {idref: $('#ref'+cuentaInputs).val()},

[Alexis88]

Iniciado por livemusic

Creo que tu error siempre fue ...


data:'idref='+$('#ref'+cuentaInputs).val(),

-----------------------------------------

data: {idref: $('#ref'+cuentaInputs).val()},

En realidad eso no es exacto pues como bien dice en el manual oficial:

Iniciado por Manual de jQuery

data
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

Al atributo data también se le puede asignar una cadena conteniendo la query string, no necesariamente se debe de utilizar un objeto literal.

Saludos