HTML inside of a jQuery UI Dialog is displayed as literal text

Question

I have the following code on my front-end:

<script type="text/javascript">
function bringUpAuthorization() {
    var control = jQuery("#AuthorizationForMasterSchedule");
    control.css("visibility", "visible");

    control.dialog(
        {
            title: "Authorization",
            close: function () {
                control.css("visibility", "collapse");
            }
        })
}
</script>

<div id="AuthorizationForMasterSchedule" style="visibility: collapse"><%: authorizeHTML %></div>

The HTML code I'm adding is as follows:

<table>
    <tr id='EmptyAuthDetails'>
        <td style='text-align:center;' colspan='5'>No Authorization Details found</td>
    </tr>
</table><br/>

Unfortunately, it doesn't actually render the HTML:

I tried adding this as HTML using jQuery, as suggested by the answers to this question :

jQuery(document).ready(function () {
    jQuery("#AuthorizationForMasterSchedule").html("<%: authorizeHTML %>")
})

but it didn't make any difference. (By the way, for the record, I'm perfectly aware of the $ syntax - there's a long story behind why I'm not using it here).

Answer 1

Not sure why you are making so many css changes for viewing. I created this sample after removing the css changes: https://jsfiddle.net/pcjm1q9d/ .

HTML:

<div id="AuthorizationForMasterSchedule" ></div>

Javascript:

  $( function() {     

     jQuery("#AuthorizationForMasterSchedule").html("<table>  <tr id='EmptyAuthDetails'>     <td style='text-align:center;' colspan='5'>No Authorization Details found</td>     </tr></table><br/>");

//show dialog box
        $( "#AuthorizationForMasterSchedule" ).dialog();
      } );

You can control the dialog behavior using jquery directly. check the documentation for dialog.