Can only delete first row with Ajax

Question

I have a page that prints out rows from a mysql table. I'm trying to create an ajax form that allows users to delete rows but for some reason I can only seem to get it to delete the very top row that is printed out. I've only included the script that might be needed here and left out the database query(which works fine).Firebug only shows my form being posted when I click the top row of results, any other rows it does nothing. Can anyone tell me what's wrong? Thanks

My_reviews.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>

<script type="text/javascript">
//Delete Review
$(document).ready(function(){
$("#deleteReview").click(function (e) {
        e.preventDefault();


 var username=$("#username").val();
 var film_id=$("#film_id").val();
 var id=$("#id").val();


 $.post('ajax_deleteReview.php', {username: username, film_id:    film_id, id: id},
 function(data){
$("#message").html(data);
 $("#message").hide();
$("#message").fadeIn(500);
$("#message").fadeOut(2500); 
});
return false;
});
});
</script>
</head>

<div class="container">
<div id="message"></div>
<?php
  $sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc";
$result = $db_conx->query($sql);
 while($row = $result->fetch_assoc()) {
$id = $row['id']; 
$film_id = $row['film_id']; 
$review = $row['review']; 
$movie = $tmdb->getMovie ($film_id);

echo ' 
<div class="row">
        <div class="col-md-1">

<a href="film_info.php?film_id='. $movie->getID() .'"><img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" /></a>
<p>
</p>
</div>
  <div class="col-md-4">
          <h3>
             ' . $movie->getTitle() .'  
          </h3>';
echo'
          <p>
            '.$review. '
          </p>

<form>
    <input type="hidden" id="username" name="username" value="'. $username.'">
<input type="hidden" id="film_id" name="film_id" value="'.$film_id .'">
<input type="hidden" id="id" name="id" value="'.$id .'">
<button type="submit" id="deleteReview" class="btn btn-danger btn-xs pull-right">delete</button>
</form>
        </div>
        <div class="col-md-7">
        </div>
      </div>';

}
?>

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
      </script>
    </div>
    </body>
    </html>

ajax_deleteReview.php

<?php
//include db configuration file
include_once("ajax_review/config.php");
//Configure and Connect to the Databse
 $username=$_POST['username'];
 $film_id=$_POST['film_id'];
 $id=$_POST['id'];
//Delete Data from Database
 $delete_row = $mysqli->query("DELETE * FROM `user_reviews` WHERE     id='$id' AND username='$username' AND film_id='$film_id' LIMIT 1");
if($delete_row){
echo '<img src="images/tick_large.png"/>';
 }
 else{ echo "An error occurred!"; }
 ?>

Side note: You could just make use of that SQL injection vulnerability to delete other rows, or any row, or the entire database... — David
– David, Commented Dec 28, 2015 at 18:46
More to the point: Where are your "rows" in the UI? You have only one form with only one set of values. So it's only going to delete whatever single value is specified in that form. — David
– David, Commented Dec 28, 2015 at 18:48
I've added the rest of the html so you can see how the rows are echoed out on the page. Thanks. — JulianJ
– JulianJ, Commented Dec 28, 2015 at 19:37
@JulianJ: If you are emitting more than one row then you have duplicate ids in your HTML, which is invalid. So the behavior of the JavaScript which gets values based on the id is undefined. Fix your HTML before trying to debug other problems. — David
– David, Commented Dec 28, 2015 at 20:05

Mr Lister · Accepted Answer · 2016-01-03 15:56:14Z

1

You have duplicated IDs in inputs, so jQuery returns the 1st occurrence of input.
You can add film_id, id and film_name to the <a> link with a data attribute, then read with jquery.
JavaScript function for ajax request need to be assigned to the class:

$(".deleteReview").click(function (e) {...

and

<a class="deleteReview"....

so with this you eliminate duplicate IDs in HTML code.

edited Jan 3, 2016 at 15:56

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 28, 2015 at 19:58

miralong

8429 silver badges12 bronze badges

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

1 Comment

JulianJ Over a year ago

Any chance you could give me an example of what you mean. I understand the idea but am not sure of the syntax.

Collectives™ on Stack Overflow

Can only delete first row with Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related