Question

I want to find an html element by its value. I tried with id, but my case is fragile:

pseudo code:

for user in users:
 <li id="followed" onclick="follow($(this).text())"><a class="follow">user.name</a></li>
endfor

I want that each username will be click-able and I’m saving him into DB and appending “saved” to the end part of username. like this:

"username" ==> after click: "username saved"

I’m doing this through ajax.

function follow(data){
    var Him = data;
    alert(Him);
    $.ajax({
        url: "/follow",
        type: "POST",
        datatype: "html",
        data: {Him: Him}
    }).success(function(response){
        $('#followed').append(response);
    });
}

This code is fine, but it is appending the “saved” response only to the first username, because by the end of the loop, all usernames have id='followed'.

That’s why, I want to find the html element by its value. e.g. “username”.
Is it possible?

Answer 1

You could use the context parameter to change the context passed to the success callback of the AJAX request.

But first let’s start by cleaning your markup and using a class name instead of id if this is a loop because as you know ids must be unique in HTML:

for user in users:
    <li class="followed"><a class="follow">user.name</a></li>
endfor

Alright, now that we have cleaned up the markup let’s subscribe unobtrusively to the .click() event of this <li>:

$(function() {
    $('.followed').click(function() {
        // Remark: maybe you wanna get just the username inside the anchor in which case
        // you probably need "var Him = $('a', this).text();"
        var him = $(this).text();
        $.ajax({
            url: '/follow',
            type: 'POST',
            dataType: 'html',
            context: this,    // <!-- Here, that's the important bit
            data: { him: him },
        }).success(function(response) {
            // since we have used the context, here 'this' will no
            // longer refer to the XHR object (which is the default) but
            // to whatever we have passed as context (in our case this
            // happens to be the <li> that was clicked) => we can be certain
            // that we are updating the proper DOM element
            $(this).append(response);
        });
    });
});