0

I want to show a html page which is saved in a string with jquery-ui dialog. Unfortunately no dialog opens.

This is my code:

$(failedRequest.responseText).dialog();

The error message in the js console says:

Uncaught TypeError: Cannot read property 'display' of undefined 

I also tried

$('<html><body><h1>A title</h1>And some text.</body></html>').dialog();

which works fine.

I assume there's something in the HTML code which causes .dialog() to fail. This is the compelente HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">







<html>
<head>
<title>EAI Configuration Web :: Status page</title>
<link href="/EAIConfig/styles/design.css" rel="stylesheet" type="text/css" media="all" />
<link href="/EAIConfig/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />

<script type="text/javascript">
            function onChangeAutoSessionClose() {
                var checked = document.getElementById('autoSessionClose').checked;
                $.post("autoSessionClose.action", {autoSessionClose: checked});
            };
        </script>
</head>
<body id="page-home">
        <div id="maincontainer">
            <div id="header">
                <div class="headerTop">
                    <div class="logo">
                        <img src="/EAIConfig/img/galenicaLogo.gif"
                            title="" />
                    </div>
                    <div id="blockMainPopup" style="float:right">

                            <form id="logout" name="logout" action="logout" method="post">
                                <a class="item" href="javascript:print()"><img
                                    src="/EAIConfig/img/iconPrint.gif"
                                    alt="Print Page" />&nbsp;title.print</a>&nbsp; &nbsp;
                                login.as : ugxnbpluse&nbsp; &nbsp;
                                <input type="submit" id="logout_logout" name="action:logout" value=""/>

                            </form>





                    </div>
                    <div class="row"></div>
                </div>
            </div>
            <div id="content">
                <div class="leftcontent">
                    <br/>
                    <ul>
                        title.mappingDefinition
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/mappingDefinition.action">title.mapping</a></li>
                        <li>
                                &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/businessServiceDefinition.action">title.businessServiceDefinition</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/dataStoreEntity.action">title.dataStoreEntity</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/valueConversion.action">title.valueConversion</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/schemaConfiguration.action">title.conditionalValueConversion</a></li>                     
                    </ul>
                    <br/>
                    <ul>
                        title.messageTypeDefinition
                        <li>
                            &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/taskMessageTypeDefinition.action">title.taskMessageType</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/messageTypeDefinition.action">title.messageType</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/outputConfiguration.action">title.outputConfiguration</a></li>
                        <li> &nbsp; &nbsp;<a href="/EAIConfig/ri/i18n/configurationHeader.action">title.configurationHeader</a></li>
                        <li> &nbsp;
                            &nbsp;<a href="/EAIConfig/ri/i18n/startTaskContentElement.action">title.startTaskContent</a></li>
                    </ul>
                    <br/>
                    <ul>
                        title.administration
                            <li> &nbsp; &nbsp;
                                <a href="/EAIConfig/ri/i18n/contractorDefinitions.action">title.contractorDefinition</a>
                            </li>

                            <li> &nbsp; &nbsp;
                                <a href="/EAIConfig/ri/i18n/viewPartnerGroupList.action">title.partnerGroupList</a>
                            </li>

                            <li> &nbsp; &nbsp;
                                <a href="/EAIConfig/ri/i18n/viewHolidayCalendar.action">title.holidayCalendar</a>
                            </li>

                            <li> &nbsp; &nbsp;
                                <a href="/EAIConfig/ri/i18n/exportImport.action">title.exportImport</a>
                            </li>


                            <li> &nbsp; &nbsp;
                                <a href="/EAIConfig/ri/i18n/lastChange.action">title.lastChange</a>
                            </li>


                          <li> &nbsp; &nbsp;
                            <a href="/EAIConfig/ri/i18n/translation.action">title.translation</a>
                          </li>

                    </ul>

                    <br/>
                    <ul>
                        title.reports
                        <li> &nbsp; &nbsp;
                            <a href="/EAIConfig/ri/i18n/viewPartnerReports.action">title.reports.partner</a>
                        </li>
                    </ul>
                </div>
                <div class="rightcontent">
                    <div id="pagetitle">
                        <h1>
                            title.eaiConfiguration
                            -
                            Status page
                        </h1>
                        <h2>

                        </h2>






                    </div>
                    <div class="row">
                    </div>
                    <br/><br/><br/>




                    <p style="font-size: 1.2em;font-weight: bold;margin: 1em 0px;">Internal Server Error</p>
<p>Internal Server Error</p>
<p>You can get technical details <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.5.1">here</a>.<br>
Please continue your visit at our <a href="/">home page</a>.
</p>
                </div>
            </div>
        </div>
</body>
</html>

Any ideas about how to get this HTML shown in a dialog?

BetaRide
  • 16,207
  • 29
  • 99
  • 177
  • jQuery Dialog is designed to make dialogs out of divs, not whole html pages. It is just a div that is styled as a dialog, its not a whole new page. – devqon Oct 15 '14 at 13:21
  • @devqon: That's not correct. It shows any kind of html elements. Have a look at my second atempt which prooves this. – BetaRide Oct 15 '14 at 13:27
  • but ` ` is not a valid element which jQuery can use, so it can't make a dialog out of that element. The point is you should not use a whole html page as a dialog. – devqon Oct 15 '14 at 13:27
  • @devqon: I tried without the `DOCTYPE`. No luck. I still get the same error. – BetaRide Oct 15 '14 at 13:30
  • watch the `failedRequest.responseText`, write it to the console or alert it – devqon Oct 15 '14 at 13:34
  • @devqon: That's what I have done. See the HTML code in the question. – BetaRide Oct 15 '14 at 13:35
  • 1
    Look at the answer with 14 votes: http://stackoverflow.com/questions/12137033/load-external-url-into-modal-jquery-ui-dialog – devqon Oct 15 '14 at 13:39

0 Answers0