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>
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);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.