Menu
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>
400
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
