CODEWITHSUNDEEP
jquerytwitter-bootstrap
VPY
VPY

Reputation: 463

jQuery : Update modal body dynamically

I have a two buttons (Modal 1 & Modal 2) in my web page.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>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/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>Example</h2>
      <!-- Trigger the modal with a button -->
      <button id="1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 1</button>
      <button id="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 2</button>
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Header</h4>
            </div>
            <div class="modal-body">
              <p>...change string here...</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    </body>
    </html>

As can be seen above in the code, both the modals pop up the div "modal-body".

I would like to change the body such that instead "...change string here..." it should display the "id" of the button that opened the modal.

Can someone let me know if this is possible to do in jQuery ?

Upvotes: 0

Views: 38

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

It certainly is possible, and it's actually a lot easier than you'd expect!

All you have to do is attach a click handler to both buttons that changes $(".modal-body > p")'s .html(), passing through this.id (as this refers to the element with the click handler attached):

$("#1, #2").on("click", function() {
  $(".modal-body > p").html(this.id);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Example</h2>
    <!-- Trigger the modal with a button -->
    <button id="1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 1</button>
    <button id="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 2</button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Header</h4>
          </div>
          <div class="modal-body">
            <p>...change string here...</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
  </div>

</body>

</html>

Upvotes: 1

Related Questions