logo标签列表

Jquery对话框在主页面中无法工作？

jqueryasp.netupdatepanelmaster-pagesupdateprogress
3
我在主页面添加了以下代码。我能够得到 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>
1
你提到了已经包含了 jQuery，但是你也包含了 jQuery UI 来获取 .dialog() 函数吗？如果有，那么你在控制台中是否收到任何错误信息？ - Rory McCrossan
5个回答
3

您没有添加对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。

<script type=text/javascript src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> 加上这行代码。仍然不起作用。 - James123
3
你提到已经包含了jQuery，但是你是否也包含了jQuery UI以获得访问.dialog()函数的权限？
我没有参考任何jQuery UI。我在哪里可以找到相关的参考资料？ - James123
我应该使用jQuery("uploadPic").dialog还是$("#uploadPic").dialog？我已经添加了UI引用。 - James123
1
$("#uploadPic").dialog 是通过ID引用的。 - Rory McCrossan
2
除了不在 <script> 元素中引用 jQuery，不在 <script> 元素中引用 jQuery UI，不在 <link> 元素中链接一些 jQuery UI css，以及在通过 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
@James123 - 这是针对我上面给出的示例的问题，还是当您将我描述的解决方案应用于您的主页面时出现的问题？另外，使用的是哪个浏览器？ - Richard JP Le Guen
我现在正在使用IE9。我正在使用类似于你的$(document).ready。 - James123
@James123 - 但是你在主页面中使用了$(document).ready吗？还是问题出在我的示例中？我没有看到我的示例有任何问题。 - Richard JP Le Guen
@James123 - 这仍然不是你实际想要实现的内容。你的问题非常具有误导性。你在我的答案评论中说的要点是，当页面或操作花费太长时间时，你想要一个Ajax加载/处理模态框，让用户知道正在处理。这就是为什么我向你介绍了ASP.NET / MasterPages的UpdatePanel和UpdateProgress路径。如果你愿意，也可以使用$.ajax来完成同样的事情，但我认为你应该先学习.NET路线。使用dialog()不是实现这种效果的正确方式。 - Code Maverick
1

我认为您目前的问题是，在创建对话框时，选择器顶部没有在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");，但我不确定它具体是做什么的。我会认为它会执行应该执行的操作。

$myAlerts.click没有被调用。我在其中添加了alerts方法，但不起作用。 - James123
@James123 - 问题是...为什么你要通过map/area同时调用uploadPic对话框并将其重定向到MyAlerts.aspx页面？ - Code Maverick
@James123 - 对我来说，它看起来只会将您重定向到MyAlerts.aspx页面。我们应该防止这种情况发生。我会编辑点击处理程序。 - Code Maverick
MyAlerts.aspx加载页面的时间太长了。因此，我想显示一个对话框来显示“请稍等…”这样的提示框，这样用户就会知道…有些事情正在发生… - James123
@Scott：你有关于“等待弹出窗口”直到页面加载完成的示例吗？联系我，我的邮箱是getur.srikanth@gmail.com。 - James123
显示剩余3条评论
-1

这是一篇有趣的文章，介绍了如何在ASP.NET主页面中使用jQuery对话框。

http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接