jQuery: Problemas para contenido cargado por post

[jesusjj]

Buenos días:

Estoy haciendo una parte de una web en el que el intercambio de páginas lo devuelvo por post para agregar efectos 'fade' al pasar de una a otra.

Para esto, en el menú llamo a una función en javascript, que recoge unos parámetros para hacer el post a una página php que devuelve un include, que cargo como html en una capa:

Código Javascript:

function getInfo(liId) {
    var capaInfo = $("#cp_detInfo");
 
    $.post('content/includes/php/getInfo.php', { pag: 'info', datos: liId },
        function(data){
            $(capaInfo).hide()
                       .html(data)
                       .fadeIn(2500);
        }
    );
}
 

Código PHP:

if(isset($_POST['pag']) && $_POST['pag']=='info') {
    if(isset($_POST['datos'])) {
        $datos = $_POST['datos'];
 
        switch ($datos) {
           case 'i_gral'    : include("modules/modInfo.inc.php");     break;
           case 'i_gral'    : include("modules/modInfo.inc.php");     break;
           case 'i_finca'   : include("modules/modFinca.inc.php");    break;
           case 'i_contacto': include("modules/modContacto.inc.php"); break;
           case 'i_otra'    : include("modules/modOtra.inc.php");     break;
           default          : include("modules/modInfo.inc.php");     break;
        }
    }else{
        echo "no se ha recibido el identificador";
    }
}else{
    echo "error en la llamada asíncrona";
}
 

El tema está que para este contenido cargado, no me funcionan después los eventos o comprobaciones jQuery.

Por ejemplo, para el formulario de contacto, en vez de un captcha, en teoría, debería cargar todos los campos input desahbilitados, para luego, tras pulsar en un botón, habilitar de nuevo los campos y agregar un campo hidden de control. Sin embargo, el formulario aparece ya con todos los campos activos y el click sobre el 'botón activador' no 'enlaza' con su funcionalidad jQuery. La primera parte, la de los campos deshabilitados me preocupa menos, porque en vez de bloquearlos mediante jQuery, lo haría directamente en el html, pero el resto de funcionalidad no sé cómo recuperarla.

Código Javascript:

$("#contacto :input").attr("disabled", true);
 
    var campoHidden = '<input type="hidden" id="f_contacto" name="f_contacto" value="ok" />';
    
    $("#padlock").click(function(){
       $("#contacto :input").attr("disabled", "");
         $("#contacto").append(campoHidden);
         $("#f_unlock").fadeOut();
    });
 

¿Qué podría hacer para que no pierda esta funcionalidad?

Muchas gracias.

Saludos

[masterpuppet]

Que tal jesusjj,

El problema es que al momento de aplicar los eventos, los elementos no estan en el DOM, lo estaran mas adelante cuando los cargues con AJAX, deberias utilizar live y ajustar algo el código, en getInfo deshabilitar los inputs:

Código Javascript:

function getInfo(liId) {
    var capaInfo = $("#cp_detInfo");
 
    $.post('content/includes/php/getInfo.php', { pag: 'info', datos: liId },
        function(data){
            $(capaInfo).hide()
                       .html(data)
                       .fadeIn(2500)
                       .find(':input').attr('disabled', true);
        }
    );
}
 

y a través de live, añadir los eventos:

Código Javascript:

var campoHidden = '<input type="hidden" id="f_contacto" name="f_contacto" value="ok" />';
 
$("#padlock").live('click', function(){
    $("#contacto :input").attr("disabled", "");
    $("#contacto").append(campoHidden);
    $("#f_unlock").fadeOut();
});
 

Saludos.

[jesusjj]

Muchas gracias, esta parte ha funcionado perfectamente, ahora surge el problema en el submit, ya que no lo coge el plugin validate, pero creo que el submit, no se puede cargar con el método live().

De momento no he definido ningún action a ver si conseguía validarlo, en caso contrario, cambiaré y verificaré por php.

Saludos.

[jesusjj]

Buenas tardes:

No he tenido mucho tiempo de hacer pruebas con la validación, pero las que hice, no conseguí que pasará por ella, ni cambiando el submithandler, ni cambiando el botón submit, por uno normal para capturar el onclick, etc.

¿Alguien sabría cómo se podría validar el formulario cargado mediante ajax con algo equivalente a live()?

Muchas gracias.

Saludos.

[jesusjj]

Iniciado por jesusjj

Buenas tardes:

No he tenido mucho tiempo de hacer pruebas con la validación, pero las que hice, no conseguí que pasará por ella, ni cambiando el submithandler, ni cambiando el botón submit, por uno normal para capturar el onclick, etc.

¿Alguien sabría cómo se podría validar el formulario cargado mediante ajax con algo equivalente a live()?

Muchas gracias.

Saludos.

RESUELTO

Al final no era muy complejo, lo copio por si le sirve a alguien.

Código HTML:

<form id="contacto" action="" method="">
        <legend>D&eacute;janos tus datos de contacto</legend>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
              <td><label for="nombre">Nombre:</label></td>
              <td><input type="text" id="nombre" name="nombre" disabled="disabled" /></td>
          </tr>
          <tr>
            <td><label for="tfno_mv">Tel&eacute;fono M&oacute;vil:</label></td>
            <td><input type="text" id="tfno_mv" name="tfno_mv" disabled="disabled" /></td>
          </tr>
          <tr>
            <td><label for="tfno_fj2">Tel&eacute;fono Fijo:</label></td>
            <td><input type="text" id="tfno_fj" name="tfno_fj" disabled="disabled" /></td>
          </tr>
          <tr>
            <td><label for="mail">E-mail:</label></td>
            <td><input type="text" id="mail" name="mail" disabled="disabled" /></td>
          </tr>
          <tr>
            <td valign="top"><label for="mensaje">Mensaje:</label></td>
            <td valign="top"><textarea id="mensaje" name="mensaje" cols="5" rows="3" disabled="disabled"></textarea></td>
          </tr>
          <tr>
            <td colspan="2" class="txt_center">
                <input type="submit" id="enviar" name="enviar" class="bt_submit" value="enviar" disabled="disabled" />
                <input type="reset" id="limpiar" name="limpiar" value="limpiar" disabled="disabled" />
            </td>
          </tr>
        </tbody>
        </table>
 
        <div class="clear"></div>
</form>
 

Código Javascript:

$(".bt_submit").live('click', function(){
        $("#contacto").validate({
            rules: {
                nombre: {
                    required: true,
                    minlength: 3
                },
                tfno_mv: {
                    required: true,
                    minlength: 9
                },
                mail: {
                    required: true,
                    email: true
                },
                mensaje: {
                    required:true
                }            
            },
            messages: {
                nombre: {
                    required: "El campo nombre es obligatorio",
                    minlength: "La longitud m\u00ednima es de 3 caracteres"
                },
                tfno_mv: {
                    required: "El campo tel\u00e9fono es obligatorio",
                    minlength: "La longitud m\u00ednima es de 9 caracteres"
                },
                mail: {
                    required: "El campo eMail es obligatorio",
                    email: "Por favor, introduzca una direcci\u00f3n de email v\u00e1lida"
                },
                mensaje: {
                    required: "Por favor, introduzca un mensaje"
                }
            }
        });
    });