0

I am using .load function of jquery to display partial view as a modal when a button is clicked on the html page. It is very weird that when I change something in the partial view and click the button for the first time, the partial view data is retrieved and it is correctly shown on the UI too. But when I later click the button, a request is made to fetch the partial view, data is also returned but the modal never appears till I again change something in the partial view. Why could this be happening. I tried disabling cache for ajax as suggested here, but still it didn't work. Following is my code.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal" id="myModal">

</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
  $('#myModal').load('myFile.cshtml'); //When loading from a file/url
  
})

</script>

My Partial View Markup:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="mymodallabel">modal title</h4>
            
        </div>
        <div class="modal-body">
            <p>Second from partial with clear cache</p>
            
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
        </div>
        
    </div>
    
</div>

EDIT: The question for which this has been marked as duplicate refers to events for dynamically loaded elements whereas my question is on the static elements, the event on which will bring in new (dynamic) elements

Community
  • 1
  • 1
labyrinth
  • 1,104
  • 3
  • 11
  • 32
  • What the other post is saying really is that you should use: `$(document).on('show.bs.modal', '#myModal', function(e) {` instead of your current event bind. Try it, and let us know if it works – Mackan Apr 15 '15 at 11:15
  • I tried the way you suggested but it still didn't work – labyrinth Apr 15 '15 at 11:20
  • Ok, another way completely: http://jsfiddle.net/7h6vr4s2/ (notice the `href` among the button attributes). Change the href to point to your partial file. – Mackan Apr 15 '15 at 11:31
  • I am facing a problem using this approach. Though it could be independent but solving this would just make the solution complete. If I have multiple buttons on same page with diff href values, the modal data always presents data from the href for the button that was clicked first, as seen here: http://jsfiddle.net/labyrinth123/7h6vr4s2/1/ – labyrinth Apr 16 '15 at 06:34
  • You really need to improve on your searching-for-solutions ;) Example fix here: http://jsfiddle.net/7h6vr4s2/3/ and reference http://stackoverflow.com/questions/12286332/twitter-bootstrap-remote-modal-shows-same-content-everytime – Mackan Apr 16 '15 at 06:40
  • I seriously should! Thanks for all the help though :) – labyrinth Apr 16 '15 at 06:44

0 Answers0