Question

I’ve for a while on my website had a simple PHP message system, worked fine, stores the data into MySQL and each message has a unique ID. Well out of nowhere I decided to add in jQuery effects for when you send and delete messages. I can get it to work if its just one message, but when there multiple messages, the jQuery can’t figure out where to pull the info from because the data needs unique ways of identifying what’s what.

Here’s what I’ve done to try and fix it.

    $get_new_messages = mysql_query("SELECT * FROM messages WHERE to_user='$id' AND message_read = '0' ORDER BY message_id DESC");
    while($messages = mysql_fetch_array($get_new_messages))
    {
    $message_id = $messages['message_id'];
    $from = $messages['from_user'];
    $from_username = $messages['from_username'];
    $pic_from = $messages['defaultpic_from'];
    $title = $messages['message_title'];
    $content = $messages['message_contents'];


    $new_messages .="<!--TITLE-->
    <div id=\"div_$message_id\"><!-- ACCORDION ELEMNT BEGINING-->
    <script type=\"text/javascript\">
    $(document).ready(function(){
        $(\"#reply_message_$message_id\").click(function() { 
        var to_user_$message_id = encodeURIComponent($('#to_user_$message_id').val()); 
        var from_user_$message_id = encodeURIComponent($('#from_user_$message_id').val())); 
        var defaultpic_from_$message_id  = encodeURIComponent($('#defaultpic_from_$message_id').val()); 
        var defaultpic_to_$message_id = encodeURIComponent($('#defaultpic_to_$message_id').val()); 
        var your_username_$message_id = encodeURIComponent($('#your_username_$message_id').val()); 
        var message_title_$message_id = encodeURIComponent($('#message_title_$message_id').val()); 
        var message_contents_$message_id = encodeURIComponent($('#message_contents_$message_id').val()); 
        var location2 = '#div_$message_id';
        var location3 = '#reply_success';
            $.ajax({ 
                type: \"POST\", 
                url: \"send_note.php\", 
                data: {to_user:to_user_$message_id, from_user:from_user_$message_id, defaultpic_from: defaultpic_from_$message_id, defaultpic_to:defaultpic_to_$message_id, your_username:your_username_$message_id, message_title:message_title_$message_id, message_contents:message_contents_$message_id}, 
                success: 
                $(location2).fadeOut();
                $(location3).fadeIn();
            }); 
        return false; 
        }); 

        $(\"#delete_message_button_$message_id\").click(function() {
        var  deleteId    = $('#deleteID_$message_id').val();
        var  location = '#div_$message_id';
        var location4 = '#delete_message_success';
            $.ajax({
                type: \"POST\",
                url: \"delete.php\",
                data: \"deleteId=\"+ deleteId,
                success: 
                $(location).fadeOut();
                $(location4).fadeIn();

            });
        return false;
        });

    });
    </script>
    <div class=\"title\">
    $title
    </div>
    <!--TITLE END-->


    <div class=\"inside\"><!-- THIS DIV CONTAINS EVERYTHING INSIDE THE SELECTED ACCORDION ELEMENT-->

<form name=\"send_note_$message_id\" id=\"$message_id\" class=\"form_right\">
    <input type=\"hidden\" name=\"message_id_$message_id\" id=\"message_id_$message_id\" value=\"$message_id\">
    <input type=\"hidden\" name=\"to_user_$message_id\" id=\"to_user_$message_id\" value=\"$from\">
    <input type=\"hidden\" name=\"from_user_$message_id\" id=\"from_user_$message_id\" value=\"$id\">
    <input type=\"hidden\" name=\"defaultpic_from_$message_id\" id=\"defaultpic_from_$message_id\" value=\"$default_pic_session\">
    <input type=\"hidden\" name=\"defaultpic_to_$message_id\" id=\"defaultpic_to_$message_id\" value=\"$pic_from\">
    <input type=\"hidden\" name=\"your_username_$message_id\" id=\"your_username_$message_id\" value=\"$username_session\">
    <input type=\"hidden\" name=\"message_title_$message_id\" id=\"message_title_$message_id\" value=\"$username_session Replied to your Note!\">
    <img class=\"pic_from_body_right\" src=\"$default_pic_session\">
    <textarea class=\"message_text\" name=\"message_contents_$message_id\" 

    id=\"message_contents_$message_id\" placeholder=\"Reply to $from_username here...\"></textarea>
        <br />

        <p class=\"reply_delete\">
        <input type=\"hidden\" id=\"deleteID_$message_id\" value=\"$message_id\">
        <button id=\"delete_message_button_$message_id\">Delete</button>
        <button id=\"reply_message_$message_id\">Reply</button>
        </p> 
        </form> 
        </div>
        </div>";    
    }

It grabs the message and echos it out correctly, all of that works fine, just the jQuery delete and reply doesn’t work. Can’t figure it out. Is there maybe a way to have the jQuery in a separate file but the jQuery will know the correct message to delete.

Answer 1

I would try to never ever do this unless I had no choice. Writing code for a different language in another language’s string will lead to debugging issues, syntax errors not being picked up, and looking very ugly. It’s passable with HTML, but if it’s something that can break functionality and halt further scripts, it’s best to avoid this practice.

Since you’re using double quotes for HTML element attributes, I would consider using heredocs if you found no other way to provide the JavaScript externally.

I would try and include all the JavaScript files in an external file and call methods there. Also, if you’re going to print out a variable in double-quotes in PHP like $myvar alongside HTML, it’s best to use {$my_var} since this will ensure it is picked up as a variable and not parsed as just text due to the underscores and following text. Are you able to view the source code of this echo and determine that the JavaScript looks as it should? Use the JavaScript console in Chrome or Firefox (FireBug) or similar to see if you’re receiving any errors.