How to get dialog to popup in jQuery?

Question

I'm trying to get a dialog to popup when a button is clicked but nothing is happening. Here is the html:

<button id = "AddSymbol" class="btn" data-toggle="modal" data-target="#exampleModal">
   <i class="glyphicon glyphicon-plus-sign"></i> Syms
</button>

which creates a button that looks like this:

But when I click it, nothing happens. No errors, nothing.

Here is the html for the popup dialog which follows immediately after the above:

<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">
          <h5 class="modal-title" id="exampleModalLabel">Add Symbol To Watchlist</h5>
          <button type="button" class="close" data-dismiss="modal">
             <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           <form>
             <div class="form-group">
               <label for="symbol" class="col-form-label">Symbol</label>
               <input type="text" class="form-control" id="symbol"></input>
             </div>
           </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Add</button>
        </div>
      </div>
    </div>
</div>   

Here is the javascript that is supposed to handle the click and show the popup:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $('#AddSymbol') // Button that triggered the modal
    var modal = $(this)
    modal.find('.modal-title').text('Add Symbol To Watchlist')
})    

Here are the libraries included right after above:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

I also have this version of jQuery in the head section:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-blah-blah" crossorigin="anonymous"></script>

If I move it to just above the other two like the instructions say, then errors occur from other js objects that need different versions. Here are the links in the head section for reference. This is the only order that shows the page without error:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Gridsplit Main Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Greg\Projects\JsonImporter\moneymachine\src\css\jquery.gridsplit.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./dist/jquery.gridsplit.optimised.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<link href="C:/Users/Greg/Projects/nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="C:/Users/Greg/Projects/nvd3/build/nv.d3.js"></script>
<link rel="stylesheet" type="text/css" href="C:\Users\Greg\Projects\JsonImporter\colResizable-1.6\samples\colResizable.Demo\css\main.css" />  

Here is a picture showing part of the page. There are a couple other components - one for creating the adjustable layout dividers and one for creating the table with adjustable column widths. They both can use the same version of jquery which doesn't work for the popup.

I'm following the popup example in the section called "Varying Modal Content".

I'm thinking the problem is that the other versions of jQuery are overriding the one that the popup needs, but I'm just guessing. Hopefully one of you experts can point out my error.

How do you guys handle situations where you have multiple components on a web page that depend on specific versions of jQuery that interfere with each other?

Answer 1

I hope its helps you:

$('#AddSymbol').on('click', function(e){
    $('#myModal').modal('show')
})

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" id="AddSymbol" class="btn btn-primary" >
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Answer 2

If you aren't doing anything functional when the modal is shown and you just need to show the modal on button click.

<button data-toggle="modal" data-target="#exampleModal">

If you want to handle it in javascript

$('#AddSymbol').on('click', function(e){
    $('#exampleModal').modal('show')
})

Answer 3

This Thing is Super Easy with Bootstrap Model Check the Link Above You can Definitely Get Solution from There