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

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.

Separate your PHP and HTML/JS for great success. They exist in two different space/time continua. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Aug 2, 2011 at 1:18
I was wondering if there was some kind of different load time issue going on. So, I can put my JS at the bottom of the page but, don't I need to have the html inside the PHP while loop? — Matt Rose
– Matt Rose, Commented Aug 2, 2011 at 1:21
I mean, narrow down your problem. Take the processed output from PHP and use that as your question input if your HTML/JS is the issue. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Aug 2, 2011 at 1:22
will do. thanks. i'll re-post with different tags for the second issue. — Matt Rose
– Matt Rose, Commented Aug 2, 2011 at 1:43

Lightness Races in Orbit · Accepted Answer · 2011-08-02 01:18:36Z

1

Instead of

$(document).find(".theMessage").text().fadeIn(1000);

use

$('.theMessage').fadeIn(1000);

edited Aug 2, 2011 at 1:18

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Aug 2, 2011 at 1:16

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lightness Races in Orbit Over a year ago

To clarify, the important thing here is that you should not attempt to fade a text string, but the DOM node itself.

Matt Rose Over a year ago

$(document).ready(function() { 		        $(".outerDiv").click(function(e) { 		            if($(e.target).is(".viewButton")) { 						$('.theMessage').fadeIn(1000); 		            } 		        }); 		        return false; 			});

is that what you mean? tried it.. didn't work. did I do something different than what you meant?

Starx Over a year ago

@tchchn, thats' the way to do it :)

Matt Rose Over a year ago

hmm. ok. thanks for your help. I guess I'll keep playing with it and see what I can come up with.

Starx Over a year ago

@tch, Since I see you are pretty new to this community. Make a habit of accepting answers, if it solves your problem.

aiham · Accepted Answer · 2011-08-02 01:23:11Z

1

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.

answered Aug 2, 2011 at 1:23

aiham

3,62430 silver badges32 bronze badges

1 Comment

Matt Rose Over a year ago

ok. here's an interesting thing... I kept my code exactly as I have it above with only one change. I changed the <button> to a <div>... and now it works. weird.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related