Activate Bootstrap modal using javascript onclick

Question

I have a bootstrap modal l need to activate when l click on a button. For now when the page is rendered and l click on edit button, something pops up like a shadow but the modal with the data is not displayed. I want to use the onclick function, showModal() to activate the bootstrap modal. Any help will be greatly appreciated.Thanks

Here is my code:

$(document).ready(function () {

    getAllBooks();


    function getAllBooks() {
        $.ajax({
            type: "GET",
            url: "/employees",
            success: function (result) {
                $.each(result, function (i, customer) {

                    var customerRow = '<tr>' +

                        '</td><td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showModal()" id="5">Edit</button></td>' +
                        '<div class="modal fade" id="myModal" role="dialog">' +
                        '<div class="modal-dialog">' +
                        '<div class="modal-content">' +
                        '<div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                        '<h4 class="modal-title">Modal Header</h4>' +
                        '</div>' +
                        '<div class="modal-body">' +
                        '<p>Some text in the modal.</p>' +
                        '</div>' +
                        '<div class="modal-footer">' +
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    '</tr>';

                    $('#customerTable tbody').append(customerRow);

                });

                $("#customerTable tbody tr:odd").addClass("info");

            },
            error: function (e) {
                alert("ERROR: ", e);
                console.log("ERROR: ", e);
            }
         })
      }

    //function to activate bootstrap modal
    showModal = function () {
        //var buttonId = $('#5').attr('id');
        //jQuery.noConflict();
        console.log("Hello World!");
        $('#5').modal().show();
         }
      })

<html>
       <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="/js/data.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
       </head>

         <body>
         <div class="container">
          <table id="customerTable" class="table table-bordered table-hover table-responsive">
            <thead>
                <tr>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            </table>
         </div>
         </div>
      </body>

     </html>

What was your thought process / reason behind rendering the modal markup in your Javascript? — Alex Mulchinock
– Alex Mulchinock, Commented Mar 20, 2019 at 12:21

Alex · Accepted Answer · 2019-03-20 12:26:39Z

You try put modal markup (div) into table. This is forbidden by browser
define some div in your document and put modal to there

<div class="container">
      <div id="modal"></div> 
      <table id="customerTable" class="table table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
     </div>
     </div>

var customerRow = '<tr>' +
                '</td><td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="showModal()" id="5">Edit</button></td></tr>'
var myModal = '<div class="modal fade" id="myModal" role="dialog">' +
                '<div class="modal-dialog">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                '<h4 class="modal-title">Modal Header</h4>' +
                '</div>' +
                '<div class="modal-body">' +
                '<p>Some text in the modal.</p>' +
                '</div>' +
                '<div class="modal-footer">' +
                '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

  $('#customerTable tbody').append(customerRow);
  $('#modal').append(myModal);

and then open it

function showModal() {
   $('#myModal').modal().show(); // you can try comment this code, because bootstrap maybe open modal
}

Александр Чертков · Accepted Answer · 2019-03-20 12:38:28Z

0

1 - You need to take out modal code from tr and put some where out of table.
2 - when you dynamically fill table by tr (each contains own customer) use next (see code)
3 - in showModal function you must get customer and open modal with customer's data

const $tr = $(`
<tr>
  <td>${customer.name}</td>
  <td><button>Edit</button></td>
</tr>
`);

$tr.find('button').click(function() {
  showModal(customer);
})

$('#customerTable tbody').append($tr);

answered Mar 20, 2019 at 12:38

Александр Чертков

1297 bronze badges

Comments

Lab Lab · Accepted Answer · 2019-03-20 12:51:52Z

You forget to put your <div> in <td> and also you don't need functions to open modals via JS. Bootstrap handles this on its own. JSFiddle

 <html>
   <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/data.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
   </head>

     <body>
     <div class="container">
      <table id="customerTable" class="table table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
     </div>
     </div>
     <script>$(document).ready(function () {
       let s = '<tr>' +

                    '<td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="yourBtnId">Edit</button></td><td>' +
                    '<div class="modal fade" id="myModal" role="dialog">' +
                    '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                    '<div class="modal-header">' +
                    '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
                    '<h4 class="modal-title">Modal Header</h4>' +
                    '</div>' +
                    '<div class="modal-body">' +
                    '<p>Some text in the modal.</p>' +
                    '</div>' +
                    '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div></td>' +
                '</tr>';
$('tbody').append(s);
})
</script>
  </body>

 </html>

Collectives™ on Stack Overflow

Activate Bootstrap modal using javascript onclick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related