jquery code runs, background changes, but Dialog Not showing
I'm trying to work with a jquery dialog, starting with code from a site at
http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3. I set up a small sample php and modified the code to make an ajax call. It all worked correctly, but when I tried to migrate the code to an existing php page, what happens is the back ground changes to the grayed out color, but the dialog box does not appear. I put alerts in each of the jquery procedures, which all fire, but I can't find the reason why the dialog doesn't show.
The code seemed pretty straight forward, but I was modifying an existing php page I didn't write, so I'm not sure if I'm missing something being new to jquery. Here's the code from an called html file that includes the jquery code followed by the php page code I changed to include the dialog div tag. I removed most of the php code leaving just the final page code that includes the div for the dialog. The css is straight from the sample code in the web page listed above.
If someone could give me some direction into looking for reasons the dialog does not appear it would be greatly appreciated, especially since I'm soooo close to getting this to work.
Thanks,
Tom
<html>
<head>
<title>Test Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jdialog.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function () {
// if user clicked on button, the overlay layer or the dialogbox, close the dialog
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
// if user resize the window, call the same function again
// to make sure the overlay fills the screen and dialogbox aligned to center
$(window).resize(function () {
//only do it if the dialog box is not hidden
if (!$('#dialog-box').is(':hidden')) popup();
});
});
//Popup dialog
function popup(message) {
// get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// calculate the values for center alignment
var dialogTop = (maskHeight/2) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
// display the message
$('#dialog-message').html(message);
}
function GetNoteData(NoteID)
{
$(function()
{
$.ajax({
type: "GET",
url: "displaynotedata.php?NoteID="+NoteID,
dataType: "xml",
success: function(xml) {
var i;
i=0;
$(xml).find("response").each(function(){
// var ID = $(this).attr("id")
var ID = $(this).find("ID").text();
var Title = $(this).find("title").text();
Title = TrimStr(Title);
var Priority = $(this).find("priority").text();
var DueDate = $(this).find("duedate").text();
var Notes = $(this).find("notes").text();
var HouseholdFirstName = $(this).find("householdfirstname").text();
var HouseholdLastName = $(this).find("householdlastname").text();
var HouseholdName = HouseholdLastName + ', ' + HouseholdFirstName;
var DueDate = $(this).find("duedate").text();
var CompleteDate = $(this).find("completedate").text();
if (CompleteDate == 'OVERDUE')
{
CompleteDate = "<a href=tsnooze.php?ID=" + ID + "><img src='snooze.gif' border=0></a>";
//CompleteDate = ID;
}
var ToDoStaffUserID = $(this).find("todostaffuserid").text();
var RepeatPattern = $(this).find("repeatpattern").text();
if (RepeatPattern == "")
{
RepeatPattern = "None";
}
var PrivateNote = $(this).find("privatenote").text();
if (PrivateNote == "Y")
{
PrivateNote = "Yes";
}
else
{
PrivateNote = "No";
}
var htmlVal = "<table border='0' width='100%'><tr><td width='75%'><h3>" + Title + "</h3></td><td width='25%'><b>Priority:</b> " + Priority + "</td></tr><tr><td width='75%'><b>Private Note:</b> " + PrivateNote + "</td><td width='25%'><b>Due Date:</b> " + DueDate + "</td></tr><tr><td width='75%'><b>Repeat Pattern:</b> " + RepeatPattern + "</td><td width='25%'><b>Household Name:</b> " + HouseholdName + "</td></tr><tr><td width='75%'> </td><td width='25%'><b>Staff User:</b> " + ToDoStaffUserID + "</td></tr><tr><td width='75%'> </td><td width='25%'><b>Completed:</b> " + CompleteDate + "</td></tr><tr><td colspan='2'><b>Notes:</b></td></tr><tr><td colspan='2'>" + Notes + "</td></tr></table>";
popup(htmlVal );
i++;
}); //close each(
CurrentIndex++;
}
}); //close $.ajax(
}); //close $(
}// end function
function TrimStr(str)
{
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
</script>
</head>
PHP Page Code
<?
include "list_notes.inc";
include "body.inc";
put_file("listheader.html");
# put_file("body.html");
put_body_top();
?>
<center><a href="index.php?action=list_menu">Main Menu</a> |
<a href="index.php?action=list_menu">Main Menu</a> |
</center>
</td>
</tr>
</table>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
<a href="#" class="button">Close</a>
</div>
</div>
END OF BODY
</body>
</html>