Bootstrap 3 - Passing a url parameter into a modal window

Get Started
1

I am looking at creating a modal window, where i want to click on a thumbnail image of a member, and load up a mini biography into that modal window,
As the thumbnail image is created in a php loop, I have the member id already, so I wanted to add this as the parameter.

If I do this, it works ok for the first click, but if I try again, the first parameter is always loaded.
If I refresh the page, it works for the first click.
As the data is already on the page, I didn’t think I would need ajax, as the parameter is already known.

Here is a code snippet to show how the modal window is being loaded…


<ul class="media-list">
                  <li class="media">
          <a href="member_profile.php?MemberID=16" class="pull-right" data-toggle="modal" data-target="#myModal">
  <img class="media-object" src="/images/members/Fred Smith.jpg" alt="Image of Fred Smith" width="48" height="48">
</a>
            <div class="media-body">
              <h4 class="media-heading">Secretary</h4>
              Fred Smith </div>
          </li>
                    <li class="media">
          <a href="member_profile.php?MemberID=7" class="pull-right" data-toggle="modal" data-target="#myModal">
  <img class="media-object" src="/images/members/Ed Bowles.jpg" alt="Image of Ed Bowles" width="48" height="48">
</a>
            <div class="media-body">
              <h4 class="media-heading">Member</h4>
              Ed Bowles </div>
          </li>
                    <li class="media">
          <a href="member_profile.php?MemberID=8" class="pull-right" data-toggle="modal" data-target="#myModal">
  <img class="media-object" src="/images/members/Jack Jones.jpg" alt="Image of Jack Jones" width="48" height="48">
</a>
            <div class="media-body">
              <h4 class="media-heading">Member</h4>
              Jack Jones </div>
          </li>
</ul>
2

Fixed.

I needed to destroy the modal content on close - otherwise the parameter will be retained

In bootstrap 3 you use the following…

	$("#myModal").on('hidden.bs.modal', function () {
		$(this).data('bs.modal', null);
	});

thanks to emptywalls on stack overflow for the tip