Como dice el título, lo que estoy tratando de hacer es tener jQuery para añadir un número de conjuntos de campos extra basado en el valor seleccionado en un cuadro de lista desplegable. Por ejemplo, cuando se carga la página, el menú desplegable tiene un valor predeterminado de 1, y el valor predeterminado fieldset se muestra. Ahora, si el usuario selecciona un valor diferente en el que el desplegable, el número de conjuntos de campos debe ser ajustada en consecuencia, a través de la clonación (supongo que esta sería la mejor solución). He aquí lo que tengo hasta ahora:

Cuadro de lista desplegable código …

<select id="itemCount" name="itemCount">
 <option value="1">1 item</option>
 <option value="2">2 items</option>
 <option value="3">3 items</option>
 <option value="4">4 items</option>
 <option value="5">5 items</option>
 <option value="6">6 items</option>
</select>

… el jQuery cambio oyente …

$(document).ready(function() {
 $("#itemCount").change(function(){
  var itemCountVal = jQuery(this).val();
  $("#item_dup_1").fieldsManage(itemCountVal);
 });
});

… y la función de sí misma (que se basa en realidad en un plugin de jQuery que yo pensaba que era un buen punto de partida para lo que yo necesito):

jQuery.fn.fieldsManage = function (number) {
  var clone,
  objTemplate = source.clone(true),
  source = jQuery(this),
  maxClones = number - 1,
  clones = [];

  if (clones.length < maxClones) {
    while (clones.length < maxClones) {
      clone = objTemplate.clone(true).insertAfter(clones[clones.length - 1] || source);
      clones.push(clone);
    }
  }

  if (clones.length > maxClones) {
    //Fieldsets removal function goes here.
  }
}

El objeto que se está clonado es algo así como <fieldset id="item_dup_1"><input><input><input></fieldset>. Creo que no es necesario para mostrar el código completo.

Esto funciona como un encanto para el primer cambio, pero si el usuario cambia el valor de nuevo, que cuando las cosas van mal, y en lugar de mostrar el número correcto de conjuntos de campos, se muestra más. Parece que se está calculando el número de conjuntos de campos necesarios empezando desde cero, sin tener en cuenta el hecho de que los conjuntos de campos ya se han agregado, y esto es lo que mi problema en realidad es. También tengo una función (no se muestra aquí sólo para mantener la pregunta clara y tan corto como sea posible) que las señales nuevos Identificadores para el clonado fieldset para evitar Identificadores duplicados y que funciona sin problemas.

Estoy convencido de que estoy haciendo algo mal, pero he estado golpeando mi cabeza contra una pared, con esto por dos días, tratando de encontrar lo que es sin suerte alguna manera, cualquier ayuda sería más que apreciado !

Gracias de antemano !

OriginalEl autor Valentin Flachsel | 2009-12-12

2 Comentarios

  1. 6

    No me gusta la solución de Nate B.

    • necesita un contenedor adicional elemento
    • recrea todo, perdiendo así los datos ya introducidos
    • crea un problema de mantenimiento: el lenguaje de marcado html de la fieldset se duplica (de vez en HTML, una vez como cadena para anexar)
    • crea id no válido para los conjuntos de campos (id no puede comenzar con un número)

    Este hace lo que quiere, y similar a lo que hizo. Mantiene sólo el id de atributo de datos en el elemento original (en lugar de mantener a toda la clonación de objetos que se podían utilizar grandes cantidades de memoria). Mantiene todos los valores ya introducido. No recrear todo si cambia, por ejemplo, de 3 a 5. En lugar de eso sólo genera dos nuevos conjuntos de campos. Quita en el orden inverso en que fueron creados.

    jQuery.fn.fieldsManage = function (number) {
        var ele = $(this);
        var clones = ele.data("clones");
        clones = clones ? clones : new Array(ele.attr("id"));
        if (clones.length < number) {
            var clone;
            while(clones.length < number) {
                clone = ele.clone(true);
                var id = clones[0]+clones.length;
                clone.attr("id", id);
                $("#"+clones[clones.length-1]).after(clone);
                clones.push(id);
            }
        } else {
            while(clones.length > number) {
                $("#"+clones.pop()).remove();
            }
        }
        ele.data("clones", clones);
    }
    
    $(document).ready(function() {
        $("#itemCount").change(function() {
            $("#item_dup_1").fieldsManage(this.value);
        });
    });
    Genial, funciona como un encanto ! Que es lo que yo tenía en mente, pero se quedó atascado en el camino. Gracias, muchas gracias.
    Tal vez esto es de conocimiento común, pero he descubierto que si los datos han sido introducidos en los campos de entrada de la fieldset que es clonado antes de cambiar el fieldset recuento de los datos introducidos serán clonadas así. Haciendo un simple clon.encontrar(«input»).each(function(){jQuery(this).val(«»)}); después de que el clon ha sido creado por darle una limpieza clon para trabajar con. Espero que esto le sobra a alguien un par de minutos.
    Bueno, esto es más o menos común de conocimientos y también de la forma clone se supone que funciona. El jQuery clone método utiliza internamente el normal DOM método cloneNode(true). Marque aquí para obtener una descripción sobre cómo se comporta, w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4
    Sí, ahora tiene sentido. Ahora puedo ver cómo esto podría ser útil si uno desea rellenar previamente clonado campos con los valores por defecto – simplemente llenar el objeto que se desea clonar. Bien !

    OriginalEl autor jitter

  2. 0

    ¿Por qué estás clonación en lugar de sólo hacer algo como esto (junto con su actual agente de escucha de eventos)?

    $(".divWhereTheseGo").empty();
    var count = 0;
    while (count < maxItems) {
       $(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>");
       count++;
    }

    La count en el fieldset es cómo usted puede manejar el identificador único problema.

    Esta es sin duda una útil e interesante enfoque aún no lo he pensado, pero he podido ver un problema en la forma de un usuario seleccionando 6 como el fieldset contar y, a continuación, cambiar su mente y sólo querer 4 conjuntos de campos. Cómo se podría ir sobre la eliminación de los dos últimos conjuntos de campos sin hacer un empty() en el recipiente y por lo tanto con el usuario que introduce los datos en los 4 primeros conjuntos de campos en toda la prenda de nuevo ? Hay un opuesto a append() ?
    Haga caso omiso de mi último comentario. Pensar más sobre ello, me di cuenta de que yo podría simplemente busque el último hijo de el contenedor en el que se generan conjuntos de campos de ir y hacer un .remove (). Un millón de gracias !

    OriginalEl autor Nate B

Dejar respuesta

Please enter your comment!
Please enter your name here