CODEWITHSUNDEEP
phptwitter-bootstraptwitter-bootstrap-3modal-dialog
user3350885
user3350885

Reputation: 749

Bootstrap3 remote content using PHP

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?

Upvotes: 0

Views: 1464

Answers (1)

user3350885
user3350885

Reputation: 749

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

Upvotes: 1

Related Questions