0

Again breaking my head in Bootstrap 3. I have been using BT3 with a modal window. The below code works and fetch the remote modal window for the first time and doesn't work in my second click.

I have checked the below forums:

http://www.whiletrue.it/how-to-update-the-content-of-a-modal-in-twitter-bootstrap/

How to show a URL in Bootstrap Modal dialog: On button click

Bootstrap 3 with remote Modal

http://getbootstrap.com/javascript/#modals

From the documentation:

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> 

index.php

 <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=1">Employee 1</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=2">Employee 2</a> <a data-toggle="modal" data-target="#myModal" class="btn btn-primary" data-keyboard="false" data-backdrop="false" href="emp_details.php?id=3">Employee 3</a> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Test</h4> </div> <div class="modal-body">Test</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

emp_details.php

 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <?php print_r($_GET); ?> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> 

So now my questions are:

  1. Is there a way to get the modal box dynamically each time when the href is clicked?
  2. Is there anyway to load the remote content dynamically without any issues?

1 Answer 1

1

Waaahuuu.. I missed this answer.

This really worked for me.

Twitter bootstrap remote modal shows same content everytime

just you need to add this script.

 $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); 

Thanks again

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.