CODEWITHSUNDEEP
phpjqueryajax
Kumar
Kumar

Reputation: 1217

How to call ajax for a given list anchor tags with same class id but different url to call

I'm new to AJAX, and start to make an ajax able script, in which, I have a number of anchor tags with same class id. But with different url to call for each anchor tag. My function runs but, it call all the anchor tag, even i use to click on one anchor tag. But the task is done for only that clicked anchor tag.

My 2nd problem is

when the task completed for one anchor tag and I start to run other ones, it does not complete the task until I refresh the web page again, and click on it. But it shows that success on every anchor tag. Even the work is not done. Hope you understand my problem, Here is my ajax code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=28', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script> 
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>
//this is for below one
<script type="text/javascript">
 $('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=29', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script>
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>

And if some one does not understand this problem, please comment below for more information.

Question is How do I do that correctly?

Upvotes: 1

Views: 1646

Answers (2)

giorgio
giorgio

Reputation: 10212

First of all, the funny thing about class selector is that it selects all elements with the same class. Example:

<a href="#" class="my-selector">Link 1</a>
<a href="#" class="my-selector">Link 2</a>

$('.my-selector').on('click', function() {
    // Code to run when either Link 1 OR Link 2 are clicked
});

So, what's happening in your code, is that you have registered two functions for a single class selector, which causes both functions to be run even if you click only one of both links.

Now, if I'm correct, the only difference between the two functions is the post id. So why not get the post id as a variable and use only one function?

First rewrite your html to this:

<a href="#" data-post-id="28" title="Remove Posts" class="submitdelete">Remove Posts</a>
...
<a href="#" data-post-id="29" title="Remove Posts" class="submitdelete">Remove Posts</a>

Do you see that data-post-id attribute? I can put anything in it, and it will not show, but is linked to the DOM element. So now whenever the link is clicked, I can actually distinguish which link is clicked! Here, try this:

$('.submitdelete').on('click', function(e) {
    e.preventDefault();

    var postID = $(this).data('postId');
    alert('I\'m about to delete the post with id: [' + postID + ']');
});

Check this fiddle for a demo. (just click the links)

So, I guess you already know how to proceed; just use this little snippet and insert the postID variable into your (single!) ajax function. And you can use the $.post() function for your convenience:

var deleteUrl = 'http://localhost/w/wp-admin/admin.php';

$('.submitdelete').click(function(e) {
    e.preventDefault();

    $.post( deleteUrl,
        {
            page: 'rssap-feeds',
            action: 'removePosts',
            post: $(this).data('postId')
        },
        function(response) {
            alert("You have made it!");
        }
    );
});

Upvotes: 3

Shawon
Shawon

Reputation: 322

You can proceed, By making a function in javascript and use it in your anchor tag, I am using giorgio method, you have to use the attribute data-post-id. So here is my code,

                <script type="text/javascript">         
function callbb(postID){
$.ajax({
type:'POST', 
url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=' + postID + '', 
success: function(response) {
 alert('you made it ' + postID + '');
}
});
}
</script>

And your anchor tag will look like something,

 <a href="#" data-post-id="29" onclick="var postID = $(this).data('postId'); callbb(postID)" title="Remove Posts" class="submitdelete">Remove Posts</a>

Hope it helps you. or someone else

Upvotes: 1

Related Questions