CODEWITHSUNDEEP
jqueryajaxjsonasp.net-mvc-3jquery-selectors
DarthVader
DarthVader

Reputation: 55032

Simple JQuery Ajax post

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="vote" name="vote" onclick="vote(@item.Id);return false;">vote</a> </div>
    </li>
 }

I have this code that makes a list of images, and i want the user to click on Vote and want to make an ajax post and get JSON request and dispay in div slidera_num. Below is ajax call and it does return {"vote":3} . 

function vote(idx) {

        $("#vote").click(function () {
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                $(".slidera_num").html(result);
            });
        });
    };

However, everytime I click on vote, it increments the ajax calls, third time i click, it makes 5 calls or so. Another problem I have is since all the div will have class .slidera_num I dont want all of them to be updated same number.

how can i fix this?

thanks.

Upvotes: 1

Views: 332

Answers (5)

demee
demee

Reputation: 582

Remove onclick="vote(@item.Id);return false;" from your html and just call your vote() function somewhere in javascript code.

Using onclick html attribute is old-school and no longer correct (although working).

Upvotes: 2

McGarnagle
McGarnagle

Reputation: 102763

I see the other answers have the duplicate covered. To update the specific result only, instead of using *$(".slidera_num").html(result);*, use this:

$("#vote").click(function () {
    var thisLink = $(this);
    $.post("/Home/VoteAjax/", { id: idx}, function (result) {
        $(thisLink).closest("li").find(".slidera_num").html(result);
    });
});

Edit -- corrected. Inside $.post, this does not refer to the click element, so you have to save a reference to it beforehand (thisLink). From there, traverse to the parent li, then back down to the target ".slidera_num".

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

You have duplicate id #vote, but ID Should be Unique and also remove onClick.

function vote(idx) {

        $('div.slidera_button a[name="vote"]').on('click',function (e) {
            e.preventDefault();
            var to = $(this);
            $.post("/Home/VoteAjax/", { id: idx}, function (result) {
                to.parent().prev('.slidera_button').html(result);
            });
        });
    };

Upvotes: 2

Shyju
Shyju

Reputation: 218742

In your code you are specifying the ID of the a tag as "vote" in a loop. So all the elements coming from that loop will have the same ID. ID's should be unique for elements. So i would rewrite your code like this

@foreach (var item in set)
 {
    <li>                               
    <div class="slidera_num">@item.VoteCount</div>
    <div class="slidera_button"><a href="#" id="@item.Id" name="vote" >vote</a> </div>
    </li>
 }

And the script is

$(function(){
  $("div.slidera_button a").click(function(e){
  var item=$(this);
  e.preventDefault();
  $.post('@Url.Action("Vote","Ajax")', { id :item.attr("id") } ,function(response){
     item.closest(".slidera_num").html(response);
  });
});

Instead of hardcoding the path, I am making use of HTML helper method to generate the path to that action method. So i dont need to worry about how many ../ to put in my URL.

Upvotes: 2

Stefan H
Stefan H

Reputation: 6683

You are using a click event to bind a click event to the button.

Instead do this:

function vote(idx) {

        $.post("/Home/VoteAjax/", { id: idx}, function (result) {
            $(".slidera_num").html(result);
        });
};

You don't NEED to use jquery to bind the click event.

Upvotes: 2

Related Questions