Bootstrap 4 Modal with JQuery and AJAX?

javascript jquery ajax twitter-bootstrap bootstrap-4

12,304

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>

12,304

Author by

rayden54

Updated on June 08, 2022

Comments

rayden54 almost 2 years

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">&times;</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>

McHat over 6 years

Can you show us what you have tried putting in there in an attempt to get it to do something? Getting the information from your modal and sending it with AJAX is a two step process. Only step two(the AJAX portion) can be accomplished in the location you have marked in your code.
rayden54 over 6 years

Added a bunch of the things I've tried to the OP.

Alex.Barylski about 6 years

I did exactly this - and it introduced another error TypeError: Cannot read property 'fn' of undefined https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootst‌rap.min.js:6 ReferenceError: $ is not defined any ideas?
gaetanoM about 6 years

the libraries order is important. Include for the first jQuery.