Jquery: Problema creando campo dinámico

Widrings · #1 (**permalink**) 26/03/2011, 16:35

Hola a todos!

Estoy realizando una página web para un proyecto que debo realizar. En una de las partes tengo un formulario (html + php) en el cual se quiere dar de alta un artículo de revista. Uno de los campos de dicho formulario es el autor del artículo. Para este menester he puesto un dropdown que contiene los nombres de los autores que tengo registrados en una tabla de la base de datos. Acompañando a este dropdown tengo un enlace "Más autores" que al pusarlo quiero que aparezca otro dropdrown, con los mismos datos de autores que aparecían en el original, y así sucesivamente para poder seleccionar todos los autores que necesite el usuario.

Para ello he utilizado un código en Jquery que he encontrado, pero no me acaba de funcionar.

Os lo adjunto:

Código:

jQuery.fn.generaNuevosCampos = function(etiqueta, nombreCampo, indice){
   $(this).each(function(){
      elem = $(this);
      elem.data("etiqueta",etiqueta);
      elem.data("nombreCampo",nombreCampo);
      elem.data("indice",indice);
      
      elem.click(function(e){
         e.preventDefault();
         elem = $(this);
         etiqueta = elem.data("etiqueta");
         nombreCampo = elem.data("nombreCampo");
         indice = elem.data("indice");
         texto_insertar = '<p>' + etiqueta + ':<br><div><select class="element select medium" name="'  + nombreCampo + indice + '"><? $consulta1=mysql_query("SELECT * FROM Investigadors");   echo "<option value='0' selected='selected'>Selecciona un investigador de la llista...</option>";
			while($registro1=mysql_fetch_array($consulta1))
	{
		echo '<option value="'.$registro1[Id].'">'.$registro1['Nom'].$registro1['Cognom'].'</option>';
	}
		echo "</select>";
?></select></p>';
         indice ++;
         elem.data("indice",indice);
         nuevo_campo = $(texto_insertar);
         elem.before(nuevo_campo);
      });
   });
   return this;
} 
$(document).ready(function(){
		$("#mascampos").generaNuevosCampos("Selecciona un investigador de la llista...", "compra", 2);
	});

Y este es la parte del formulario en cuestión afectada:

Código HTML:

 <li id="li_12" >
		<label class="description" for="element_12">Autors de l'article</label>
		<div>
		  <select class="element select medium" id="autors" name="autors">
		    <?
			$consulta1=mysql_query("SELECT * FROM Investigadors");
			?>
			<?
        echo "<option value='0' selected='selected'>Selecciona un investigador de la llista...</option>";
			while($registro1=mysql_fetch_array($consulta1))
	{
		//echo "Hola";
		echo '<option value="'.$registro1[Id].'">'.$registro1['Nom'].$registro1['Cognom'].'</option>';
		//echo "<option value='1'>Hola</option>";
		//{echo '<OPTION VALUE="'.$row[Nom].'">'.$row[Nom].'</OPTION>';}; 
	}
	echo "</select>";
	
?>
        	      </select>
                  <p>
                  <a href="#" id="mascampos">Más campos</a>
                  </p>
		</div> 
		</li>

¡Desde ya muchísimas gracias por adelantado!

Naahuel · #2 (**permalink**) 27/03/2011, 22:30

¿Podrías expander "no me acaba de funcionar"? ¿Qué hace que no debería hacer? No funciona en absoluto? Cuanto más específico seas, mejor va a ser la ayuda :)

Naahuel · #3 (**permalink**) 27/03/2011, 22:42

Mirá, eliminando las líneas que generan el HTML dinámico esto funciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
    <script type="text/javascript">
	jQuery.fn.generaNuevosCampos = function(etiqueta, nombreCampo, indice){
    $(this).each(function(){
      elem = $(this);
      elem.data("etiqueta",etiqueta);
      elem.data("nombreCampo",nombreCampo);
      elem.data("indice",indice);
      
      elem.click(function(e){
         e.preventDefault();
         elem = $(this);
         etiqueta = elem.data("etiqueta");
         nombreCampo = elem.data("nombreCampo");
         indice = elem.data("indice");
         texto_insertar = "<p><select class='element select medium'><option value='' selected='selected'>Selecciona un investigador de la llista...</option><option>Inverstigador 1</option><option>Investigador 2</option></select></p>'";
         indice ++;
         elem.data("indice",indice);
         nuevo_campo = $(texto_insertar);
         elem.before(nuevo_campo);
      });
    });
    return this;
    } 
    $(document).ready(function(){
                $("#mascampos").generaNuevosCampos("Selecciona un investigador de la llista...", "compra", 2);
        });
    </script>
    <title></title>
  </head>
  <body>
    <label class="description" for="element_12">Autors de l'article</label>
    <div>
     <p><select class="element select medium"><option value='0' selected="selected">Selecciona un investigador de la llista...</option><option>Inverstigador 1</option><option>Investigador 2</option></select></p>
      <p>
        <a href="#" id="mascampos" name="mascampos">Más campos</a>
      </p>
    </div>
  </body>
</html>

Lo que me parece que no es necesario es generar dos veces el mismo HTML. Es decir, generás el <select> que aparece por defecto con PHP y pues con jQuery lo clonás. Es fácil. Si no lo lográs solucionar yo estaría dispuesto a tomarme unos minutos y hacerte un script que haga dicha tarea.

Un saludo.

Widrings · #4 (**permalink**) 28/03/2011, 14:41

Muchs gracias por responder Naahuel. Tirando de tu idea he cambiado un poco el asunto. He clonado el elemento en cuestión, y consigo que me salga otro select de la misma manera. Lo que no consigo de ninguna manera es acceder al select en cuestión para cambiarle la id para que sea diferente a la del objeto clonado.

Código HTML:

<li id="li_12" >
		<label class="description" for="element_12">Autors de l'article</label>
       
		<div id="prueba">
		  <select class="element select medium" id="autor" name="autor">
            <?
			$consulta1=mysql_query("SELECT * FROM Investigadors");
			?>
			<?
        echo "<option value='0' selected='selected'>Selecciona un investigador de la llista...</option>";
			while($registro1=mysql_fetch_array($consulta1))
	{
		//echo "Hola";
		echo '<option value="'.$registro1['Id'].'">'.$registro1['Nom'].$registro1['Cognom'].'</option>';
		//echo "<option value='1'>Hola</option>";
		//{echo '<OPTION VALUE="'.$row[Nom].'">'.$row[Nom].'</OPTION>';}; 
	}
	echo "</select>";
	
?>
        	      </select>
                  <p>
    <a href="" onclick="duplicar();return false;">duplicar</a> </p>
		</div> 
		</li>

Código:

x=0;
	function duplicar(){
   var obj = document.getElementByClass("autor").cloneNode(true);
       //obj.getElementsByTagName("select")[0].id="prueba";//obj[0].id = obj[0].name = "prueba"+x;
	      //miParrafo = $("capadiv").getElement("p");//autor.setAttribute("id","loQueQuieras") 
   document.getElementById("prueba").appendChild(obj);
   x++;
}

¡Muchas gracias de nuevo por adelantado!

Os agradezco mil la ayuda.

Naahuel · #5 (**permalink**) 28/03/2011, 21:37

Tenés mal el método. Cambiá la linea de esta forma:

Código Javascript:

Ver originalvar obj = document.getElementsByClassName("autor")[0].cloneNode(true);

Te faltó el [0] además de que pusiste Element en lugar de Elements. Me parece que ese método no existe para IE (puede ser que esté hablando macanas, podés probar). Lo mejor es, ya que estabas usando jQuery, seguir usándolo. Algo así:

Código Javascript:

Ver originalfunction duplicar(){
        var obj = $('.autor').first().clone();
        $('#prueba').append(obj);
    }

Eso funcionará seguro en IE, además que el código es mucho más simple. Hacer que todos tengan diferentes IDs podrías hacer algo así:

Código Javascript:

Ver originalx = 0
function duplicar(){
    x++;
    var obj = $('.autor').first().clone().attr('id','prueba' + x);;
    var nuevo = $('#prueba').append(obj);
}

Espero te sirva. Un saludo!

Widrings · #6 (**permalink**) 29/03/2011, 06:52

Muchas gracias de nuevo por responder. Tampoco hay manera, he echo lo que tu me dices, pero hay algo que se me debe escapar:

Código:

<script src="jquery-1.5.1.js" type="text/javascript"></script>
	<script>
	$(document).ready(function(){
		$("#mascampos").duplicar();
	});

x=0;
  
    jQuery.fn.duplicar=function (){
        x++;
        var obj = $('.autor').first().clone().attr('id','prueba' + x);;
        var nuevo = $('#prueba').append(obj);
    }
</script>

Código:

 <li id="li_12" >
		<label class="description" for="element_12">Autors de l'article</label>
       
		<div id="prueba">
		  <select class="element select medium" id="autor" name="autor">
            <?
			$consulta1=mysql_query("SELECT * FROM Investigadors");
			?>
			<?
        echo "<option value='0' selected='selected'>Selecciona un investigador de la llista...</option>";
			while($registro1=mysql_fetch_array($consulta1))
	{
		//echo "Hola";
		echo '<option value="'.$registro1['Id'].'">'.$registro1['Nom'].$registro1['Cognom'].'</option>';
		//echo "<option value='1'>Hola</option>";
		//{echo '<OPTION VALUE="'.$row[Nom].'">'.$row[Nom].'</OPTION>';}; 
	}
	echo "</select>";
	
?>
        	      </select>
                <p>
                      <a href="#" id="mascampos">Más campos</a>              </p>
                </div>
</li>

Naahuel · #7 (**permalink**) 29/03/2011, 09:23

El problema está en que esta línea:

Código Javascript:

Ver originalvar obj = $('.autor').first().clone().attr('id','prueba' + x);;

(omitiendo que se me zafó un doble punto y coma :P ) hace referencia a un elemento con clase autor. El cual no existe. Probá modificándola de esta forma:

Código Javascript:

Ver originalvar obj = $('#autor').first().clone().attr('id','autor' + x);

Entonces te clonará el primer select que tiene ID autor y los sucesivos clones tendrán ID's con un número al final. Debería funcionar.

Widrings · #8 (**permalink**) 30/03/2011, 06:58

He puesto lo que me dijiste pero tampoco funciona:

Código:

<script type="text/javascript" src="view.js"></script>
	<script src="jquery-1.5.1.js" type="text/javascript"></script>
	<script>
	$(document).ready(function(){
		$("#mascampos").duplicar();
	});
  
  x=0;
    jQuery.fn.duplicar=function (){
       
    var obj = $("#autor").first().clone().attr("id","autor" + x);        
	var nuevo = $("#prueba").append(obj);
	 x++;
    }
</script>

Código PHP:

 
 <li id="li_12" >
        <label class="description" for="element_12">Autors de l'article</label>
       
        <div id="prueba">
          <select class="element select medium" id="autor" name="autor">
            <?
            $consulta1=mysql_query("SELECT * FROM Investigadors");
            ?>
            <?
        echo "<option value='0' selected='selected'>Selecciona un investigador de la llista...</option>";
            while($registro1=mysql_fetch_array($consulta1))
    {
        //echo "Hola";
        echo '<option value="'.$registro1['Id'].'">'.$registro1['Nom'].$registro1['Cognom'].'</option>';
        //echo "<option value='1'>Hola</option>";
        //{echo '<OPTION VALUE="'.$row[Nom].'">'.$row[Nom].'</OPTION>';}; 
    }
    echo "</select>";
    
?>
                  </select>
                <p>
                      <a href="#" id="mascampos">Más campos</a>              </p>
                </div> 
         </li>

La verdad es que nose que probar, pienso que debería funcionar como me has comentado, pero nada. Al pusar en el enlace Más campos no me aperece el campo clonado. Muchas gracias de nuevo.

Naahuel · #9 (**permalink**) 30/03/2011, 07:06

El código si funciona, aunque mal por la forma en que lo has puesto. A vos no te debe funcionar porque has cerrado </select> dos veces. Por la forma en que llamás a la función duplicar, esta se llama sólo una vez al cargar el documento. Lo correcto sería así:

Código Javascript:

Ver original$(document).ready(function(){
    $("#mascampos").click(function(){
        $('#autor').duplicar();
    });
});
 
var x=0;
$.fn.duplicar = function(){
    var obj = $(this).first().clone().attr("id","autor" + x);        
    var nuevo = $("#prueba").append(obj);
    x++;
}

Dany_s · #10 (**permalink**) 30/03/2011, 08:48

para qué querés generar id dinámicos? no hacen falta

Widrings · #11 (**permalink**) 31/03/2011, 11:11

Cita:

Iniciado por Naahuel

El código si funciona, aunque mal por la forma en que lo has puesto. A vos no te debe funcionar porque has cerrado </select> dos veces. Por la forma en que llamás a la función duplicar, esta se llama sólo una vez al cargar el documento. Lo correcto sería así:

Código Javascript:

Ver original$(document).ready(function(){
    $("#mascampos").click(function(){
        $('#autor').duplicar();
    });
});
 
var x=0;
$.fn.duplicar = function(){
    var obj = $(this).first().clone().attr("id","autor" + x);        
    var nuevo = $("#prueba").append(obj);
    x++;
}

Creo que ya me funciona del todo. Muchísimas gracias Naahuel!!!

Cita:

Iniciado por Dany_s

para qué querés generar id dinámicos? no hacen falta

Para poderlos enviar desde el formulario y guardarlos en mi bd, aunque por loq ue dices quizás haya otra solución. No estoy muy ducho en el lenguaje de programación web.

Naahuel · #12 (**permalink**) 31/03/2011, 11:20

Cita:

Iniciado por Widrings

Código:

 <li class="" id="li_12">

		<label class="description" for="element_12">Autors de l'article</label>
       
		<div id="prueba">
		  <select class="element select medium" id="autor" name="autor">
            			<option value="0" selected="selected">Selecciona un investigador de la llista...</option><option value="19">Hola</option></select>        	     
                      <a href="#" id="mascampos">Más campos</a>              
                <select class="element select medium" id="autor0" name="autor">
            			<option value="0" selected="selected">Selecciona un investigador de la llista...</option><option value="19">Hola</option></select><select class="element select medium" id="autor1" name="autor">

            			<option value="0" selected="selected">Selecciona un investigador de la llista...</option><option value="19">Hola</option></select><select class="element select medium" id="autor2" name="autor">
            			<option value="0" selected="selected">Selecciona un investigador de la llista...</option><option value="19">Hola</option></select><select class="element select medium" id="autor3" name="autor">
            			<option value="0" selected="selected">Selecciona un investigador de la llista...</option><option value="19">Hola</option></select></div> 
                <div id="prueba2"> </div>
		 </li>

No entiendo el problema. Yo lo veo bien. Tu mismo código pero ordenado:

Código HTML:

<li class="" id="li_12">
<label class="description" for="element_12">Autors de l'article</label>
<div id="prueba">
	<select class="element select medium" id="autor" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<a href="#" id="mascampos">Más campos</a>
	<select class="element select medium" id="autor0" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor1" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor2" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor3" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
</div>
<div id="prueba2">
</div>
</li>

Para mi está perfecto.

Widrings · #13 (**permalink**) 31/03/2011, 11:33

Cita:

Iniciado por Naahuel

No entiendo el problema. Yo lo veo bien. Tu mismo código pero ordenado:

Código HTML:

<li class="" id="li_12">
<label class="description" for="element_12">Autors de l'article</label>
<div id="prueba">
	<select class="element select medium" id="autor" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<a href="#" id="mascampos">Más campos</a>
	<select class="element select medium" id="autor0" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor1" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor2" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
	<select class="element select medium" id="autor3" name="autor">
		<option value="0" selected="selected">Selecciona un investigador de la llista...</option>
		<option value="19">Hola</option>
	</select>
</div>
<div id="prueba2">
</div>
</li>

Para mi está perfecto.

Disculpa, lo vi al postear justo que estaba bien, no me había dado cuenta. Funciona perfecto. Muchísimas gracias por tu ayuda!

Dany_s · #14 (**permalink**) 01/04/2011, 05:55

con el método serialize te forma el query string

en tu campo que se va a duplicar lo haces como array name="opcion[]"

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
 
        $(function(){
            fila = $("#prueba").html();
            $("#mascampos").click(function(){
                $("#prueba").append( fila );
            });
 
            $('#submit').click( function(){
                alert ($('select').serialize());
            });
        });
 
        </script>
    </head>
    <body>
 
    <div id="prueba">
        <div class="fila">
            <select name="opcion[]">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </div>
    <a href="#" id="mascampos">Agregar</a>
    <input id="submit" type="submit" value="Enviar">
 
    </body>
</html>