Bootstrap dialog box show HTML content in body based on ajax call

Nate

New Member
#1
I have the following bootstrap modal dialog box:
Mã:
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <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" id="myModalLabel">Update</h4>
        </div>
        <div class="modal-body wrap">           


        </div>
        <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>
</div>
Note how the modal-body is empty.

I have the following call that gets data that is HTML that I like to show inside of the body ():
Mã:
 $.ajax({
                url: '@Url.Action("GetContent", "Sys")',
                type: 'POST',
                data: { siteID: @Model.SiteID},
                dataType: "html",
                cache: false,
                 success: function (data) {                 
                     //  I like to show content of data inside of the dialog box body.
                     $('#resultModal').modal({
                         backdrop: 'static',
                         keyboard: false,
                         show: true,
                     });

                },
                error: function (xhr, status) {

                },
            });
What I like to do is show the content of data which is in HTML inside of the body of the dialog box.
 

Admin

Administrator
Thành viên BQT
#2
Let me have a couple of assumptions about your code (it applies to the snippet, but You have to ensure that it is correctly handled in Your application):

  • the selector for the body of the modal is its class, alter the modal id (in this example: #resultModal .modal-body. Change as suitable)
  • the AJAX data you want to render fills the entire data parameter (you can extract the corresponding portion of the data to suit Your needs).
That said: we want to show the data inside the modal body. Therefore we need to take the data, and use it to render the text or the HTML of the element (use the former if You're worried about injection, the latter if the content is known to You and You can trust it).

By taking the invocation snippet You provided, we can write the following code (I shall highlight the modified portion by surrounding it with a comment):

Mã:
$.ajax({
            url: '@Url.Action("GetContent", "Sys")',
            type: 'POST',
            data: { siteID: @Model.SiteID},
            dataType: "html",
            cache: false,
             success: function (data) {
                 /* ************* */
                 // I shall assume that the data is not safe
                 $('#resultModal .modal-body').text(data);
                 // Were the data safe, You could swap the preceeding line with the following
                 // $('#resultModal .modal-body').html(data);
                 /* ************* */
                 //  I like to show content of data inside of the dialog box body.
                 $('#resultModal').modal({
                     backdrop: 'static',
                     keyboard: false,
                     show: true,
                 });

            },
            error: function (xhr, status) {

            },
        });
Hope it helps!
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top