(JQuery) AJAX delete list item link problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

(JQuery) AJAX delete list item link problem

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: (JQuery) AJAX delete list item link problem

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: (JQuery) AJAX delete list item link problem

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: (JQuery) AJAX delete list item link problem

Post by pickle »

Try using siblings() instead of next().
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply