Bootstrap 4 Modal with JQuery and AJAX?
Question
Essentially, I've got a form inside a modal. I need to get the information out of the modal so I can use it in the rest of my app.
I've tried following some tutorials I found that use JQuery and AJAX to handle the information, but I can't seem to get them to work.
Could somebody please help?
This is what's giving me problems:
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
//No matter what I put in here, I can't get it to do ANYTHING.
});
});
});
</script>
As requested, things I've tried (not all at once obviously). For all of them, when I click the save button, absolutely nothing happens. I don't get any output to the console, I can't get the modal to close, nothing.
I have already made the change suggested by gaetanoM below, but it doesn't seem to help.
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
url: '/test',
data: {
display: $('#myInput').val(),
},
type: 'POST',
success: function(res) {
$('#myModal').modal('hide');
},
error: function(error) {
$('#myModal').modal('hide');
console.log(error);
}
})
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
success: function(res) {
console.log(res);
},
error: function(error) {
console.log(error);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
//No matter what I put in here, I can't get it to do ANYTHING.
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
$('#myModal').modal('hide');
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
});
});
</script>
Below is a very, very stripped down version of what I'm trying to do. At the moment, all the save button does is hide the modal.
I'd like to update the header and ultimately to save the information in an SQLite database.
Note: I'm also using Python and Flask, if that matters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<!-- I'm trying to update this header as well as a SQLite database whenever the user submits the modal form -->
<h1 id="display">Hello World</h1>
<button type="button" class="btn" id="showModal" data-toggle="modal" data-target="#myModal">Show Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5>Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<label for="myInput">Input</label>
<input type="text" id="myInput" placeholder="Input Here">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Obviously, this just hides the modal, atm -->
<script>
$(document).ready(function(){
$("#save").click(function(){
$('#myModal').modal('hide');
});
});
</script>
</body>
</html>
3 answers
solution1
6 2017-09-22 21:30:03
The jquery-3.2.1.slim.min.js library is different from the complete one jquery-3.2.1.min.js . For instance the ajax method is not implemented.
You may take a look to What are the differences between normal and slim package of jquery?
Or, reading directly from the official documentation :
Sometimes you don't need ajax , or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we've released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k .
Therefore, change this line:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
to:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
solution2
0 2022-02-15 14:44:08
You can't just delete slim from the code. You need to actually paste in the new CDN from JQuery's website. I spent a few hours trying to do this from the other post, just deleting slim. It won't work because the integrity and anonymous is missing, or if you just delete slim then the integrity and anonymous is incorrect.
This actually works. Replace your current JQuery CDN in your code with this one on the site. This is the current min version of JQuery 3x.
If you need a different version of min for JQuery like 2.0 etc...then go to their CDN part of their website which is: https://releases.jquery.com/
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
solution3
0 2022-06-07 10:44:51
Bootstrap 4 (modal) and jQuery (ajax)
$.get( "/ajax", function( data ) { console.log( data ) $( '#myModal' ).modal() } )
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.