jQuery UI对话框的“关闭”按钮不起作用

Question

I used jquery UI dialog like the following image. 我使用了jQuery UI对话框，如下图所示。

jQuery UI对话框

When i click the print button then the content of a div inside the dialog will be printed. 当我单击打印按钮时，对话框内div的内容将被打印。

Code of Print function 打印代码功能

function printDiv() {
    var originalContents = document.body.innerHTML; 
    var printContents = document.getElementById('PrintDivcontent').innerHTML;
    document.body.innerHTML = "<html><head><title></title></head><body style='background-color:#FFFFFF;'>"
            + printContents + "</body>";
    window.print(); 
    document.body.innerHTML = originalContents;
}

The print functionality works fine. 打印功能正常。 But after printing the content by clicking the Print button, the close button of the dialog is not working. 但是在通过单击“打印”按钮打印内容之后，对话框的关闭按钮不起作用。 When i click the close button before clicking the Print it will work. 当我在单击打印之前单击关闭按钮时，它将起作用。 In console the following error is displayed 在控制台中，显示以下错误

TypeError: $(...).data(...) is undefined
.data( widgetFullName )._focusTabbable();

Any work around for this? 有什么解决办法吗？ Please help me. 请帮我。

UPDATED 更新

HTML Code HTML代码

<div id="ReportPopup">
            <div id="PrintDivcontent">

                <div id="ReportTablecontainer">
                    <table id="ReportTable"><tbody><tr><th>Time</th><th>Action</th><th>comment</th></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 13:50:03</td><td style="padding-left:5px;width:50%">cdfsdfsd</td><td style="text-align:center;width:25%"></td></tr><tr class="altRow"><td style="text-align:center;width:25%">2014-06-05 13:51:58</td><td style="padding-left:5px;width:50%">fsdfsd</td><td style="text-align:center;width:25%">dsfsd</td></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 13:52:01</td><td style="padding-left:5px;width:50%">dfsdfs</td><td style="text-align:center;width:25%">sfsdfs</td></tr><tr class="altRow"><td style="text-align:center;width:25%">2014-06-05 14:25:45</td><td style="padding-left:5px;width:50%">dsfsdfs</td><td style="text-align:center;width:25%">sdfsdfsd</td></tr><tr class=""><td style="text-align:center;width:25%">2014-06-05 14:42:10</td><td style="padding-left:5px;width:50%">sdfsdfsd</td><td style="text-align:center;width:25%">sdfsdfsd</td></tr></tbody></table>
                </div>
            </div>
            <div class="reportButtonContainer">

                <input type="button" onclick="printDiv()"  value="PRINT">
            </div>
        </div>

Dialog 对话

$("#ReportPopup").dialog({
            modal:true,
            resizable: false,
            title: 'Report',           
            show:  {
                effect      : 'fold'
            },
            hide:{
                effect : 'fold'
            },
            width: 650,
            height: 600 ,
            minHeight:"auto"
        });

Answer 1

I changed my code for print functionality. 我更改了打印功能代码。

function printDiv() {  
      var divContents = $("#PrintDivcontent").html();
        var printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document
                .write('<html><head><title>Title of Print Page</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write(divContents);

        printWindow.document.close();
        printWindow.print();
        printWindow.close();

    }

Now it works fine. 现在工作正常。 DEMO 演示

jQuery UI对话框的“关闭”按钮不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-06-12 09:00:57

jQuery UI对话框的“关闭”按钮不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-06-12 09:00:57

解决方案1
0 已采纳 2014-06-12 09:00:57