How to use jquery to perform actions on PHP loop results? - php

Question

I've searched and can't seem to make sense of the answers I've found. Grateful for any help!!
Goal: Reveal selected message detail in section#details below the listed message headers in section#info.
Problem:
The following code alerts a result but won't fadeIn();, (or show();, or ...anything).
The following code is only grabbing the value of the last result in the PHP while loop.
php/html/jquery/javascript:
<section id="info">
<?php
$user = $session->username;
$q = sprintf("SELECT * FROM mail WHERE UserTo = '%s' ORDER BY SentDate DESC",
mysql_real_escape_string($user));
$getMail = mysql_query($q, $link) or die(mysql_error());
if(mysql_num_rows($getMail) == 0) {
echo "<p>you have no mail</p>";
}
else {
?>
<form id="inbox" class="mail">
<fieldset>
<ul>
<li style="border: 2px solid purple; width: 100%;">
<span style="display: inline-block; border: 1px solid black; width: 8%; margin-left: 13%;">Status</span>
<span style="display: inline-block; border: 1px solid black; width: 15%;">From</span>
<span style="display: inline-block; border: 1px solid black; width: 45%;">Subject</span>
<span style="display: inline-block; border: 1px solid black; width: 16%;">Time</span>
</li>
<?php
while($mail = mysql_fetch_object($getMail)) {
$status = $mail->status;
$mailId = $mail->mail_id;
$from = $mail->UserFrom;
$subject = $mail->Subject;
$received = $mail->SentDate;
$theMessage = $mail->Message;
?>
<li class="outerDiv" style="border: 2px dotted purple;">
<button style="display: inline;" class="viewButton">View</button>
<button style="display: inline;">Delete</button>
<?php
echo "<span style='border: 1px solid red;'>" . $mail_id . "</span>";
echo "<span style='display: inline-block; width: 8%; border: 1px solid red;'>" . $status . "</span>";
echo "<span style='display: inline-block; width: 15%; border: 1px solid red;'>" . $from . "</span>";
echo "<span style='display: inline-block; width: 45%; border: 1px solid red;'>" . $subject . "</span>";
echo "<span style='display: inline-block; font-size: x-small; width: 17%; border: 1px solid red;'>" . $received . "</span>";
?>
</li>
<?php }
} ?>
</ul>
</fieldset>
</form>
</section>
<section id="details">
<div class="theMessage" style="display: none;"><?php echo $theMessage; ?></div>
<script type="text/javascript">
$(document).ready(function() {
$(".outerDiv").click(function(e) {
if($(e.target).is(".viewButton")) {
alert($(document).find(".theMessage").text()); //this works
$(document).find(".theMessage").text().fadeIn(1000); //this doesn't work
var theMessage = $(document).find(".theMessage").text();
theMessage.fadeIn(1000); //this doesn't work
}
});
return false; (sometimes prevents default..sometimes not?
});
</script>
</section>
p.s. the crazy colors and borders are/were for temp layout purposes. also, the delete button will obviously have functionality... once I can figure this out.

Answer 1

Instead of
$(document).find(".theMessage").text().fadeIn(1000);
use
$('.theMessage').fadeIn(1000);

Answer 2

Starx is correct, but I figured I'll give an explanation as well.
$('.theMessage').fadeIn(1000);
In case you don't understand why, take a look at http://api.jquery.com/text/ . The text() method only returns a string, not an actual HTML element that you can manipulate (in this case fadeIn). So text() is good to get or set the contents of an element, but to animate you need to call the methods directly on the $('.theMessage') element.