Jquery 对话框在母版页中不起作用？答案

【问题标题】：Jquery dialog not working in masterpage?Jquery 对话框在母版页中不起作用？
【发布时间】：2011-04-07 15:45:17
【问题描述】：

我在母版页中添加了以下代码。我能够得到alert("I am in onload Function");，但 jQuery("uploadPic").dialog 不起作用。页面上显示的<div> 部分。

我使用的引用是 jQuery

<script type=text/javascript src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>

我也试过$('#uploadPic').dialog。但是没有用。

<script language="javascript" type="text/javascript">
    _spBodyOnLoadFunctionNames.push("onloadFunction");
    function onloadFunction() {
        alert("I am in onload Function");
        //setup edit person dialog
        jQuery("uploadPic").dialog({
            autoOpen: false,
            modal: true,
            height: 375,
            width: 400,
            draggable: true,
            title: "Upload Picture",
            open: function (type, data) {
                $(this).parent().appendTo("form");
            }
        });
    }
    function showDialog(id) {
        alert("Hi");
        $('#' + id).dialog("open");
        alert("End");
    }
</script>

<map name="Map">
        <area shape="rect" coords="225,16,287,33" href="/_layouts/MyAlerts.aspx"  onclick="javascript:showDialog('uploadPic');"  alt="My Alerts">
     </map>
<div id='uploadPic'>        
      <table  class="ms-authoringcontrols"  style="border-top:1px black solid; border:1px black solid; height:70px "  >
    <tbody>
    <tr>
         <td class="ms-sectionheader ms-rightAlign">
        Please choose a picture to upload to your picture library.
          </td>
    </tr>
</tbody>
</table>
</div>

【问题讨论】：

您提到您已经包含了 jQuery，但您是否还包含了 jQuery UI 以访问 .dialog() 函数？如果是这样，您是否在控制台中遇到任何错误？

标签： jquery asp.net updatepanel master-pages updateprogress

【解决方案1】：

您提到您已包含 jQuery，但您是否还包含 jQuery UI 以访问 .dialog() 函数？

【讨论】：

我没有提到任何 jQuery UI。我在哪里可以得到参考？
我应该使用 jQuery("uploadPic").dialog 还是 $("#uploadPic").dialog。我还添加了 UI 参考。
$("#uploadPic").dialog，因为您通过 ID 引用

【解决方案2】：

您没有添加对 jquery ui 的引用：

<script type=text/javascript src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>

还有那一行

jQuery("uploadPic").dialog({

应该是

jQuery("#uploadPic").dialog({

当你定位一个带有 id 的 div 时。

【讨论】：

【解决方案3】：

除了在<script> 元素中不引用jQuery，在<script> 元素中不引用jQuery UI，在<link> 元素中不链接到某些jQuery UI css，并且不使用octothorpe @987654324 @ 当通过 id jQuery("#uploadPic) 选择时，你也永远不会调用你的 showDialog(...) 函数：

function showDialog(id) {
    alert("Hi");
    $('#' + id).dialog("open");
    alert("End");
}

由于您在调用dialog({...})时指定了autoOpen: false...

    jQuery("uploadPic").dialog({
        autoOpen: false, // <---
        modal: true,
        height: 375,
        width: 400,
        draggable: true,
        title: "Upload Picture",
        open: function (type, data) {
            $(this).parent().appendTo("form");
        }
    });

...对话框一开始是不可见的。您必须调用 open(...) 或 dialog("open") - 就像您在 showDialog(...) 函数中所做的那样。

但由于您从不调用该函数，因此它永远不会打开对话框。

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <title>Jquery dialog not working in masterpage?</title>
    <script type=text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type=text/javascript src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />

    <script language="javascript" type="text/javascript">
//  _spBodyOnLoadFunctionNames.push("onloadFunction"); // since I'm not using SharePoint I have replaced this line with jQuery(document).ready(...) below

    function onloadFunction() {
        alert("I am in onload Function");
        //setup edit person dialog
        jQuery("#uploadPic").dialog({
            autoOpen: false,
            modal: true,
            height: 375,
            width: 400,
            draggable: true,
            title: "Upload Picture",
            open: function (type, data) {
                $(this).parent().appendTo("form");
            }
        });
        jQuery("#open-button").click(function() {
            showDialog("uploadPic");
        });
    }

    function showDialog(id) {
        alert("Hi");
        $('#' + id).dialog("open");
        alert("End");
    }

    $(document).ready(onloadFunction);
    </script>


</head>
<body>

<a id="open-button" style="cursor:pointer;">Open the dialog</a>

<div id='uploadPic'>        
    <table  class="ms-authoringcontrols"  style="border-top:1px black solid; border:1px black solid; height:70px "  >
        <tbody>
            <tr>
                <td class="ms-sectionheader ms-rightAlign">
                Please choose a picture to upload to your picture library.
                </td>
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

【讨论】：

这是有效的......但是当我点击..页面滚动到页面的底部......它应该保持在同一个地方
@James123 - 这是我上面给出的示例的问题，还是当您将我描述的解决方案应用于您的母版页时是否存在问题？还有，哪个浏览器？
我现在用的是IE9。我正在使用和你一样的东西。$(document).ready。
@James123 - 但是您是在母版页中使用$(document).ready 还是我的示例中的问题？我认为我的示例没有任何问题。
@James123 - 这仍然不是您真正想要实现的目标。您的问题非常具有误导性。您在我的回答的 cmets 中所说的要点是，您想要一个 ajax 加载/处理模式，当页面或操作花费太长时间时弹出，让用户知道它正在处理。因此，为什么我在 ASP.NET/MasterPages 的 UpdatePanel 和 UpdateProgress 路径上发送给您。如果你愿意，你可以用$.ajax 做同样的事情，但我只是想你可以先学习.NET 路由。使用dialog() 不是实现这种效果的正确方法。

【解决方案4】：

我认为您的直接问题是，当您创建对话框时，您的选择器顶部的 unloadPic 前面没有 #。它不知道您要选择什么，因此永远不会创建对话框。

另外，如果您使用的是 jQuery，为什么不使用 jQuery 为您的dialog() 附加一个点击处理程序？

<map name="Map">
    <area id="myAlerts" 
          shape="rect" 
          coords="225,16,287,33" 
          href="/_layouts/MyAlerts.aspx"
          alt="My Alerts" />
</map>

请注意，您需要在area 标记中添加id，并在> 前面添加/ 以正确关闭您没有的标记。

这是我使用的，我已经为您的示例进行了修改：

(function($, window, document, undefined) {

    // grab dialog and area
    var $dialog = $("#uploadPic"),
        $myAlerts = $("#myAlerts");

    // attach click handler
    $myAlerts.click(function(e) {

        // prevent default click action
        e.preventDefault();        

        // if dialog exists, unbind and open
        if ($dialog.length) $dialog.unbind().dialog('open');

    });

    // added to re-center dialog when window re-sizes
    $(window).resize(function() {

        if ($dialog.length && $dialog.dialog('isOpen'))
            $dialog.dialog('option', 'position', 'center');

    });

})(jQuery, this, document);

编辑：

我还要补充一点，既然您使用的是 MasterPages，我肯定会确保您通过以下方式添加 onLoadFunction()：

if (Sys != undefined && Sys.Application) { 

    // add to Application object
    Sys.Application.add_load(onLoadFunction); 

} else { 

    // fall back to adding to window.onload        
    window.onload = onLoadFunction(); 

}

我看到了_spBodyOnLoadFunctionNames.push("onloadFunction");，但我不确定它到底是做什么的。我会假设它会做它应该做的。

【讨论】：

@James123 - 在 unloadPic div 上？是的。
$myAlerts.click 没有调用。我在其中添加了警报方法。不起作用。
@James123 - 问题...为什么要调用 uploadPic 对话框并同时通过地图/区域将它们重定向到 MyAlerts.aspx？
@James123 - 对我来说，它看起来只会将您重定向到那个 MyAlerts.aspx 页面。我们应该阻止这种行为。我将编辑点击处理程序。
MyAlerts.aspx 加载页面需要很长时间。所以我想显示一个对话框来显示“请稍候......”类型的对话框......所以用户会知道......发生了什么事......

【解决方案5】：

这是一篇在 asp.net 母版页中使用 jQuery 对话框的有趣文章。

http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/

【讨论】：