[SOLUCIONADO (A lo cutre)]Jquery, Sortable y evento click en formularios

[sumolari]

¡Hola a todos!

Veréis, tengo un problema con Jquery. Os explico. Resulta que tengo un sortable cuyos elementos contienen un formulario. La idea es que al enviar el formulario, se guarden los valores de los campos en una Base de Datos vía AJAX.

El problema que tengo es que Jquery no detecta el evento click ni submit ni ninguno similar dentro de los elementos de un sortable (aunque sean áreas que no se puedan arrastrar).

Entonces se me ha ocurrido probar añadiendo a la etiqueta form el atributo onSumbit, que si bien no es tan accesible como hacerlo mediante Jquery, sí que funciona. Ahora bien, lo que no sé cómo hacer es serializar el contenido del formulario para enviarlo al script PHP que guarda los datos.

Puedo guardar las posiciones del sortable cada vez que se modifican usando:

Código Javascript:

update: function() {
            $(".add_form", this).show(500);
            $(".pre_dropped", this).hide(500);
            $(".post_dropped", this).show(500);
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
            var wp_carousel_update_url = $("#current_url_js").attr("href");
            $.post(wp_carousel_update_url, order, function(theResponse){
                $("#demo_response").html(theResponse);
            });
        }
 

Ahora bien, el formulario no tiene ninguna ID (los elementos se añaden al sortable a través de un draggable que clona los elementos al arrastrarlos, con lo cual se pueden añadir infinitos elementos al sortable - que es parte de la idea - pero no puedo asignar una ID porque entonces habría varios elementos con la misma ID), y no tengo ni idea de cómo serializar el contenido del formulario sin poder usar como selector ninguna ID.

Supongo que os habréis dado cuenta ya de que controlo más bien poco Javascript, así que estoy totalmente atascado.

He probado con la siguiente función Javascript:

Código Javascript:

function update_ajax_item() {
    jQuery(function($){
        $(".form_actions").css('backgroundColor', 'black'); // Cambia el color de todos los formularios
        var order = $(this).serialize() + '&action=updateRecordsListings'; // Devuelve &action=updateRecordsListings
        $(this).css('color', 'white'); // No hace nada de nada
        alert(order); // Devuelve &action=updateRecordsListings
    });
    return false;
}
 

Código HTML:

<form method="post" class="ajax_form" onsubmit="return update_ajax_item()">
<!-- formulario -->
</form>
 

Siempre puedo olvidarme del AJAX y obligar a enviar el formulario y cargar de nuevo la página, pero me da lástima no poder hacerlo todo con AJAX. Además, seguro que es posible hacer esto de algún modo, al fin y al cabo WordPress tiene algo muy similar en el gestor de Widgets, sólo que no tengo suficientes conocimientos de Javascript como para poder comprender todo el código y encontrar lo que hace que funcione como funciona.

También podría probar a guardar los cambios cada X segundos, sólo que tampoco sé cómo hacer esto ni cómo serializar los datos.

¡Muchas gracias por adelantado!

SOLUCIONADO: Veréis, como no conseguía hacerlo por esta vía se me ha ocurrido otra forma de plantearlo, y es que cada vez que se envía un formulario del sortable, se guarden todos los formularios del sortable (que tienen una clase en común). Mediante la función each de Jquery he recorrido los formularios y he creado una matriz para $_POST que me permitiese enviar todos los datos juntos, para que luego mi script PHP los transforme en matrices más simples y las añada en la Base de Datos (pero eso no viene al tema ahora mismo).

El código que he utilizado es:

Código Javascript:

function update_ajax_item() {
    jQuery(function($){
        var update_url = $("#current_url_js").attr("href"); // Saco la URL del script PHP actualizador
 
        var order = ''; // Inicializo la orden que enviaré a mi script
        $(".ajax_form").each(function(index) { // Recorro todos los formularios del sortable
            if (index != 0) // Verifico que no es el elemento que hay en el draggable, el que se clona para añadir más elementos al sortable
            {
                if (index != 1) // Verifico que no es el primer elemento
                {
                    order = order + '&'; // Añado un & para separar campos de la matriz
                }
                order = order + 'iteration_' + index + '=' + base64_encode($(this).serialize()); // Creo una matriz serializada (la funcion de serializacion la he definido por separado) para evitar problemas
            }
        });
        order = order + '&action=updateRecordsListings&internal_type=serialized'; // Añado un par de indicadores para mi script PHP, como la accion a realizar y un aviso de que esta serializado el contenido 
        
        $.post(update_url, order, function(theResponse){ // Envio la orden
            $("#demo_response").html(theResponse); // Imprimo la respuesta del script
        });
        
    });
    return false; // Devuelvo false para no salirme de la pagina
}
 

Y listo, de momento envia los datos correctamente. Aunque no me gusta mucho la solución, seguro que se puede hacer de otro modo.