Jquery диалог не работает на главной странице?
Я добавил ниже код на главной странице. Я могу получить 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>
5 ответов
На вершине не ссылаясь на JQuery в <script> элемент, и не ссылаясь на JQuery UI в <script> элемент, а не ссылки на некоторые jQuery UI CSS в <link> элемент, а не с помощью восьмигранника # при выборе по идентификатору jQuery("#uploadPic)Вы также никогда не называете showDialog(...) функция:
function showDialog(id) {
alert("Hi");
$('#' + id).dialog("open");
alert("End");
}
Поскольку вы указали autoOpen: false когда ты позвонил 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");
}
});
... диалог сначала не виден Вы должны позвонить либо 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>
Вы не добавили ссылку на 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({
как вы нацелены на div с идентификатором.
Вы упомянули, что включили jQuery, но включили ли вы также jQuery UI, чтобы получить доступ к функции.dialog()?
Я думаю, что ваша непосредственная проблема в том, что у вас нет # перед 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");, но я не уверен, что именно это делает. Я бы предположил, что он делает то, что должен.
Вот интересная статья, использующая диалог jQuery на главной странице asp.net.
http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/