I have an error when sending data by ajax, it marks an error in the function $.ajax()
, but I already checked the documentation and the code is fine.
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>
While the accepted answer may fix the problem at hand, downgrading jQuery isn't optimal, downgrading nothing would be optimal in most cases, updates fix a number of things, including security issues .
Yes, the problem is the version of jQuery, but version 3.x has two types:
If we look at the code of the slim version , we can find the following (truncated for better reading):
I mean it's all jQuery except ajax, and other ajax related functions and animations, so the
$.ajax
,$.get
,$.post
and related functions won't workThe solution:
It is simple, make sure that, if we are going to need the functions that the slim version does not bring , we are using the full version that can be found on this page: https://code.jquery.com/
Below I leave a couple of examples exposing the case with the slim version and with the full version
Example with the slim version
Example with the full version
It's funny but 10 minutes after writing the bug I found that it's a jquery problem.
error: the slim version of jquery has this error
solution: change to a non-slim version
I'm here!!! The error was in:
The version that brings bootstrap x 4 of jquery I changed it to a previous one and it was solved, I changed it to the
jquery-1.9.1.min
.Try replacing your Ajax with: