Page 1 of 1

(JQuery) AJAX delete list item link problem

Posted: Tue Jan 05, 2010 8:07 am
by Sindarin
I have a "list" of database entries with an Edit and Delete link next to each one of them.
Instead of using an <a> link and just doing something like href="index.php?action=delete&id=2" I am trying to use AJAX in order to do the deletion.

Each delete link has the class ".delete-link", each delete link is wrapped with a form and a hidden field holding the ID of the entry.

Code: Select all

<form method="post" class="form">
<a class="delete-link"><img src="images/cross.png" border="0" alt="" /> Delete</a>
<input type="hidden" class="row_id" value="'.$row_id.'" />
<input type="hidden" class="request" value="deleteEntry" />
</form>
and then, there is a javascript event for it:

Code: Select all

$(".delete-link").click(function(ev)
{
    var request = $(".request").attr("value"); //request type, in this case is "deleteEntry"
    var row_id = $(".row_id").attr("value"); //it should get the id of the .delete-link I click on
    
    $.ajax({
    url: "admin-requests.php",
    type: "POST",
    cache: false,
    data: "request="+ request + 
 "& row_id="+ row_id
 ,
    beforeSend: function(){
    //loading function
    },
    success: function(data){
    //entry deleted, animate and fade out the entry
    $("#"+row_id+"").animate({ backgroundColor: "#ff2d2d" }, 200);
    $("#"+row_id+"").effect("fold","",600);
 
    },
    error: function(){
    //error function
    }
    });
});
This only works with the very first entry no matter what delete-link I click on. I need it to work for each link individually.

Re: (JQuery) AJAX delete list item link problem

Posted: Tue Jan 05, 2010 4:51 pm
by pickle
Your problem is these 2 lines:

Code: Select all

var request = $(".request").attr("value"); //request type, in this case is "deleteEntry"
var row_id = $(".row_id").attr("value"); //it should get the id of the .delete-link I click on
Unless you specify otherwise, the $() function uses the entire document as it's context. So these selectors will always return the first in the page.

If I were doing this, I'd drop the form, and the hidden input.request field. Neither of them are necessary (at least for the purposes of this problem).

There are a number of ways to get what you want but I think the most straightforward might be:

Code: Select all

var row_id = $(this).next("input.row_id").val();
You should be able to do that with the input.request field too, if you really need it. The fact that you're in the action for the delete-link button should allow you to just hardcode the "deleteEntry" request value.

Also, remember to return false at the end of your function, or the link will be followed.

Re: (JQuery) AJAX delete list item link problem

Posted: Thu Jan 07, 2010 5:00 am
by Sindarin
Can't figure out how to do this with next().
It keeps returning undefined. :(

The other idea I have is to use IDs instead of classes like,

Code: Select all

//this is server generated matching the number of the entries in the DB
$("#delete-link_1").click(function(ev){var request = $("#request_1").attr("value"); var row_id = $("#row_id_1").attr("value"); deleteEntry(row_id, request);});
$("#delete-link_2").click(function(ev){var request = $("#request_2").attr("value"); var row_id = $("#row_id_2").attr("value"); deleteEntry(row_id, request);});
$("#delete-link_3").click(function(ev){var request = $("#request_3").attr("value"); var row_id = $("#row_id_3").attr("value"); deleteEntry(row_id, request);});

Code: Select all

//and this is now a function
function deleteEntry(row_id, request)
{
if ( confirm("Are you sure you want to delete entry with ID "+row_id+"?") == true )
{
    
    $.ajax({
    url: \'admin-requests.php\',
    type: \'POST\',
    cache: false,
    data: "request="+ request + 
 "& row_id="+ row_id
 ,
    beforeSend: function(){
    //loading function
    },
    success: function(data){
    
    $("#"+row_id+"").animate({ backgroundColor: "#ff5956" }, 200);
    $("#"+row_id+"").effect("fold","",600);
 
    },
    error: function(){
    //error function
    }
    });
    
}
}
this works, but is there another way to do something like

Code: Select all

$("#delete-link_[]").click(function(ev){....
in order to use only one line of code to handle all delete links using the id?

Re: (JQuery) AJAX delete list item link problem

Posted: Thu Jan 07, 2010 9:53 am
by pickle
Try using siblings() instead of next().