4

I realize that this could be repetitive question but I failed to find an answer so putting a new question. I am pretty new to web development and trying to hard to get this trivial scenario work: I want to display some information to the user when he clicks on a button. The information should be presented like a popup: it would close only when user clicks on close(X) on top right or ok button at bottom. I have tried implementing this using different ways I came across on various SO answers but nothing seems to work for me. Following code snippet that displays a static modal works:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade">
    <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

But I am not able to convert things to display my partial view. How do I display a similar modal which actually encompasses a partial view?

labyrinth
  • 1,104
  • 3
  • 11
  • 32

1 Answers1

2

Your button reference a button to toggle showing/hiding of the modal, data-target="#myModal", but your modal didn't have an id.

It's not clear if you want the whole modal to be a partial, or just the inner content. It doesn't matter at all though, since this is all applied server-side, and your modal is processed client-side.

Actually, bootstrap already have support for dynamically loading "partials" (using jQuery load in code behind):

<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

The above is a much simpler way than my example below..

Read more about jQuery load() or get()

var myData = '<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">Modal title</h4>' +
  '</div>' +
  '<div class="modal-body">' +
  '<p>Load on request</p>' +
  '</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>';

//myData could be a file, with the same contents, and then you would use the ".load()" method below instead
$('#myModal').on('show.bs.modal', function(e) {
  //$('#myModal').load('myFile.cshtml'); //When loading from a file/url
  $('#myModal').html(myData); //loading from a string
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

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

</div>
Mackan
  • 6,200
  • 2
  • 25
  • 45
  • But how do I get the parital view running in such way? – labyrinth Apr 14 '15 at 15:03
  • @labyrinth Well, a partial view is nothing more than a reference to content kind of, so using Razor syntax: `@Html.RenderPartial("myPartialviewName")` somewhere in the modal. This is handled server-side, the modal is handled client-side, so all "bootstrap" and "jquery" will see is some other content within the modal. – Mackan Apr 14 '15 at 15:08
  • Sorry if my query is something basic, but by doing it the way you suggested, would the partial view data be always loaded irrespective of user clicking on the button? If it is always loaded then it might make my application a little heavy since I would have around 20 such buttons on my view. – labyrinth Apr 14 '15 at 17:22
  • @labyrinth Updated with an example of loading on request. – Mackan Apr 14 '15 at 19:14
  • Thank you so much for such good inputs. It really helped me understand things better. I could get the modal loaded from partial view. But for some reason, it worked only once.. now when I try the page is fetched on button click but nothing changes on UI and no error is displayed too. But I guess I will just play around with some call backs and that should solve. – labyrinth Apr 15 '15 at 09:36
  • @labyrinth You can always ask a new question if you get stuck. Just remember to include code samples, both for the people trying to help and for the people reading this in a few years time. Hope it works out. A tip: If you include your javascript/jquery in the partial, it will get unbound once the partial is not shown. Use the "main view" to include your scripts. – Mackan Apr 15 '15 at 09:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75276/discussion-between-labyrinth-and-mackan). – labyrinth Apr 15 '15 at 10:21
  • I have added a new question at http://stackoverflow.com/questions/29648330/jquery-load-function-loading-data-only-when-ran-for-the-first-time-but-not-on-s – labyrinth Apr 15 '15 at 11:03