CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
salar
salar

Reputation: 709

Change inner text after ajax call back doesn't work?

I have ten like buttons on a page, that I create by a foreach loop on the page.

I have problem in changing the inner text with jQuery.

Let me explain with my elements 

     <a class="pr-endorse" id="<%=product.ConfectionaryProductId %>">
        <i class="pr-add"></i>
        <span>+</span>
        <span class="pr-likes"><%=product.EndorsementCount %></span>
    </a>

This one of my like button elements.

And this is the Ajax function to submit the user like 

      $(document).ready(function () {
        $(".pr-endorse").click(function () {
            debugger;
            var productId = $(this).attr("id");
            var confId = $("#ConfectioneryId").val();
            var countNumber = $(this).find(".pr-likes").html();
            $.ajax({
                url: '<%: Url.Action("Endorsement","Confectionery")%>',
                data: { productId: productId, itemId: confId },
                type: "POST",
                async: true,
                cache: false,
                success: function (result) {

                    debugger;
                    $(this).find(".pr-likes").text(result.endoresCount);
                    alert(result.endoresCount);

                },
                error: function (xhr) {
                    alert(xhr);
                }

I thing that this part of code should solve

  $(this).find(".pr-likes").text(result.endoresCount);

but it does not work ?

Upvotes: 5

Views: 1754

Answers (2)

beautifulcoder
beautifulcoder

Reputation: 11320

Try

$(".pr-endorse").click(function () {
    var el = $(this);
    $.ajax({
        success: function (result) {
            el.find(".pr-likes").text(result.endoresCount);
        }
    });
});

Also, make sure you are returning Json(new { endoresCount = count }); from your controller.

Upvotes: 1

adeneo
adeneo

Reputation: 318182

I'll give it a try, it should probably look like this

$(document).ready(function () {
    $(".pr-endorse").click(function () {

        var self        = this
        var productId   = self.id;
        var confId      = $("#ConfectioneryId").val();
        var countNumber = $(this).find(".pr-likes").html();

        $.ajax({
            type : "POST",
            url  : '<%: Url.Action("Endorsement","Confectionery")%>',
            data : {
                productId : productId,
                itemId    : confId
            },
            dataType : 'json',
            success : function (result) {

                $(self).find(".pr-likes").text(result.endoresCount);
                alert(result.endoresCount);

            },
            error : function (xhr) {
                alert(xhr);
            }
        });
    });
});

Note that this inside the success function is not the element that was clicked, and to return an object you'd generally want to set the dataType, even if jQuery will parse it if the headers are correct.

Upvotes: 1

Related Questions