August 2, 2011

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

Question by tchnchn

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:

  1. The following code alerts a result but won’t fadeIn();, (or show();, or …anything).
  2. 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 by Starx

Instead of

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

use

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!