Pass parameter via jquery with href

Question

I have a table with automatically generated links and values being passed via json.

The link returns the correct values being generated using PHP.

<li>
    <a href='phpProcess/showFormDelegationPr.php?prId="+item.pr_id+"' class='link-form-delegation' id='show-form-delegation'>
        <i class='fa fa-user'></i> &nbsp; Delegar
    </a>
</li>

I want to pass the values to PHP using jquery, but I’m not succeeding.

I tried with the code below:

$("#consult").on("click", ".link-form-delegation", function(e){
    e.preventDefault();
    $.ajax({
        url: $("#show-form-delegation").attr("href"),
        type: 'GET',
        success: function(data){
            alert(data);
        }
    });         
});

The problem is that for all table rows Alert always shows the return value of the first table row.

Answer 1

As Juliano pointed out You have repeated Ids. When you use:

url: $("#show-form-delegation").attr("href"),

this will return the href of the first element with this ID. Even if there is more, it returns only the first because the ID has to be unique.

To work around that problem (which you have to solve on the server side) you can use this in the element that received the click, which I assume is the one you want to read the href. You will need to reference it in a variable because you cannot pass it directly to the .ajax() because it will be read in another context of scope.

So I think what you’re looking for is:

$("#consult").on("click", ".link-form-delegation", function(e){
    e.preventDefault();
    var url = $(this).attr("href"); 
    // ou usar var self = this; e depois usar ": $(self).attr("href"),"
    $.ajax({
        url: url,
        type: 'GET',
        success: function(data){
            alert(data);
        }
    });         
});

Notice that in case there are also several #consult duplicates you have to change that and use classes, or just $(document).on('click', ... to play it safe.

Answer 2

This is because you are taking the value of a through the id, and all its as has the same id (which is bad, id must be unique). You’re adding the event to the element itself, so you can refer to itself instead of looking for the id. Remove the html ids and to make the request do so:

$("#consult").on("click", ".link-form-delegation", function(e){
    e.preventDefault();
    var url = $(this).attr("href"); 
    $.ajax({
        url: url,
        type: 'GET',
        success: function(data){
            alert(data);
        }
    });         
});