php variable in ajax doesn't change value - php

Question

I have a button into a while loop on a PHP file.
The button is associated to a PHP value that is changing with mysqli_fetch_array.
I load only 3 values in my mysqli_fetch_array.
My ajax function has data in it, my problem is that it is only accepting first row's value, and not other rows value. In fact, the function is ok just at the first row of the mysqli_fetch_array, and it seems that my code is not working on the other rows, like if PHP loop stopped at first row.
Here is my javscript code (it is declared on the same page of my loop, after the while):
<script type="text/javascript">
$(document).ready(function() {
$("#up").click(function() {
var varno_commentaire = $("#no_commentaire").val();
$.ajax({
url: "upvoteCommentaire.php",
type: "POST",
data: {
no_commentaire: varno_commentaire
},
async: false,
success: function(result) {
alert(result);
}
});
});
});
</script>
And here is my PHP loop :
<?php
while($comm = mysqli_fetch_array($res2))
{
echo
'<label class="text-muted">'.$comm['desc_commentaire'].'</label>'.
'<p>'.
''.'#'.$comm['login'].''.
'<p>'.
'<label>'.$comm['vote_commentaire'].' points'.'</label>'.
'<p>'.
'<input type="text" value="'.$comm['no_commentaire'].'" id="no_commentaire"/>'.
'<button class="btn btn-default" name="up" id="up">+</button>'.
'&nbsp'.
'<button class="btn btn-default" name="down" id="bold" onclick="downvote()">-</button>'.
'<p>'.
'<hr/>';
}
?>
I hope it will be easy to understand. Any help will be appreciated, I've been stuck on it for a moment. Thanks a lot.

Answer 1

First of all, you can't declare more than once an id. ID should be unique. You can pass the ID into a HTML attribute.
Your loop:
<?php
while($comm = mysqli_fetch_array($res2))
{
echo
'<label class="text-muted">'.$comm['desc_commentaire'].'</label>'.
'<p>'.
''.'#'.$comm['login'].''.
'<p>'.
'<label>'.$comm['vote_commentaire'].' points'.'</label>'.
'<p>'.
'<input type="text" value="'.$comm['no_commentaire'].'"/>'.
'<button class="btn btn-default btn-up" data-id="'.$comm['no_commentaire'].'">+</button>'.
'&nbsp'.
'<button class="btn btn-default btn-down" data-id="'.$comm['no_commentaire'].'">-</button>'.
'<p>'.
'<hr/>';
}
?>
Your script:
<script type="text/javascript">
$(document).ready(function() {
$("button.btn-up").click(function() {
var varno_commentaire = $(this).data('id');
$.ajax({
url: "upvoteCommentaire.php",
type: "POST",
data: {
no_commentaire: varno_commentaire
},
async: false,
success: function(result) {
alert(result);
}
});
});
});
</script>

Answer 2

ID are meant to be used only once on the entire page. In your case every element in while loop of PHP has same ID. So when you take the value of element by $("#no_commentaire").val(), it takes the first element's value ignoring the rest of the elements on the page.
Solution to your problem is to have a class instead of ID of the elements and access the same by parent child releationship in the jQuery. So you only get the value of selected/clicked section.
Your PHP code would look something like this,
<?php
while($comm = mysqli_fetch_array($res2))
{
echo
'<div class="parent-class">'.
'<label class="text-muted">'.$comm['desc_commentaire'].'</label>'.
'<p>'.
''.'#'.$comm['login'].''.
'<p>'.
'<label>'.$comm['vote_commentaire'].' points'.'</label>'.
'<p>'.
'<input type="text" value="'.$comm['no_commentaire'].'" class="no_commentaire"/>'.
'<button class="btn btn-default up" name="up">+</button>'.
'&nbsp'.
'<button class="btn btn-default" name="down" id="bold" onclick="downvote()">-</button>'.
'<p>'.
'</div>'.
'<hr/>';
}
?>
and jQuery code would look something like this,
<script type="text/javascript">
$(document).ready(function() {
$(".up").click(function() {
var varno_commentaire = $(this).parent().child(".no_commentaire").val();
$.ajax({
url: "upvoteCommentaire.php",
type: "POST",
data: {
no_commentaire: varno_commentaire
},
async: false,
success: function(result) {
alert(result);
}
});
});
});
</script>