CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
1110
1110

Reputation: 6829

How to change link text from jquery function on click event

I stuck in very simple situation.
I have a link that execute ajax call and on success I need to change clicked link text or color.

foreach (var m in Model.GroupPosts){
...
@Html.ActionLink("Vote up", "Vote", "GroupPost", new { groupPostId = m.GroupPostId }, new{@class="vote-up"})
                @Html.ActionLink("Vote down", "Vote", "GroupPost", new { groupPostId = m.GroupPostId }, new { @class = "vote-down" })
}

$('.vote-up').click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                type: "GET",
                success: function (html) {
                    alert("voted up");
                    e.target.text("New link text");
                }
            });
        });

I can't change clicked link text.

Upvotes: 1

Views: 2679

Answers (2)

The Alpha
The Alpha

Reputation: 146191

It should be:

$(e.target).text("New link text");

Also you may keep a reference of the clicked button/Link outside of the AJAX call and then you may use it inside your success callback; like this:

$('.vote-up').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href'),
    btn = $(this); // <-- reference the Button/Link
    $.ajax({
        url: url,
        type: "GET",
        success: function (html) {
            alert("voted up");
            btn.text("New link text"); // <-- Use that referenced jQuery Object
        }
    });
});

Upvotes: 2

Mister Epic
Mister Epic

Reputation: 16723

And the pure javascript way:

 e.target.innerHTML = "New link text"

e.target is an element, not a jQuery object, so it doesn't have the text() method you are attempting to use. You can either use the element's innerHTML property, or wrap the element in jQuery to give you access to text() as WereWolf demonstrates.

Upvotes: 0

Related Questions