Question

I have a personal message system in my website done simply with php/sql. Actually I am facing the trouble to display them using jquery. The db has as fields: message_id, message_from, message_to, message_topic, message_subject and message_status. The way I am showing the message_topic is repeating eight times the following:

echo '<table><tr><td>';
  retrieve_msg_topic($result);
echo '</td></tr>'; //of course I won't make 8 tables!!!

the function called is:

function retrieve_msg_topic($result)
{
   if($row = mysql_fetch_assoc($result))
   {
    echo $row['usernombre'];
    $message_topic = stripslashes($row['message_topic']);

    echo '<div id="msg'.$row['message_id'].'">';
    echo $message_topic;
    echo '</div>';
    //this will return: <div id="msgN">message topic (title, commonly subject)</div>
   }
} //end function retrieve msg topic

So far I have a list on a table with the last eight messages sent to the user. The following row is reserved for pagination (next/prior page) and, after that, another row showing the message I select from the list presented, like we see in Outlook. Here is my headache. My approach is to call another function (8 times) and have all of them hidden until I click on one of the messages, like this:

echo '<tr><td>';
retrieve_msg_content($result);
retrieve_msg_content($result); //repeat 8 times
echo '</td></tr></table>';

the function this time would be something like this:

function retrieve_msg_content($result)
{
  if($row = mysql_fetch_assoc($result))
  {
  echo '<script type="text/javascript">
        $(document).ready(function(){
        $("#msg'.$row['message_id'].'").click(function(){
           $(".msgs").hide(1000);
           $("#'.$row['message_id'].'").show(1000);
           });
        });
        </script>';

  echo '<div class="msgs" id="'.$row['message_id'].'" style="display: none">'
         .$row['message_subject'].
       '</div>';
  }
   /* This function returns:
   // <script type="text/javascript">
   //   $(document).ready(function(){
   //   $("#msgN").click(function(){
   //   $(".msgs").hide(1000);
   //   $("#N").show(1000);
   //   });
   //   });
   //   </script>
   // <div class="msgs" id="N" style="display: none">Message subject (body of message)</div>
   */
} //end function retrieve msg content/subject

I could simply explain that the problem is that it doesn’t work and it is because I do if($row = mysql_fetch_assoc($result)) twice, so for the second time it doesn’t have any more values!

The other approach I had was to call both the message_topic and message_subject in the same function but I end up with a sort of accordion which is not what I want.

I hope I was clear enough.

Answer 1

The easiest way to fix your troubles would be to copy the results of the MySQL query into an array

while($row = mysql_fetch_assoc($result)) {
    $yourArray[] = $row;
}

And then use that to build your tables.

edit: What I meant was more along the lines of this:

while($row = mysql_fetch_assoc($result)) {
    $yourArray[] = $row;
}

echo '<table>';
foreach($yourArray as $i) {
    retrieve_msg_topic($i);
}

echo '<tr><td>';
foreach($yourArray as $i) {
    retrieve_msg_content($i);
}
echo '</tr></td></table>';

And then removing everything to do with the SQL query from those functions, like this:

function retrieve_msg_topic($result) {
    echo '<tr></td>'$result['usernombre'];

    echo '<div id="msg'.$result['message_id'].'">';
    echo stripslashes($result['message_topic']);
    echo '</div><td></tr>';
}

Right now you’re doing some weird key mojo with ret[0] being the topic and $ret[1] being the message, which isn’t a good practise. Also, I don’t see the declaration of $i anywhere in that code.

The error suggests that the result is empty or the query is malformed. I can’t be sure from the code I’ve seen.

A few other notes: it seems weird that you’re using stripslashes() on data that’s directly from the DB. Are you sure you’re not escaping stuff twice when inserting content into the DB?

Always use loops instead of writing something out x times (like the 8 times you said in your question). Think of a situation where you have to change something about the function call (the name, the parameters, whatever). With loops you have to edit 1 place. Without, you need to edit 8 different places.

BTW, another solution to this problem would be using AJAX to load content into the last cell. If you’re curious, I could show you how.

more edits:

For AJAX, build your message list as usual and leave the target td empty. Then, add a jQuery AJAX call:

$('MSG_LIST_ELEMENT').click(function() {
    var msgId = $(this).attr('id').replace('msg','');
    $.get(AJAX_URL+'?msgID='+msgId,function(data) {
        $('TARGET_TD').html(data);
    })
});

Replace the capitalized variables with the ones you need. As for the PHP, just echo out the contents of the message with the ID $_GET[‘msgID’].
However, make sure you authenticate the user before echoing out any messages, so that someone else can’t read someone’s messages by switching the id number. Not sure how authentication works on your site, but this can be done by using session variables.