PHP返回的代码没有显示，但它曾经用过

I run a website for my church. In a database on the server, we store all of the newest sermons' information so that when a user clicks a button on the first page, the newest sermons will show up in a div. For a long time, everything was working just great, but now, the returned code just doesn't show up.

The weird thing is, if I open the page in Google Chrome and hit "Inspect Element" over the div, the returned code just appears. It looks perfect... After I have done that, clicking on the button will again load the info from the database and it will show up; if I refresh the page, however, the returned stuff goes away again until I inspect the element.

Try it for yourself here. Click the orange button labeled "New Message."

NOTE:

• The div that pops up is id navNew
• The background transparent div that pops up is id navBackground
• Within the div id navNew, I have a p id navNewBody that holds the information returned by the get PHP page below.

My code for the PHP getter page:

<?php

$link = mysql_connect('domain', 'username', 'password'); 
if (!$link) { 
    die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db(flf);

$r = mysql_query("SELECT * FROM new");
$first = mysql_num_rows($r);

$last = $first - 20;
echo '<p class="NavHead">New Sermons<br/><table width="90%" border="0" cellpadding="0" cellspacing="0">';

$ind = 0;

while($first > $last){

$me=mysql_fetch_array(mysql_query("SELECT * FROM new WHERE id='" . $first . "'"));
$name = $me["name"];
$row = 21-$ind;
echo '<tr id="row' . $row . '" class="navClosed" onclick="expand(' . "'" . 'row' . $row . "'" .  ',' . $row . ')"><td colspan="4">&nbsp;' . $name . '</td></tr><tr id="row' . $row . 'e" style="visibility: hidden" class="navOpenClosed" onclick="dismiss(' . "'" . 'row' . $row . "'" . ')"></tr>';
$first = $first - 1;
$ind = $ind + 1;
}

echo "</table></p>";
?>

And here is the code I use to access the page (yes I imported jQuery):

function retNew(){
    document.getElementById("navNewBody").innerHTML = '<span class="NavHead"><p align="center">Loading...Please Wait...<br/><br/><br/><img src="Sermons/Style/Loading.gif" /></p></span>';
    document.getElementById("navNew").style.visibility = "visible";      

    $("#navNewBody").load("retNew.php");
}

What's wrong? It just doesn't make sense to me. I set the z-index to 10,000,000 and nothing happened. Any ideas? Thanks in advance.

I think you visibility is messing with the content. Try to use this load.

function retNew(){
   $('#navNewBody').html('<div class="NavHead"><p align="center">Text</p></div>')
                   .load('retNew.php');
   $('#navNew').fadeIn();      
}

As of the close button, in your case it should be something like that:

<div id="navNew">
  <a class="LargeNameU" onclick="offNavNew();return false;" 
            style='position:fixed; z-index: 1000; right:0px;top:0px'>
       <img src="Sermons/Style/x.png" border='0'>
  </a>
<p align="center" style="z-index:10000000" id="navNewBody">

and so on. Your .navNew already has a fixed position.

The visibility property has some very weird problems. I would recommend using display instead. The only difference between the two is that display removes the element entirely when it's set to none, while visibility just essentially makes the element invisible (but still leaves a space in the page where the element was).