I added below code in the masterpage. I am able to get alert("I am in onload Function");, but jQuery("uploadPic").dialog not working. The <div> portion showing on the page.
I am using reference to jQuery is
<script type=text/javascript src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
I tried $('#uploadPic').dialog also. But did not work.
<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>
On top of not referencing jQuery in a <script> element, and not referenceing jQuery UI in a <script> element, and not linking to some jQuery UI css in a <link> element, and not using an octothorpe # when selecting by id jQuery("#uploadPic), you also never call your showDialog(...) function:
function showDialog(id) {
alert("Hi");
$('#' + id).dialog("open");
alert("End");
}
Since you have specified autoOpen: false when you called 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");
}
});
... the dialog is not visible at first. You have to call either open(...) or dialog("open") - like you did in your showDialog(...) function.
But since you never call that function, it never opens the dialog.
Try this:
<!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>