Sourcefabric Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Template library

Using polls with AJAX

For poll functionality we are going to use 'debate' plugin, as it is improved version of 'poll' plugin, offering all the same options but more stable and improved.

Using AJAX and jQuery, the user interaction becomes smooth, and no visible page reload is required to add a vote and display the poll results. Any modern jQuery version does the trick, and needs to be called in the header of the page. 

Small trouble with this approach is that, if website is going to have both debate functionality and independent poll somewhere on the frontpage, we cannot simply pull latest debate from the plugin and show it on the page because it can also be debate question meant for debate article. For that reason, we introduce new article type called 'poll' and attach poll from debate plugin to article of type 'poll'. Then instead of calling latest from the plugin, we ask for latest poll article, and then show it's poll. 

{{ list_articles length="1" ignore_issue="true" ignore_section="true" constraints="type is poll" }}

Then inside this list, we need to point to the debate attached to that article (template references to itslef because of reloading after vote action, so if in your case it is not called _tpl/sidebar-poll.tpl, cange the name in template too. This example is from The New Custdian):

{{ list_debates length="1" item="article" }}
{{ if $gimme->current_list->at_beginning }}
<div id="polldiv" class="clearfix">
<h3>Poll</h3>
{{ /if }}

And then we work with debate - check if it is votable by user, is it expired etc. The code is more or less self-explanatory.

{{ if $gimme->debate_action->defined }}
<blockquote>{{ $gimme->debate->question }}</blockquote>
{{ if $gimme->debate->user_vote_count >= $gimme->debate->votes_per_user || $gimme->debate_action->ok }}
<p class="poll-info">Thank you for casting your vote!</p>
{{ elseif $gimme->debate_action->is_error }}
<p>You have already voted</p>
{{ /if }}
<ul class="question-list">
{{ assign var="votes" value=0 }}
{{ list_debate_answers }}
<li>
<label for="radio{{ $gimme->current_list->index }}">{{ $gimme->debateanswer->answer }}</label>
<span class="q-score" style="width:{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%;"> <small>{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%</small></span>
</li>
{{ assign var="votes" value=$votes+$gimme->debateanswer->votes }}
{{ if $gimme->current_list->at_end }}
<li class="total-votes"><span>Total number of votes: {{ $votes }}</span></li>
{{ /if }}
{{ /list_debate_answers }}
</ul>
{{ else }}

{{ if $gimme->debate->is_votable }}

<blockquote>{{ $gimme->debate->question }}</blockquote>
{{ debate_form template="_tpl/sidebar-poll.tpl" submit_button="Vote" html_code="id=\"poll-button\" class=\"button debbut center\"" }}

{{* this is to find out template id for this template, will have to be assigned as hidden form field *}}
{{ $uriAry=explode("tpl=", {{ uri options="template _tpl/sidebar-poll.tpl" }}, 2) }}
<input name="tpl" value="{{ $uriAry[1] }}" type="hidden">
<ul class="question-list">
{{ list_debate_answers }}
<li>
<!--input type="radio" id="radio{{ $gimme->current_list->index }}" name="radios1" /-->
{{ debateanswer_edit html_code="id=\"radio{{ $gimme->current_list->index }}\"" }}<label for="radio{{ $gimme->current_list->index }}">{{ $gimme->debateanswer->answer }}</label>
<span class="q-score" style="width:{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%;"> <small>{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%</small></span>
</li>
{{ /list_debate_answers }}
</ul>
{{ /debate_form }}

{{ else }}
<blockquote>{{ $gimme->debate->question }}</blockquote>
{{ if $gimme->debate->user_vote_count >= $gimme->debate->votes_per_user }}<p class="poll-info">Thank you fr casting your vote!</p>{{ /if }}
<ul class="question-list">
{{ list_debate_answers }}
<li>
<label for="radio{{ $gimme->current_list->index }}">{{ $gimme->debateanswer->answer }}</label>
<span class="q-score" style="width:{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%;"> <small>{{ math equation="round(x)" x=$gimme->debateanswer->percentage_overall format="%d" }}%</small></span>
</li>
{{ /list_debate_answers }}
</ul>
{{ /if }}

{{ /if }}
{{ if $gimme->current_list->at_end }}
</div>
{{ /if }}
{{ /list_debates }}

For successful reloading we need to provide some code like this which will define what is to be reloaded (div container with the id polldiv)

/* Poll Ajaxified
-------------------------------------------------------*/
$('#poll-button').click(function(){
$.post($('form[name=debate]').attr("action"),$('form[name=debate]').serialize(),function(data){$('#polldiv').html(data);});
return false;
});

In The New Custodian case this code is in _js/script.js.

 

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.