如何在jQuery UI对话框中加载页面 [英] How to load page in jQuery UI Dialog

问题描述

我正在尝试在jQuery对话框中加载另一个页面。我已经看了很多文章（包括下面的文章）。似乎接受的技术是：

I am trying to load another page in a jQuery dialog. I have already looked to a lot of articles (including the ones below). It seems that the accepted technique is:

$(function () {
        $(document).ready(function () {
                var d1= $('#dialog-import').dialog({
                resizeable: false,
                height: 600,
                modal: true,
                autoOpen: false,
                buttons: {
                    'My button1': function () {
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                }
            });

            d1.load('/DataSets/ImportSpreadsheet/91D55CAC-6C2C-46EE-8730-0DBFE26D1D92').dialog('open'); 

        });
    });

打开对话框，包括完整内容和我的两个对话框按钮，但是，两个对话框按钮不工作（我不能点击它们）。

That opens the dialog, including the complete content and my two dialog buttons, however, the two dialog buttons do not work (I cannot click on them).

代码的其他替代方案，如：

Other alternatives of the code, like:

 $('#dialog-import').load('/DataSets/ImportSpreadsheet/' + a, function () {
                $('#dialog-import').dialog('open');
            });

在Google Developer Console中导致此错误：

Result in this error in the Google Developer Console:

Uncaught TypeError: Object [object Object] has no method 'dialog' 

我一定是缺少一些愚蠢的东西。但是，我一直在寻找它，没有任何运气。

I must be missing something dumb. However, I have really been looking it over, without any luck.

谢谢。

这就是我想做的事，尝试了他们的建议，没有运气：

This is what I am trying to do, tried their advise with no luck:

jQuery Modal对话框onclick

jQuery对话框

如何加载页面jquery ui对话框

在对话框中加载另一页

Jquery对话框打开另一页

推荐答案

事实证明问题是那个我试图加载一个包含标题，正文，html元素的完整页面。 jQuery不喜欢那样。

It turned out that the issue was that I was trying to load a complete page that included the header, body, html elements. jQuery didn't like that.

我找到了两种可能的解决方案：

I found two possible solutions:

1. 使用C＃MVC局部视图。确保部分视图不包含header，html等元素。使用它原始问题中的代码可以正常工作。

1. Use an C# MVC partial view. Make sure that the partial view doesn't include header, html, etc., elements. Using that the code in the original question works without issues.

使用iFrame元素，并加载您要更改src属性的页面，如下面的代码所示。

Use an iFrame element, and load the page that you are looking for changing the src attribute, like in the code below.

$（'＃selector'）。click（function（）{$
$（'＃dialog-import'）。attr（'src'，'/ DataSets / ImportSpreadsheet / ...'）;
$（'＃dialog-import'）。dialog（'open'）;

}）;

$('#selector').click(function () {
$('#dialog-import').attr('src','/DataSets/ImportSpreadsheet/...'); $('#dialog-import').dialog('open');
});

尽管如此，我很困惑，很多人都说他们不必担心标题/正文标记，就像这个帖子隐含地说：ASP.NET Mvc jquery ui对话框视图或部分视图？

Still, I am puzzled by so many people saying that they do not have to worry about the header/body tags, like this posting implicitly says: ASP.NET Mvc jquery ui dialog as view or partialview?

我将继续研究，但有同样问题的人可能会觉得这很有用。

I will continue to research, but somebody having my same issue could find this useful.

这篇关于如何在jQuery UI对话框中加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！