CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapbootstrap-4
rayden54
rayden54

Reputation: 251

Bootstrap 4 Modal with JQuery and AJAX?

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>

Upvotes: 5

Views: 14424

Answers (3)

antelove
antelove

Reputation: 3348

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
</head>

Upvotes: 0

Nick Mullins
Nick Mullins

Reputation: 1

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>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 6

Related Questions