0

Been sweating for days..

I'm running bootstrap 3.1 and want to load different remote pages into my modal depending on what button is clicked.

This works the first time I click the button, but then when I try to load the second page, it throws me an undefined error. Please please help - surely this is a common operation and something I wouldn't think would be that difficult.

<script type="text/javascript">
function modalLoad(remotePage){

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false,
    remote: remotePage
})   

$('#myModal').on('show.bs.modal', function (e) {
   alert('showing');        

 });
$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal opened');
});  

$('#myModal').on('hidden.bs.modal', function (e) {
     // tried all of the variations below
     $(e.target).removeData("bs.modal").find(".modal-content").empty();
    // $(e.target).remove();
    // $(this).removeData('bs.modal');
    //$("#myModal").remove();
    //  $(this).data('bs.modal', null);      
     alert('removed');  
});

$('#myModal').modal('show');
};
</script>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            </div>
            <div class="modal-body">Update here</div>
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>

Any help would be so so appreciated.. :S

Andrew
  • 1,963
  • 3
  • 25
  • 35
friek108
  • 1,064
  • 1
  • 12
  • 23
  • 1
    You remove the modal block (`$("#myModal").remove();`) from the DOM, so the modal wouldn't exist the second time you click, explaining your issue. – Mik378 Apr 25 '14 at 00:24
  • Thanks Mik - but I tried the other variations (see above I've uncommented the function in 'hidden.bs.modal') to only remove content in modal-content. I still get the same javascript error saying 'undefined is not a function' on the line '$('#myModal').modal({ - but only the second time I call it. Any ideas? – friek108 Apr 25 '14 at 03:09
  • if you remove from modal-content, then modal-body would disappear... empty from modal-body instead – Mik378 Apr 25 '14 at 10:23
  • this helped me out. http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime –  Apr 30 '14 at 00:30

0 Answers0