Variable passing to JavaScript function is not changing

Question

I'm trying to implement a feature for reporting a comment on a site. I'm using PDO and have the function in a PHP class.

When clicking 'report' a JS function is called that uses Ajax to then call the PHP function that'll update the database / email the admin.

I can't see why but the id getting passed to the JS is always the same.

I've done various outputs to test and within the HTML the id is correct. There are currently 3 different ones that I'm testing. When I alert the id in the function it is always the same.

Any help is much appreciated.

The HTML:

<? foreach ($comments as $c){
   $commentId = $c['id']; ?>
     <p><a href="#" id="report" name="report" data-value="<?php echo $commentId ?>" onclick="reportComment(); return false;">Report?</a></p>
<? } ?>

The JS:

function reportComment(){

var id = $('#report').attr('data-value');
var url = "/Perspect/commentsAjax/report.php";
var params = {id: id};

$.ajax({
    cache: false,
    type: 'POST',
    url: url,
    data:params,
    dataType:'json',

    success: function(){
        alert("sucess");
        //change ahref to say this comment has been reported
    },
    error: function(error){
        console.log(error);
    }
});
alert("ID" + id);
}

PHP:

<?php include '../core/init.php';

if($_POST){
  $id = $_POST['id'];
  $articleComments->reportComment($id);
}
?>

@kingkero Just changed to class and still same result...am I missing something else? — null
– null, Commented Sep 27, 2013 at 13:14
You're using the same "id" value over and over again, and that's wrong. The values of "id" attributes need to be unique. — Pointy
– Pointy, Commented Sep 27, 2013 at 13:14
I really wonder why people use inline event handlers, when it's so simple to use jQuery's .on, .click and similar methods. But yeah, IDs have to be unique. Use a class name. — Mark
– Mark, Commented Sep 27, 2013 at 13:16

kero · Accepted Answer · 2013-09-27 13:30:44Z

3

The problem is that all of your links share the same id="report", so you can't access a single one of them (but JS will automatically select the first appearence). This could be resolved by simply passing the id as a parameter.

<p><a href="#" name="report" onclick="reportComment(<?php echo $commentId; ?>); return false;">Report?</a></p>
//...
function reportComment(id){

When you want to manipulate the element after the click, you can do it like the following

<? foreach ($comments as $c){
   $commentId = $c['id']; ?>
     <p><a href="#" id="report_<?php echo $commentId ?>" name="report" onclick="reportComment(<?php echo $commentId ?>); return false;">Report?</a></p>
<? } ?>

Now you have unique ids report_1, report_2 etc. and your JS could be like the following

function reportComment(id){
    //do your stuff
    $("#report_"+id).text("already reported");

As was suggested in the comments of your question, this can also be solved using only JavaScript (by the help of jQuery), you wouldn't need the onclick logic in your HTML

<a class="report" data-value="1">report</a>
<a class="report" data-value="2">report</a>

and this could be the JS

$(".report").click(function(){
    var id = $(this).attr('data-value');
    //do your magic
    $(this).text('already reported');
});

edited Sep 27, 2013 at 13:30

answered Sep 27, 2013 at 13:14

kero

10.7k5 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

null Over a year ago

legend! Thank you! Can you advise on how to update the a href tag to reflect that it's been reported?

null Over a year ago

Hey kingkero, I'm trying to implement the already reported part but I can't seem to get it working. I've placed the ,text("reported") part in the success function of the ajax call and at the end of the function but neither seem to do anything. Could you point out where I might be going wrong please?

kero Over a year ago

Which version are you using - are you sure the object you are working on is the correct one (either $("report_"+id) or $(this)), try using alert for debugging

null Over a year ago

HA! Brilliant! Realised my mistake! :) I think I need to implement it a touch further so that if there is a report in the databse it showes reported instead of the report link. I think I also need to turn the link inactive when it's been selected by a user. Thanks loads for your help!

Collectives™ on Stack Overflow

Variable passing to JavaScript function is not changing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related