Implementación de formToWizard de JQuery en formulario dinámico

[Gguer]

Hola

Así es. Estoy usando el plugin para JQuery, formToWizard, el cual divide los formularios en secciones de acuerdo a los fieldset existentes, mostrando una sección a la vez, con el fin de hacerle al usuario la navegación más cómoda.

Con la funcionalidad de este plugin no tengo problemas, todo va como debería. La cuestión es que mi formulario no tendrá secciones fijas, sino que a partir de las que ya tiene definidas el usuario podrá agregar más secciones. Esto es porque se realizan registros de jugadores y he querido que cada uno sea por separado. Al principio tendrá que registrar 5, como mínimo, pero puede extenderse hasta 10 máximo.

le doy la posibilidad al usuario de crear el nuevo grupo fieldset con los campos correspondientes. Esto lo hago con DOM (no sé si se pueda con JQuery, soy muuuy nuevo con este framework), pero cuando quiero llamar a la función que genera que el formulario se divida, efectivamente carga la nueva sección, pero hace un registro repetido, es decir, muestra las secciones dos veces.

Dos imágenes para aclarar esto:

Esta es la vista inicial, antes de hacer un nuevo registro


Aquí es cuando falla, porque los titulos de las secciones se crean dos veces


El código con el que llamo a esta función es el siguiente:

Código Javascript:

//Esto es al inicio del archivo que contiene el código de esta función 
$(document).ready(function(){
    $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' })
 
//Esto siguiente lo coloco al final de la función que genera el nuevo fieldset
 $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' }) 
});
 

Para ser sincero no conozco la sintaxis muy bien de JQuery, por lo que no sé cómo hacer para que únicamente cargue los fieldset añadidos, no todo el contenido del form por segunda vez.

Este es el código del plugin

Código Javascript:

/* Created by jankoatwarpspeed.com */
 
$(document).ready(function(){
    $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' })
});
(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 
        
        var element = this;
 
        var secciones = $(element).find("fieldset");
        var count = secciones.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();
 
        // 2
        $(element).before("<ul id='secciones'></ul>");
 
        secciones.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");
 
            // 2
            var name = $(this).find("legend").html();
            $("#secciones").append("<li id='tituloSeccion" + i + "'>" + (i + 1) + "<span>" + name + "</span></li>");
 
            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });
 
        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Anterior</a>");
 
            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }
 
        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Siguiente ></a>");
 
            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }
 
        function selectStep(i) {
            $("#secciones li").removeClass("current");
            $("#tituloSeccion" + i).addClass("current");
        }
 
    }
})(jQuery);
 

Bueno espero haber sido claro y que alguien tenga alguna propuesta para esta cuestión, un saludo.

[mayid]

Primero, decir que esto y esto son equivalentes:

(function($) {})

$(document).ready(function(){})

Es decir, podes mezclar todo el codigo en uno solo de esos contenedores (similares a window.onLoad)

Segundo, no entendí por que ponías dos veces esto:
$("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' })

Pero si de verdad necesitas llamarlo dos veces... por que no encapsularlo en una función?

Mi respuesta es generica, pero es que es mucho para mi. Hay alguna pregunta puntual que pueda responderte?

[Gguer]

Hola. Te agradezco tu respuesta.

La primera vez que llamo a la función es para que al incio se generen las divisiones de mi formulario cuando se ejecuta la página. La segunda vez la llamo cuando creo otro grupo de campos envueltos con fieldset, y la ejecuto porque quiero que el nombre de las secciones se actualice y también agregue el nuevo fieldset en esa divisiòn.

La cuestiòn que me ocupa es que quiero agregar el nuevo fieldset a ese grupo pero no tengo claro còmo, o sea, llamar a la funciòn que divide a los fieldset pero no sè còmo saber si ya se està mostrando para que sòlo genere la nueva secciòn y no también los botones de anterior y siguiente

No sè si con todo esto me haya explicado, creo que està un poco revuelto.
Agradezco su ayuda.
Saludos

[mayid]

Podes elegir un elemento y aplicarle .size() o .length() para saber si es mayor que 0. Es decir, para saber si existe.

if ( $("#elemento").size() > 0 ) { // seguimos adelante

} else {}

[Gguer]

Pues te cuento que ya me metí más con JQuery. Ya ví que sí se pueden crear elementos con DOM y JQuery; y para variar, está bastante fácil.

Para el caso que ahora tengo, yo creo que habría que eliminar lo que la función creó previamente y cargarlo de nuevo. Pensando en el ejemplo que me comentas, creo que seguiría en lo mismo, porque si existe de cualquier manera tendría que ejecutarla y generaría otra vez cada elemento, en lugar de borrarlo y crearlo de nuevo. Exacto, creo que eso es lo que necesito, borrar y recrear.

Qué opinan? Eso podría ser una solución? La cosa es cómo!
Saludos

[mayid]

.remove() quita elementos específicos

.html() reemplaza el contenido existente.