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....

Please check this link : http://stackoverflow.com/questions/7987636/why-cant-i-have-a-numeric-value-as-the-id-of-an-element ID can't be only numeric, you have to put some text before to make it works — Vincent G, Apr 12 '16 at 14:40

BeoWulf · Answer 1 · 2016-04-12T14:30:24.393

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.

Amir · Answer 2 · 2016-04-12T16:21:42.500

0

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.

edited Apr 12 '16 at 16:21

answered Apr 12 '16 at 14:43

Amir

98
1
1
5

`
` ??? Multiple comments therefore multiple `div` with the same `id` is not legal!
– RiggsFolly Apr 12 '16 at 14:46
No. His new comments will be placed inside the `
`, not that he will be loading the whole `
` each time. This is to allow event handler to be attached to the dynamically created `id` in the `textarea`.
– Amir Apr 12 '16 at 15:03
@Amir should i leave textarea id as comment ? does it matter if it stays like that or not? – StupidProgrammer Apr 12 '16 at 15:03
@StupidProgrammer, if your php script will be generating the `textarea` each time, then the `id` should be set in the `php` file and remove it from the `
` (see edit).
– Amir Apr 12 '16 at 15:06
It will be helpful if you can share the content of the `php` file. – Amir Apr 12 '16 at 15:08
Didn't quite get your explanation in the update but you can get the id of the textarea you just add a comment like this `$(this).prop('id').split("_")[1]` since the id of each textarea is prefixed with `comm1_` (see updated answer). Besides, what does the `file.php` script do when the ajax request is sent to it? – Amir Apr 12 '16 at 15:56
just insert into comments table values and it is inserting for every comment on any post the same values like if there are 2 posts and i am commenting on 2 one it inserts like i commented on the first one.... so basically status->id is wrong ... but why is it wrong ? how can i tell ajax to send $status->id value from the post i am commenting on – StupidProgrammer Apr 12 '16 at 16:06
OK. You have to do that by getting the id of the post you are commenting on. If the `id` of the post is the one you attached to the textarea, prefixed with `comm_`, then use my updated answer. It should work so far you set the post ID properly in your foreach loop. – Amir Apr 12 '16 at 16:11
It wont work... pff nevermind I will do it other way .... When I limit the output posts to 1 it do it like i want so i dont know how to reslove that but I will just but button for comment here and load to another page where it will be just that one post... – StupidProgrammer Apr 12 '16 at 16:20

score 0 · Answer 3 · answered Apr 12 '16 at 14:43

0

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
});

answered Apr 12 '16 at 14:43

Vincent G

8,547
1
18
36

Yes it it : https://jsfiddle.net/yz4x5ket/1/ Try typing in any textarea, you will get the value of current ID – Vincent G Apr 12 '16 at 15:03

Setting div unique id

3 Answers3