jQuery delete ID from element with ajax of a database and refresh - php

Question

Hello at the moment i'm trying to use jQuery in order to get ids of multiple fields with ajax and send the data to remove it via php.
So far i was able to delete the item but i can't remove other ids so for and example:
i have a for loop what will get the information off the database as:
for($i=0; $i < $data; $i++) {
echo "
<div class='list-item' data-action='delete' id='".$Data[$i]['ID']."'>
<a class='title link' href='".$Data[$i]['URL']."' target='_blank'>".$Data[$i]['name']."</a>
<span class='checkbox' id='".$Data[$i]['ID']."' value='".$Data[$i]['ID']."'></span>
<div class='thumb'>
<img src='".$Data[$i]['thumb']."' alt='' width='110' height='99'>
<span class='attr'>".$Data[$i]['width'].'x'.$Data[$i]['height']."</span>
<span class='size'>".$Data[$i]['size']."</span>
</div>
<div class='date'>".$Data[$i]['Date']."</div>
</div>
";
}
notice how you see the $Data[$i]['ID'] with that it'll print out :
<div class="list-item" data-action="delete" id="89">
<a class="title link" href="http://URL" target="_blank">NAME</a>
<span class="checkbox" id="89" value="89"></span>
<div class="thumb">
<img src="thumb.png" alt="" width="110" height="99">
<span class="attr">100x100</span>
<span class="size">85.2 KB</span></div>
<div class="date">2012-06-11 01:25:20</div>
</div>
<div class="list-item" data-action="delete" id="90">
<a class="title link" href="http://URL" target="_blank">NAME</a>
<span class="checkbox" id="90" value="90"></span>
<div class="thumb">
<img src="thumb.png" alt="" width="110" height="99">
<span class="attr">100x100</span>
<span class="size">85.2 KB</span></div>
<div class="date">2012-06-11 01:25:20</div>
</div>
so with that i'm using jQuery to add a class to both class="checkbox" and class="list-item" with selected so that when the event of click or .on('click' function, it will do a confirm window saying "Are you sure you want to remove?" if ok then grab the id of the elements for each and post the data with ajax to have the item removed instantly!
The thing is i need it to work upon multiple ids and have it not add the class of selected to all of class="checkbox" and class="list-item" need it to be specific as in, i choose the items of the ids with 84,94,99,& 100 if i do that everything that is selected should have that class of selected not every id
here is my attempt trying to get this to work
<script>
$(function (){
$('.list-item').on('click', function(e) {
$(this).addClass("selected");
if(window.confirm('Are you sure you want to remove?')) {
id = $(this).attr("id");
//alert(id);
$.ajax({
type: 'post',
url: 'something.php?action=delete&id='+id,
dataType: 'json',
data: {
}, success: function(data) {
if(data.error === true)
{
$.errRorBar({ bdS: "error", html: data.message , delay: 5000 });
}
else
{
$.errRorBar({ bdS: "success", html: data.message , delay: 5000});
}
}, error: function(XMLHttpRequest, textStatus, errorThrown) {
$.errRorBar({ bdS: "error", html: "Opps! Something went wrong!" , delay: 5000 });
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
// console.log(XMLHttpRequest.responseText);
}
});
return false;
}
});
});
</script>
So how can i do this and how can i make the refresh to update the list making it hide or remove it or something?
At the moment, it will remove the item from the database but only one time for the one item i selected even if i have multiple items chosen,i'll get a return of "fail to remove"
Anyone here can help me out?
i think i'm missing something but hopefully this was a good explanation of my situation
Thanks

Answer 1

After looking into your code i have found few glitches:
Element div of class list-items and span of class checkbox having same ids which is against the dom specification. (use prefix before ids like div-89, span-89 etc.).
You are using the request type post but posting the data in url which is get method.
You are sending request on click event of checkbox so it fires everytime when you select it so you cannot delete multiple items using this approach.
Solution:
create a seperate button of delete and send request on click of that button.
Your code would be:
$('.list-item').click(function() {
$(this).addClass('selected');
});
$(.delete).click(function() {
var delIds = new Array();
$('.selected').each(function() {
delIds.push($(this).attr('id'));
});
$.ajax({
url: 'something.php?action=delete&id='+delIds.join(),
dataType: 'json',
success: function(data) {
if(data.error === true)
{
$.errRorBar({ bdS: "error", html: data.message , delay: 5000 });
}
else
{
$.errRorBar({ bdS: "success", html: data.message , delay: 5000});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.errRorBar({ bdS: "error", html: "Opps! Something went wrong!" , delay: 5000 });
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
// console.log(XMLHttpRequest.responseText);
}
});
});
Hope this helps you