6

Tengo un error al enviar datos por ajax me marca un error en la función $.ajax() pero ya revise la documentación y el código esta bien.

Este error me marca

status.js:29 Uncaught TypeError: $.ajax is not a function
at HTMLFormElement. (status.js:29)
at HTMLFormElement.dispatch (jquery-3.2.1.js:3)
at HTMLFormElement.q.handle (jquery-3.2.1.js:3)

$('#formularioAgregar').submit(function(event) {
    	  event.preventDefault();
  var frm= $( this ).serialize();
  console.log(frm);
  	$.ajax({
  method: "POST",
  url: "some.php",
  data: frm
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  </head>
  <body>

 <button type="button" id="nuevo-producto" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">AGREGAR</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Registra un Status</h3>
  </div>
      <div class="modal-body">
        <form id="formularioAgregar" method="post">
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">STATUS:</label>
            <input type="text" required="required" name="status"  id="status" maxlength="100"/>
          </div>
          <div class="modal-footer">
            <button type="submit" name="enviar" id="agregar" class="btn btn-primary">Agregar</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="bootstrap/jquery-3.2.1.js"></script>
    <script src="bootstrap/cloudflare.js"></script>
    <script src="bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="js/status.js"></script>
  </body>
</html>                                                                                                                                                                                                                                                   
                           
                          

3
  • Que error te sale ?
    – Elmer
    Commented el 15 ago. 2017 a las 3:03
  • @ELM status.js:29 Uncaught TypeError: $.ajax is not a function at HTMLFormElement.<anonymous> (status.js:29) at HTMLFormElement.dispatch (jquery-3.2.1.js:3) at HTMLFormElement.q.handle (jquery-3.2.1.js:3) Commented el 15 ago. 2017 a las 3:18
  • Es por la versión del JQuery, a mí igual me dio ese error y era por eso. Commented el 13 jun. 2018 a las 4:12

4 respuestas 4

15

Si bien la respuesta aceptada puede solucionar el problema en cuestión, bajar de versión de jQuery no es lo mas óptimo, bajar de versión de nada sería lo mas optimo en la mayoría de los casos, las actualizaciones arreglan varias cosas, entre ellas problemas de seguridad.

Sí, el problema es la versión de jQuery, pero la versión 3.x tiene dos tipos:

  • La versión slim
  • La versión normal

Si vemos en el código de la versión slim, podremos encontrar lo siguiente (truncado para su mejor lectura):

jQuery JavaScript Library v3.3.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,
-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,
-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,
-effects/animatedSelector

Osea es todo jQuery excepto ajax, y otras funciones relacionadas con ajax y animaciones, por lo que las funciones $.ajax, $.get, $.post y relacionadas no funcionarán

La solución:

Es simple, asegurarnos que, si vamos a necesitar las funciones que no trae la versión slim, estemos utilizando la versión completa que se puede encontrar en esta página: https://code.jquery.com/

A continuación dejo un par de ejemplos exponiendo el caso con la versión slim y con la versión completa

Ejemplo con la versión slim

$.ajax(
  'https://api.stackexchange.com/2.2/info?site=es.stackoverflow'
).done(function(data) {
  console.log(data);
}).fail(function(jqXHR) {
  console.log(jqXHR.statusText);
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Ejemplo con la versión completa

$.ajax(
  'https://api.stackexchange.com/2.2/info?site=es.stackoverflow'
).done(function(data) {
  console.log(data);
}).fail(function(jqXHR) {
  console.log(jqXHR.statusText);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

1
  • 1
    Esta debe ser aceptada como la respuesta correcta. Bootstrap incluye en su doc la versión slim y es lo que sucede en la pregunta. Bajar la versión de JQuery no es recomendable Commented el 31 ago. 2020 a las 6:37
7

Es chistoso pero a los 10 minutos de escribir la falla encontre que es problema de jquery.

error: la version slim de jquery tiene ese error

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

solucion: cambiar a una version que no sea slim

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1
  • Después de 4 años, me sirvió la respuesta. Gracias!!
    – Andres_Ha
    Commented el 7 may. a las 20:30
3

Ya quedo!!! El error estaba en:

<script src="bootstrap/jquery-3.2.1.js"></script>

La versón que trae bootstrap x 4 de jquery la cambié por una anterior y se solucionó, la cambié por la jquery-1.9.1.min.

$(document).ready(function () {
    //agregar producto
    $("#formularioAgregar").submit(function (event) {
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "StatusController.php",
            data: $('#formularioAgregar').serialize(),
            success: function (data) {
                $('#formularioAgregar')[0].reset();
                $('#resp').html('Se Agrego Correctamente El Producto').show(200).delay(2500).hide(200);
                //mostrar la respuesta del servidor
                $('#agregar-registros').html(data); //ya envia ahora tienes que codificar.. lo que deseas hacer el problema era eso de iniciar jquery y cerrar con punto y comas 
            }
        })
    });
});
0
0

Prueba reemplazando tu Ajax con:

    $("#formularioAgregar").submit(function(e){
                e.preventDefault();
                $.ajax({
                    url: 'some.php',
                    type: 'POST',
                    data: $("#formularioAgregar").serialize(),
                    success: function(data){
                     console.log(data);

                  )}
              };
3
  • esta mal su codigo me marca error de sintaxix Commented el 15 ago. 2017 a las 3:41
  • Falta cerrar la llave de el success, deberia ser asi: success: function(data){console.log(data);}
    – Elmer
    Commented el 15 ago. 2017 a las 3:47
  • Tienes razón @ELM, Sin embargo Carlos Enrique Gil Gil, esa es la idea. ¡Saludos!
    – jmrtn
    Commented el 16 ago. 2017 a las 2:46

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.