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: 351
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:
after click Like:
then when refreshed the word just displayed, it supposed automatically display when click Like.
Thank you in advance..
© Stack Overflow or respective owner