我在主页中添加了下面的代码。我能够得到alert("I am in onload Function");
,但jQuery("uploadPic")。对话不工作。<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的引用:
<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>
元素中不引用jQuery,在<script>
元素中不引用jQuery UI,在<link>
元素中不链接到一些jQuery UI css,并且在通过id jQuery("#uploadPic)
选择时不使用octothorpe #
,您也永远不会调用您的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>
我认为你的直接问题是,你没有一个#在unloadPic前面在你的选择器在顶部,当你正在创建对话框。它不知道你要选择什么,因此永远不会创建对话框。
另外,如果你正在使用jQuery,为什么不附加一个点击处理程序为您的dialog()
使用jQuery?
<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");
,但我不确定它到底是做什么的。
这是一篇在asp.net主页中使用jQuery对话框的有趣文章。
http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/