0

Estoy aprendiendo a usar Ajax , así que realicé este código de práctica, el problema que me he encontrado es que no muestra mi notificación, cuando usé un "Alert" lo mostraba sin problema, pero ahora decidí usar el plugin "toastr" y ahora no lo muestra y no entiendo porque. Alguien podría decirme en que estoy fallando aún soy un aprendíz de ajax y jquery.

parte del código html y ajax

<form id="frm" method="post">

  ADIVINAR PALABRA  <br>
  <input type="text" id="palabra" name="palabra" class="form-control" required>  
 <button type="submit" id="ingresar">ADIVINAR</button>

</form>

<script type="text/javascript">
    $(document).ready(function(){

      $('#ingresar').click(function(){
        var palabra = $('#palabra').val();
            $.ajax({
              method:"POST",
              url:'peticion.php',
              data:{palabra:palabra},
                })
              .done(function(msg){
                  if (msg == 'OK') {

                  toastr.success("ADIVINASTE", "Exito")

                  } else{

                  toastr.error("NO ACERTASTE", "Fallido");

                  }
              })
              .fail( function (  jqXHR, textStatus, errorThrown ) {
                  alert( "Request failed: " + textStatus );
              });
    });
  });

</script>

parte del código php

$palabra=$_POST['palabra'];


  if ($palabra == "carlos") {
      echo "OK";
  }
5
  • Ese es todo tu codigo? En donde incluyes la libreria toastr?
    – alanfcm
    el 13 abr. 2018 a las 15:33
  • Bienvenido @carlos jose para entender mejor el funcionamiento del sitio te invito a dar recorrido de bienvenida el 13 abr. 2018 a las 15:33
  • Asegúrate que toasr funciona, revisa los registros de error en la cónsola de depuración de javascript.
    – track3r
    el 13 abr. 2018 a las 15:43
  • Hola a todos, Gracias por tomarse la molestia de tratar de ayudarme, la librerías las incluí en el head , tanto el jquery como el script y css de toastr, también revise la consola y todo funciona bien, quería decirles que la notificación se ejecuta perfecto cuando el campo se envía vació esto es por la "PAUSA" causada por el mensaje del required, soy un novato en Ajax pero podría ser que al recargar tan rápido, no permita que se ejecute la notificación?. gracias a todos de antemano. el 13 abr. 2018 a las 16:06
  • Es lo mas seguro,@carlosjose, aun asi puedes colocar luego del .done un console.log(msj) a ver que estas obteniendo el 13 abr. 2018 a las 18:04

1 respuesta 1

1

Te recomendaría agregar e.preventDefault() esto detiene la acción predeterminada de un elemento.

Ejemplo:

  • Impedir que un botón de enviar envíe un formulario
  • Evite que un enlace siga la URL

e.preventDefault()

<form id="frm" method="post">
  ADIVINAR PALABRA  <br>
  <input type="text" id="palabra" name="palabra" class="form-control" required>  
  <button type="submit" id="ingresar">ADIVINAR</button>
</form>

<script type="text/javascript">
    $(document).ready(function(){
      $('#ingresar').click(function(e){
        e.preventDefault();
        var palabra = $('#palabra').val();
            $.ajax({
              method:"POST",
              url:'ejemplo.php',
              data:{palabra:palabra},
                })
              .done(function(msg){
                  if (msg == 'OK') {

                  toastr.success("ADIVINASTE", "Exito")

                  } else{

                  toastr.error("NO ACERTASTE", "Fallido") //Eliminar el punto y coma que te sobraba

                  }
              })
              .fail( function (  jqXHR, textStatus, errorThrown ) {
                  alert( "Request failed: " + textStatus );
              });
    });
  });
</script>
1
  • whoaaa!, muchisima gracias amigo, a un soy un novato y desconocía de esa opción. muchas gracias! el 14 abr. 2018 a las 1:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.