Envio de datos a la base de datos con AJAX

[Drakaris]

Hola. quiero enviar mis datos del formulario a mi DDBB sin recargar la página, para eso necesito AJAX, me busque un tutorial por YouTube y lo hice pero pasa una cosa, y es que me lo ejecuta bien pero no me ejecuta el afterSend. (La funcion de afterSend es que me muestre un popup diciendome que esta guardado en la DDBB.)

Código [Seleccionar] Expandir


 $(document).ready(function(){
   $("#enviar").click(function(){
     var datos = $("#demo").serialize();
     $.ajax({
       type:"POST",
       url:"verificar_captcha.php",
       data:datos,
       afterSend:function(){
         $(".popup_correctoevento").delay(500).slideDown("slow");
         $(".popup_correctoevento").delay(1000).slideUp("slow");
       }
     })
   });
 });


verificar_captcha.php

Código [Seleccionar] Expandir


<?php
  session_start( ); // allows us to retrieve our key form the session
  /* 
  First encrypt the key passed by the form, then compare it to the already encrypted key stored inside our session variable
          */
  if( md5( $_POST[ 'code' ] ) != $_SESSION[ 'key' ] ) {
  ?>
 <script>
   $(document).ready(function(){
       $(".popup_errorcaptchaevento").delay(500).slideDown("slow");
       $(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
   });
 </script>
 <?php
  } else {
    include('anadirevento.php');
  }
?>


anadirevento.php

Código [Seleccionar] Expandir


<?php
$servername = "private";
$username = "private";
$password = "private";
$dbname = "private";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Error: " . $conn->connect_error);
} 
$fecha = $_POST['databox'];
$tipoEvento = $_POST['tipoEventos'];
$otro = $_POST['otroTipoEventos'];
$materia = $_POST['materiabox'];
$asunto = $_POST['asuntobox'];
$tarea = $_POST['tareabox'];
$evento = $_POST['eventobox'];
mysqli_escape_string($_POST['databox']);
mysqli_escape_string($_POST['tipoEventos']);
mysqli_escape_string($_POST['otroTipoEventos']);
mysqli_escape_string($_POST['materiabox']);
mysqli_escape_string($_POST['asuntobox']);
mysqli_escape_string($_POST['tareabox']);
mysqli_escape_string($_POST['eventobox']);

$sql = " INSERT INTO 1esoacalendar (fecha, tipoevento, otro, materia, asunto, tarea, evento) VALUES ('$fecha','$tipoEvento','$otro','$materia','$asunto','$tarea','$evento')";

if ($conn->query($sql) === TRUE) {
?>
<script>
 $(document).ready(function(){
   $(".popup_correctoevento").delay(500).slideDown("slow");
   $(".popup_correctoevento").delay(1000).slideUp("slow");
 });
</script>
<?
}else{
?>
<script>
 $(document).ready(function(){
   $(".popup_errorevento").delay(500).slideDown("slow");
   $(".popup_errorevento").delay(1000).slideUp("slow");
 });
</script>
<?
}
$conn->close();
?>


Porque no me ejecuta el afterSend?

PD:
Ah!!  Y antes puse success y no afterSend sin ninguna funcion, y me ejecutaba el anadirevento.php pero sin los scripts.¿Porque?

Gracias de antemano.

[Rave1996]

Hola,
no existe afterSend con la librería jQuery.

Sin embargo, puedes utilizar... complete o done, dependiendo de para que lo necesites.

Un pequeño ejemplo con done...

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$('#send').click(function(e){
$.ajax({
type: 'POST',
url: 'ejemplo.php',
data: { user: $('#user').val(), pass: $('#pass').val() }
}).done(function(response){
if( response == "ok" )
window.location="ejemplo2.php";
});
});
});


y la documentación de la libreria.

Nota: Prueba sustituyendo el $(document).ready... del verificar_catpcha.php por este script

Código (javascript) [Seleccionar] Expandir


$(function(){
$(".popup_errorcaptchaevento").delay(500).slideDown("slow");
$(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
});


Saludos.

[srWhiteSkull]

, y me ejecutaba el anadirevento.php pero sin los scripts.¿Porque?

Claro, el js que envías primeramente no lo estás tratando y segundo tal como lo tienes lo envías desde php como html. Lo ideal sería que enviaras solo js y la respuesta desde el cliente lo ejecutaras con la función eval() que toma como argumento un string que contenga js y lo ejecuta.

De todas formas, si pretendes hacer lo que citabas en el otro hilo, simplemente tienes qur poner un setTimeout() que cada tiempo haga una consulta por ajax al servidor y el servidor devuelva los datos actualizados, y luego ejecute nuevamente el setTimeout(). Se podría usar setInterval pero tendrías que tener cuidado de no solapar las consultas.

pd intenta prescindir de jquery y usa js para que aprendas, es un consejo.

[Drakaris]

Hola,
no existe afterSend con la librería jQuery.

Sin embargo, puedes utilizar... complete o done, dependiendo de para que lo necesites.

Un pequeño ejemplo con done...

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$('#send').click(function(e){
$.ajax({
type: 'POST',
url: 'ejemplo.php',
data: { user: $('#user').val(), pass: $('#pass').val() }
}).done(function(response){
if( response == "ok" )
window.location="ejemplo2.php";
});
});
});


y la documentación de la libreria.

Nota: Prueba sustituyendo el $(document).ready... del verificar_catpcha.php por este script

Código (javascript) [Seleccionar] Expandir


$(function(){
$(".popup_errorcaptchaevento").delay(500).slideDown("slow");
$(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
});


Saludos.

Hola Rave1996 he probado con este código:

Código [Seleccionar] Expandir


  $(document).ready(function(){
    $("#enviar").click(function(){
      var datos = $("#demo").serialize();
      $.ajax({
        url: 'verificar_captcha.php',
        type: 'POST',
        data:datos,
      })
      .done(function(res) {
        if (res != "ok") {
          $(".popup_errorcaptchaevento").delay(500).slideDown("slow");
          $(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
        }else{
          alert("hola");
        }
      })
      return false;
    });
  });


Y no me ejecuta bien la declaración if else, solamente me lo ejecuta el if pero no el else tanto si el

Código [Seleccionar] Expandir

res no es igual al

Código [Seleccionar] Expandir

ok como si lo es.

Porque no me ejecuta el else?

verificar_captcha.php:

Código [Seleccionar] Expandir


       <?php

session_start( ); // allows us to retrieve our key form the session

/* 

First encrypt the key passed by the form, then compare it to the already encrypted key we have stored inside our session variable

*/

if( md5( $_POST[ 'code' ] ) != $_SESSION[ 'key' ] ) {
?>
<script>
  $(function(){
    $(".popup_errorcaptchaevento").delay(500).slideDown("slow");
    $(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
  });
</script>
<?
}
?>


Gracias de antemano.

[EFEX]

Obviamente no tienes ni idea de lo que estas haciendo, no entiendes tampoco los conceptos, ni javascript ni jquery ni php, todo tiene una funcion logica aqui. Copiando, pegando codigo y luego refrescando la pagina no va a funcionar si no sabes lo que haces, tomate tu tiempo para aprender.

[Drakaris]

Obviamente no tienes ni idea de lo que estas haciendo, no entiendes tampoco los conceptos, ni javascript ni jquery ni php, todo tiene una funcion logica aqui. Copiando, pegando codigo y luego refrescando la pagina no va a funcionar si no sabes lo que haces, tomate tu tiempo para aprender.

Hola, es verdad, no entendía lo que hacia así que me tomé mi tiempo, es que las prisas...

Y ahora lo entiendo. Este código:

Código [Seleccionar] Expandir


<script type="text/javascript">
$(document).ready(function() {
$("#enviar").click(function(){
var datos=$('#demo').serialize();
$.ajax({
type:"POST",
url:"anadirevento.php",
data:datos,
success:function(r){
if (r==1){
$(".popup_correctoevento").delay(500).slideDown("slow");
$(".popup_correctoevento").delay(1000).slideUp("slow");
}else{
$(".popup_errorevento").delay(500).slideDown("slow");
$(".popup_errorevento").delay(1000).slideUp("slow");
}
}
});
return false;
});
});
</script>

anadirevento.php

Código [Seleccionar] Expandir


<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Error: " . $conn->connect_error);
} 
$fecha = $_POST['databox'];
$tipoEvento = $_POST['tipoEventos'];
$otro = $_POST['otroTipoEventos'];
$materia = $_POST['materiabox'];
$asunto = $_POST['asuntobox'];
$tarea = $_POST['tareabox'];
$evento = $_POST['eventobox'];
mysqli_escape_string($_POST['databox']);
mysqli_escape_string($_POST['tipoEventos']);
mysqli_escape_string($_POST['otroTipoEventos']);
mysqli_escape_string($_POST['materiabox']);
mysqli_escape_string($_POST['asuntobox']);
mysqli_escape_string($_POST['tareabox']);
mysqli_escape_string($_POST['eventobox']);

$sql = " INSERT INTO 1esoacalendar (fecha, tipoevento, otro, materia, asunto, tarea, evento) VALUES ('$fecha','$tipoEvento','$otro','$materia','$asunto','$tarea','$evento')";
echo mysqli_query($conn,$sql);
$conn->close();
?>


Eso ya lo conseguí, pero realmente no quería hacer eso, sino hacer una función que cuando clique en el boton #enviar me haga una condición if que sí algún campo de texto está vacío me muestre el pop-up que informe de algún campo vacío y sino que me ejecute dos funciones AJAX, me informe y creo que se hace con la función when(), por la cual cosa hice esto:

Código [Seleccionar] Expandir


$(document).ready(function() {
var data1 = $("#data");
var tipoEventos1 = $("#tipoEventos");
var materia1 = $("#materia");
var tarea1 = $("#tarea");
var captcha1 = $("#captcha");
function validar12(resp){
         if (resp!=1){
           $(".popup_errorcaptchaevento").delay(500).slideDown("slow");
           $(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
         }
       }
       function send(r){
         if(r==1){
           $(".popup_correctoevento").delay(500).slideDown("slow");
           $(".popup_correctoevento").delay(1000).slideUp("slow");          
         }else{
           $(".popup_errorevento").delay(500).slideDown("slow");
           $(".popup_errorevento").delay(1000).slideUp("slow");            
         }
}
$("#enviar").click(function(){
if(data1.val() === "" || tipoEventos1.val() === "" || materia1.val() === "" || tarea1.val() === "" || captcha1.val() === ""){
$(".popup_validar").delay(500).slideDown('slow');
$(".popup_validar").delay(1000).slideUp('slow');
}else{
$.when($.ajax("verificar_captcha.php"),$.ajax("anadirevento.php"))
.then(validar12(),send());
}
 return false;    
});
});


Código [Seleccionar] Expandir


      <?php
          session_start( ); // allows us to retrieve our key form the session
          /* 
          First encrypt the key passed by the form, then compare it to the already encrypted key we have stored inside our session variable
          */
          echo md5($_POST["code"]) == $_SESSION["key"];
        ?>

Cuando dejo un input vacío me lanza el popup de advertencia bien, y cuando relleno todo, y doy click en enviar, me lannza el popup de error de captcha, siempre, auque el captcha lo tenga bien y además no me guarda los datos en la base de datos.

Nosé donde esta el problema, ¿Es lógico lo que he planteado?.

PD: Además leí el api de jquery de la función when() y, si no recuerdo mal, creo que decía que solamente en la parte de .then(),se ejecuta la primera función, y si es así nosé como hacer para que me ejecute ambas.

Gracias de antermano.

[EFEX]

Código (javascript) [Seleccionar] Expandir


...
$.when($.ajax("verificar_captcha.php"),$.ajax("anadirevento.php"))
.then(validar12(),send());
...

Creo que el error se debe a validar12(), debe pasarse como una referencia a una funcion(validar12) en .then y como es una funcion sin argumentos siempre se cumplira la condicion.

Código (javascript) [Seleccionar] Expandir


...
.then(validar12);  //Nota que es sin los parentesis.
...

Creo que no es valido usar send() despues de validar12, segun la documentacion la sagunda funcion se reserba en caso de que alguno de las peticiones ajax no pudieron realizarse.

Ademas, deberias plantear si de verdad necesitas un captcha, por que estas tratando de validar el captcha pero a la vez subes la consulta, osea que el captcha no sirve para nada. Fijate en la consola, F12 > Network, veras como se disparan las dos consultas ajax cuando apretas el boton. Deberias ser.. verificar campos vacios > verificar captcha > añadir evento.

[Drakaris]

Código (javascript) [Seleccionar] Expandir


...
$.when($.ajax("verificar_captcha.php"),$.ajax("anadirevento.php"))
.then(validar12(),send());
...

Creo que el error se debe a validar12(), debe pasarse como una referencia a una funcion(validar12) en .then y como es una funcion sin argumentos siempre se cumplira la condicion.

Código (javascript) [Seleccionar] Expandir


...
.then(validar12);  //Nota que es sin los parentesis.
...

Creo que no es valido usar send() despues de validar12, segun la documentacion la sagunda funcion se reserba en caso de que alguno de las peticiones ajax no pudieron realizarse.

Ademas, deberias plantear si de verdad necesitas un captcha, por que estas tratando de validar el captcha pero a la vez subes la consulta, osea que el captcha no sirve para nada. Fijate en la consola, F12 > Network, veras como se disparan las dos consultas ajax cuando apretas el boton. Deberias ser.. verificar campos vacios > verificar captcha > añadir evento.

Hola. Ya lo conseguí, era más fácil de lo que creía, al final no lo hice con when(), así que lo hice con condiciones if else, este es el código:

Código [Seleccionar] Expandir


$(document).ready(function() {
$("#enviar").click(function(){
var datos=$('#demo').serialize();
var fecha2 = $("#data");
var tipo2 = $("#tipoEventos");
var otro2 = $("#otroTipoEventos");
var materia2 = $("#materia");
var tarea2 = $("#tarea");
$.ajax({
        type:"POST",
        url:"verificar_captcha.php",
        data:datos,
        success:function(resp){
          if (resp!=1){
            $(".popup_errorcaptchaevento").delay(500).slideDown("slow");
            $(".popup_errorcaptchaevento").delay(1000).slideUp("slow");
          }else{
            $(".popup_correctoevento").delay(500).slideDown("slow");
            $(".popup_correctoevento").delay(1000).slideUp("slow");
          $.ajax({
          type:"POST",
          url:"anadirevento.php",
          data:datos,
          success:function(r){
          if (r!=1){
              $(".popup_errorevento").delay(500).slideDown("slow");
              $(".popup_errorevento").delay(1000).slideUp("slow");
          }
          }
          })
          }
        }
})
return false;
});
});

No puse el popup de aviso de campos vacíos, ya que no me lo ejecutaba, y además no era de gran importancia, era más un detalle.

Gracais por vuestra atención.