Question

So I have a list of elements like:

<span class="rank" id="someID1" user_id="1">Whatever 1</span>
<span class="rank" id="someID2" user_id="2">Whatever 2</span>
<span class="rank" id="someID3" user_id="3">Whatever 3</span>

And I have a JQuery Selector set up like:

$(".rank").click(function(){
    var url = "utilities.php?id=" + $(this).attr("user_id");
    $(".rank").editable("save_url", {
        loadurl: url, type: "select" });
});

Now, the issue is that no matter which one I click, the “user_id” is always whatever the first one I click is. It’s very frustrating and I don’t understand why it’s sticking. If If use console.log to check the URL, the id is set properly, but then in the Ajax call it’s the first one that I clicked for every one of them.

Answer 1

That’s because when the .editable() is applied, it’s going off the url that was defined immediately before it, which is the url you’ve built from the first span. You should be building the url from inside the editable call, so that you’re always retrieving the user_id attribute of the element that was clicked on.

$(".rank").editable("save_url", {
    loadurl: "utilities.php?id=" + $(this).attr("user_id");
    type: "select"
});