$ .ajax is not a function

Question

$ .ajax is not a function

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)

3

I have an error when sending data by ajax, it marks me an error in the function $.ajax() but I already checked the documentation and the code is ok.

This error marks me

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>

jquery html5 ajax

asked by Carlos Enrique Gil Gil 15.08.2017 в 05:01

source

3 answers

2

Although the accepted answer can solve the problem in question, downloading the jQuery version is not optimal, downloading anything would be the most optimal in most cases, the updates fix several things, including security issues .

Yes, the problem is the jQuery version, but the 3.x version has two types:

The slim version
The normal version

If we see in the code of the slim version , we can find the following (truncated for your best reading):

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

This is all jQuery except ajax, and other functions related to ajax and animations, so the functions $.ajax , $.get , $.post and related will not work

The solution:

It's simple, make sure that, if we are going to need the functions that the slim version does not come with, we are using the full version that can be found on this page: link

Below I leave a couple of examples exposing the case with the slim version and with the full version

Example with slim version

$.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>

Example with the full version

$.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>

answered by 13.06.2018 в 06:51

0

Try replacing your Ajax with:

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

                  )}
              };

answered by 15.08.2017 в 05:21

How to show the values of all the radio type inputs that have the same class? Consult last access date Login MS SQL Server

score 2 · Accepted Answer

I already stayed !!! The error was in:

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

The version that brings bootstrap x 4 of jquery I changed it to a previous one and it was solved, I changed it for 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 
            }
        })
    });
});