Setting div unique id

Question

I am echoing comments from database and echo looks like this:

echo $status->comment.'

        <textarea id="'.$status->id.'"></textarea>

';

Now i have this code:

<script type="text/javascript">
    $(document).ready(function() {

        $('#'+'<?php echo $status->id;?>').keypress(function(event) {

            var key = (event.keyCode ? event.keyCode : event.which);
            if (key == 13) {

                var comment = $('#' + '<?php echo $status->id;?>').val();
                var status = '<?php echo $status->id;?>';

                $.ajax({
                        method: "POST",
                        url: "file.php",
                        data: {status: status, comment: comment},
                        success: function(status) {
                        }
                    });
            };
        }); 
    });
</script>

And it is not working... But when i set id to some name like comment and put it everywhere like this:

<textarea id="comment"></textarea>

 $('#comment').keypress(function(event) {

var comment = $('#comment').val();

It works but only for first row in database like if I have 3 posts and post ids are 12, 17, 33. And I am commenting on post with id 33 it saves values to post with id 12 only to that one... Any help?

UPDATE:

I am using foreach and for each post from database I am echoing this:

echo "<div id='spacer'></div><div id='statusess' style='background: rgba(255,255,255,0);'><div id='pader' style='background-color:".$statuscolor.";'><div id='statuses' style='background: rgba(255,255,255,0.5);'><div id='rod'><a href='d/".$page."?fromid=".$frid."&toid=".$status->fromid."&forid=".$status->id."'>$rord</a></div> <a href='profile.php?u=".$status->fromid."'> <img src='../juzer/".$status->fromid."/profile/".$status->profilepic."'width='30px' height='30px'> ".$status->fromname."</a><br />".$status->text."<br /><br /><a href='d/npostlikes.php?u=".$frid."&type=status&id=".$status->id."'><img src='d/likes/like.png' width='20px' height='20px'></a>".$count."<textarea id='comm1_".$status->id."'  name='comm1'   onkeyup='textAreaAdjust(this)' style=' resize: none; width: 300px; height: auto; '></textarea>";

The end of echo is my problem and the problem is that when I press key it saves to database only first post id from posts database. So basically i am trying to say that every comments it is storing as comments for only first post from posts database... So I want to add id to each textarea as unique so when ssomeone press key it saves to that id not first one only....

Answer 1

You are doing it wrong when trying to build the selector with PHP in the Javascript.

This:

$('#'+'<?php echo $status->id;?>')...

Should be:

$('#<?php echo $status->id;?>')...

You should also add some string to the ID to avoid conflict with other elements having similar IDs. For example:

$('#comment_<?php echo $status->id;?>')...

EDIT: I misread the last part of your questions, and apparently I only answered partially to it. For the rest would be better if you could post more code so I can help better.

Answer 2

Wrap your comments in a div like so:

<div id="commentsDiv"></div>

With that, event handlers could be easily attached to dynamically generated elements. The script below should work for you.

<script type="text/javascript">

$(document).ready(function() {
 $("textarea").keypress(function(event) {

    var commentId = $(this).prop('id').split("_")[1];

    var key = (event.keyCode) ? event.keyCode : event.which;

    if (key == 13) {
        var comment = $('#'+commentId).val();

        var status = commentId;

        $.ajax({
            method: "POST",
            url: "file.php",
            data: {status: status, comment: comment},
            success: function(status) {}
        });
    }

    else{
        alert("Code of key pressed is: " + key);
    }
 }); 

});
</script>

Note: Don't forget to remove the alert.

Answer 3

ID can't be just a numeric value.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Also try this way to get the right textarea ID

$("textarea").keypress(function(event) {
  // get the id 
  currentId = $(this).prop('id');
  // your code
});