Twitter Bootstrap Modal change Content via Ajax

Question

I know, here are many question with the same topic. But I cannot find a solution for my prpblem. So I have a layout and before the body tag closes there is the modal window:

<!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                CONTENT
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
    </body>

I have a link in my site that toggles the modal window:

<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=1" data-target="#myModal">Click</a>

My remote php only contains " <php echo $_GET['id'];?> " for testing. In the future there is content from a database.

So everytime I click on the link to the modal the content will change. this is not the problem, I know how to do this in php etc.

And I write JS that the modal content should change:

$(document).ready(function() {
        // Fill modal with content from link href
        $("#myModal").on("show.bs.modal", function(e) {
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href"));
        });
    })

the problem:

when I click the link the modal window opens. perfect. But than the modal window dissappear and in the top position of my site there is the "1". But this is not so nice, because I only want that the content "CONTENT" in the modal-body should change to "1." What I am doing wrong here?

And - another question. If I do this with changing content every time with the $_GET['id'] the 1 never dissappear, but I want changing the content dynamic here, so in this example there should be a "2" in the modal-body class of the modal window if I click on a link like this:

<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=2" data-target="#myModal">Click</a>

Can somebody help me please?

Answer 1

Make link like below:

<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click</a>
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click 2</a>

On Js:

$(document).ready(function() {
        // Fill modal with content from link href
        $(".openModal").on("click", function(e) {
            var link = $(this).data("href");
        $('#myModal').modal("show");
        $('#myModal .modal-body').load(link );

        });
    })

Can you try it ?