Javascript How to automatically change word when click without need to refresh browser.?

Posted by Fakhrul Zakry on Stack Overflow See other posts from Stack Overflow or by Fakhrul Zakry
Published on 2013-11-13T09:50:32Z Indexed on 2013/11/13 9:52 UTC
Read the original article Hit count: 343

Filed under:
|
|
|
|

im quite lost here and not really expert about javascript. I want to change the content when user click with "Thanks for vote" automatically without need to refresh the page.

Here is my html:

{% if poll.privacy == "own" and request.user.get_profile.parliment != poll.location %}
You do not have permission to vote this.
{% else %}
{% if has_vote %}
{% if poll.rating_option == '1to5' %}
<div class="rate">
<div id="poll-rate-{{ poll.pk }}"></div>
</div>
{% else %}

Thanks for your vote.
{% endif %}

{% else %}
{% if poll.rating_option == 'yes_no' %}
<a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Yes</a>
<a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">No</a>
{% elif poll.rating_option == 'like_dislike' %}
<a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Like</a>
<a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">Dislike</a>
{% elif poll.rating_option == '1to5' %}
<div class="rate">
<div id="poll-rate-{{ poll.pk }}"></div>
</div>
{% endif %}
{% endif %}
{% endif %}

and here is my javascript:

function bindVoteHandler() {
    $('a.vote-positive, a.vote-negative').click(function(event) {
        event.preventDefault();
        var link = $(this).attr('rel');
        var poll_pk = $(this).attr('alt');
        var selected_div = $(this).parent('div');
        selected_div.html('<img src="{{ STATIC_URL }}img/loading_small.gif" />');
        $.ajax(link).done(function( data ) {
            var result_div = $('div#vote-result-'+poll_pk);
            result_div.html(data);
            result_div.removeClass('vote-result-grey-out');
            selected_div.html('<small>Thanks for your vote.</small>');
        });
    });
};

did anyone know what is the problem why i need to refresh my page after Like/Vote/rate to make it become (Thanks For your vote) ? please someone know help or share link with me.

Below is the image:

before click Like: enter image description here

after click Like: enter image description here

then when refreshed the word just displayed, it supposed automatically display when click Like. enter image description here

Thank you in advance..

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery