pixalax
asked on
Jquery, getting clicked a element's id and replacing another a element's href attribute.
Hello all,
I'm new to Jquery. Didn't have time yet to sit and read about it. Just read 1-2 articles and I realized it is more or less like a PHP, so I am trying to get some stuff work with Jquery.
I don't know if I should mention that I am currently using Jquery Tools library.
What I am trying to do is;
1. When I click delete link, Jquery will get the id of the a element.
2. Opens a modal box, replace "yes" link's href to confirm and delete the data.
I have everything working except 1 fatal problem.
Here is my list;
ID - TITLE - DELETE
5 - Test 5 - delete
4 - Test 4 - delete
3 - Test 3 - delete
2 - Test 2 - delete
1 - Test 1 - delete
When I click ID number 1, it is opening modal box and asking for confirmation. Everything works just fine as long as I will not click "no" and close the modal box and try to delete another one.
If I click on ID 1, the link is includes/ajax/forms.php?do =delete_ne ws&id=1
Problem is, if I click no and later try to delete ID 2, it is still showing the same URL (includes/ajax/forms.php?do =delete_ne ws&id=1)
Whichever ID, I will click first, if I will click no and try to delete another one, the first clicked element's ID is staying as permanent.
I will be glad if anyone could help me out with it.
I'm new to Jquery. Didn't have time yet to sit and read about it. Just read 1-2 articles and I realized it is more or less like a PHP, so I am trying to get some stuff work with Jquery.
I don't know if I should mention that I am currently using Jquery Tools library.
What I am trying to do is;
1. When I click delete link, Jquery will get the id of the a element.
2. Opens a modal box, replace "yes" link's href to confirm and delete the data.
I have everything working except 1 fatal problem.
Here is my list;
ID - TITLE - DELETE
5 - Test 5 - delete
4 - Test 4 - delete
3 - Test 3 - delete
2 - Test 2 - delete
1 - Test 1 - delete
When I click ID number 1, it is opening modal box and asking for confirmation. Everything works just fine as long as I will not click "no" and close the modal box and try to delete another one.
var formUrl = "includes/ajax/forms.php?do=delete_news&id=";
$("a.confirm").click(function() {
deleteUrl = formUrl + this.id
// Add delete link to confirmation button
$("a[href='#deleteUrl']").attr("href", deleteUrl)
return false;
});
If I click on ID 1, the link is includes/ajax/forms.php?do
Problem is, if I click no and later try to delete ID 2, it is still showing the same URL (includes/ajax/forms.php?do
Whichever ID, I will click first, if I will click no and try to delete another one, the first clicked element's ID is staying as permanent.
I will be glad if anyone could help me out with it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@andreizz;
I don't want to use confirmation like an alert window. I prefer modal boxes, stylish yes - no buttons.
@leakim971;
Thank you for your comment. I was thinking why I can't update second time I click another link. Why the ID value wasn't changing.
Actually it was changing. The problem was, simply there wasn't href="#deleteUrl" anymore to replace, since it was replaced before with another value.
I just made a small modification and it is working perfectly. Thank you for your help.
I don't want to use confirmation like an alert window. I prefer modal boxes, stylish yes - no buttons.
@leakim971;
Thank you for your comment. I was thinking why I can't update second time I click another link. Why the ID value wasn't changing.
Actually it was changing. The problem was, simply there wasn't href="#deleteUrl" anymore to replace, since it was replaced before with another value.
I just made a small modification and it is working perfectly. Thank you for your help.
var formUrl = "includes/ajax/forms.php?do=delete_news&id=";
$('a.confirm').bind('click',function(){
// Get ID of the element
var deleteUrl = formUrl + $(this).attr('id');
// Add delete link to confirmation button
$("a#confirmBtn").attr('href', deleteUrl)
})
ASKER
Thank you once again for your fast reply.
Open in new window
This is how you use a confirm. http://www.w3schools.com/JS/js_popup.asp