refresh the votes

Hey, i am making a survey using AJAX to send the votes. what below is the AJAX call an开发者_StackOverflow中文版d the html part for literally showing the votes.

$.ajax(address, {
    type: 'POST',
    data: {'votername' : votername,},
    success: function (data) {
        location.reload();
    }});

<span>Votes:{{each.vote}}</span>

The idea is that after users click on the vote button, the vote count is going to increase by 1. I am reloading the page in order for the newest vote to show up. Is there any way that the latest vote can be shown not by reloading the page? it just "magically" pops up? Thank you in advance.

Try something like this...

$.ajax(address, {
    type: 'POST',
    data: {'votername' : votername,},
    success: function (data) {
        $('#total').html('Votes: '+data);
    }});

<span id='total'>Votes:{{each.vote}}</span>

Here your Ajax method should return the total number of votes.

Access the element that the number is stored in using jQuery and increment the number:

var count = $('#votecount').text();
count = parseInt(count) + 1;
$('#votecount').text(count);

That should "magically" update the number, if you update the id of the element to match your code.

Addition

If you are returning the new vote total in the data of your AJAX call, you can do this:

success: function (data) {
    $('#votecount').text(data.number);
}

Caveat

I am using .text() instead of HTML just in case there's something odd with the count number. With .text(), you will see right away what is happening. .html() may mask a problem initially. Regardless, .html() is probably a better choice (versus .text()) in the long run.