Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Submit y funcion ajax no funcionan

Estas en el tema de Submit y funcion ajax no funcionan en el foro de Frameworks JS en Foros del Web. Buenas, tengo este ejercicio y por mucho que he probado el ajax no funciona correctamente. lo he revisado muchas veces y no entiendo porqué el ...
  #1 (permalink)  
Antiguo 23/04/2012, 11:56
 
Fecha de Ingreso: octubre-2007
Mensajes: 57
Antigüedad: 17 años, 2 meses
Puntos: 0
Pregunta Submit y funcion ajax no funcionan

Buenas, tengo este ejercicio y por mucho que he probado el ajax no funciona correctamente. lo he revisado muchas veces y no entiendo porqué el ajax no funciona correctamente.

¿será que la función submit es incompatible con la función ajax?

gracias

Código PHP:
<script type="text/javascript">
        $(
document).ready(function(){

           $(
"#f1").submit(function(){

                $.
ajax({
                    
type "POST",
                    
url : $(this).attr("action"),
                    
data : $(this).serialize(),
                    
dataType"html",
                    
beforeSend: function(){
                        $(
"#principal").fadeOut();
                        $(
"#carga").fadeIn();
                    },
                    
success: function(data){
                        $(
"#carga").fadeOut();
                        $(
"#principal").fadeIn();
                        
alert(data);
                    }
                })     

           })
               
        })
    
</script>
</head>
<body>
    <div id="principal">
        
        <form id="f1" method="post" action="procesar.php">
            <label for="idname">Nombre</label> 
            <input type="text" name="idname" id="idname" value="" /> 

            <label for="idemail">E-Mail</label> 
            <input type="text" name="idemail" id="idemail" value="" />
            
            <input type="submit" name="entrar" value="Entrar" /> 
        </form>
    </div>

    <div id="carga">
            <img src="img/ajax-loader.gif" /> Cargando...
    </div>
</body> 
procesar.php

Código PHP:
<?php
if(isset($_POST["entrar"])){
    
$idname $_POST["idname"];
    
$idemail $_POST["idemail"];
    
sleep(2);
    echo 
"$idname datos procesados";
}
?>
  #2 (permalink)  
Antiguo 23/04/2012, 12:54
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 11 meses
Puntos: 14
Respuesta: Submit y funcion ajax no funcionan

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.         $(document).ready(function(){
  3.  
  4.            $("#f1").submit(function(){
  5.  
  6.                 $.ajax({
  7.                     type : "POST",
  8.                     url : $(this).attr("action"),
  9.                     data : $(this).serialize(),
  10.                     dataType: "html",
  11.                     beforeSend: function(){
  12.                         $("#principal").fadeOut();
  13.                         $("#carga").fadeIn();
  14.                     },
  15.                     success: function(data){
  16.                         $("#carga").fadeOut();
  17.                         $("#principal").fadeIn();
  18.                         alert(data);
  19.                     }
  20.                 }); // aca te faltaba el punto y coma      
  21.  
  22.            }); // aca te faltaba el punto y coma
  23.                
  24.         }); // aca te faltaba el punto y coma
  25.     </script>
__________________
http://lucasmg.com.ar
  #3 (permalink)  
Antiguo 23/04/2012, 13:49
 
Fecha de Ingreso: octubre-2007
Mensajes: 57
Antigüedad: 17 años, 2 meses
Puntos: 0
Pregunta Respuesta: Submit y funcion ajax no funcionan

Grcias por la respuesta, pero por mucho punto y coma que ponga sigue igual, no funciona...no recoge los datos de procesar.php e incluso muestra procesar.php como si no hubiese ajax.

si quito del tag form el action y en ajax especifico el archivo sin usar attr, tampoco funciona al hacer submit.

Código PHP:
<form id="f1" method="post">
....

$.
ajax({ 
                    
type "POST"
                    
url "procesar.php",
....... 

es raro porque al usar el plugin validate de jquery si que funciona bien:

Código PHP:
<!DOCTYPE html>
<
html>
<
head>
    <
meta charset="utf-8" />
    <
title>Page Title</title>
    <
style type="text/css" rel="stylesheet">
        
#carga{
            
displaynone;
        }
    </
style>
    <
script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="lib/jquery.validate.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#f1").validate({
                rules: {
                    idname: {
                        required: true
                    },
                    idemail: {
                        required: true
                    }
                },    
                messages: {
                    idname: {
                        required: "Campo requerido"
                    },
                    idemail: "Introduce email",
                } 
            });
               
        })
        
        $.validator.setDefaults({
            submitHandler: function() {
                 $.ajax({
                    type : "POST",
                    url : "procesar.php",
                    data : $("#f1").serialize(),
                    dataType: "html",
                    beforeSend: function(){
                        $("#principal").fadeOut();
                        $("#carga").fadeIn();
                    },
                    success: function(data){
                        $("#carga").fadeOut();
                        $("#principal").fadeIn(1000,function(){
                            alert(data);
                        });
                        
                    }
                })     
            }
        });
    </script>
</head>
<body>
    <div id="principal">
        
        <form id="f1">
            <label for="idname">Nombre (requerido)</label> 
            <input type="text" name="idname" id="idname" value="" /> 

            <label for="idemail">E-Mail (requerido)</label> 
            <input type="text" name="idemail" id="idemail" value="" />
            
            <input class="entrar" type="submit" name="entrar" value="Entrar" /> 
        </form>
    </div><!-- final principal -->
    <div id="carga">
            <img src="img/ajax-loader.gif" /> Cargando...
    </div>

</body>
</html> 
No entiendo porque así si que funciona pero sin usar el plugin validate y usando solo el evento submit no funciona el ajax...
  #4 (permalink)  
Antiguo 25/04/2012, 05:41
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Submit y funcion ajax no funcionan

Hola:

Al pulsar el botón submit se abortan los procesos pendientes (ajax, por ejemplo...), así que una validación que se debe programar con ese evento, permite que ajax funcione.

Si no quieres validar, puedes programar ese evento para que el submit arranque o se cancele después de la respuesta... pero no estoy seguro de que sirva con el modo asincrono.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: ajax, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:42.