自举动态模态

Question

I've been trying to do the dynamic modal with the twitter bootstrap like so:

$('#myModal').on('hide', function () { 
    $(this).removeData('modal');
    $('.loading-modal').remove();
})

It does reload the data in the modal each time I click on the button but...

What I noticed is that after closing the previews modal, when I open the next modal the previews data is still shown and after a few seconds it is updated with the new data.

What I wanted is that everytime the modal is called it will set the data to "Loading..." then display the new data.

How can this be achieved? Or is there a better approach?

---

Update

This is how I'm calling the remote data for the modal using data-remove=

<a href="" role="button" data-target="#myModal" data-toggle="modal" data-backdrop="static" data-remote="/manager/test/{{ $donator->USERNO }}"><i class="icon-plus"></i></a>

The modal

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Editing Data</h3>
    </div>
    <div class="modal-body">
        <div class="loading-modal">Loading...</div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Answer 1

I have done a similar thing using Ajax, not sure if it is 'the best' way to do it, but it works.

Just use a normal button/hyperlink with a Javascript function call:

<button class="btn" onclick="showDialog()">Click Me</button>

And then inside the function show the dialog and perform ajax call:

function showDialog() {
    $("#dialogBody").html("Loading...");  // Or use a progress bar...
    $("#dialog").modal("show");
    $.ajax({
        url: myUrl.com,
    }).success(function(data) {
        $("#dialogBody").html(data);
    });
}