How to Change Page Contents inside Widgets with JS setInterval method
part 1:
<div class="polling">
<div class="err_alert" id="err_alert"></div>
<span id="count" style="display:none;font-size:20px;margin-left:40%;">6</span>
<div id="poll_content">
<form id="poll_form" action="" method="get">
<fieldset class="radios">
<?php for($i=0;$i<$option_count;$i++){ ?>
<label class="label_radio" for="<?=$option_array[$i]['id']?>">
<input name="vote" id="<?=$option_array[$i]['id']?>" value="<?=$option_array[$i]['id']?>" type="radio" checked=""><?=$option_array[$i]['name']?></label>
<? } ?>
</fieldset>
</div>
<span id='errormsg' class='err'></span>
</form>
<div id="ajax_result"></div>
<div style="margin-top:2px; margin-left:55px; font-size:12px;">
<input type="submit" class="button_red" id = "submit_vote" value="submit" />
</div>
</div>
here $option_array is required array to display in a widget
part 2:
var checked;
function setupLabel() {
if ($('.label_radio input').length) {
$('.label_radio').each(function(){
$(this).removeClass('r_on');
});
$('.label_radio input:checked').each(function(){
$(this).parent('label').addClass('r_on');
checked="true";
});
};
}
$(document).ready(function(){
$('.label_radio').click(function(){
setupLabel();
});
});
$("#submit_vote").click( function() {
var option = $('input[type="radio"]:checked').val();
var str=($.trim(option));
if($.trim(checked)=='')
{
$("#poll_content").hide();
$("#err_alert").show();
var add_sec=$("#count").text();
option=0;
$('#err_alert').html("<font color=red>Please choose correct option.</font><br />");
var i=0;
var count;
var interval;
function countdown() {
$("#count").show();
i = document.getElementById('count');
$("#err_alert").show();
count=parseInt(i.innerHTML);
if (count<2) {
$("#poll_content").show();
$("#err_alert").hide();
$("#count").hide();
i.innerHTML="7";
clearInterval(interval);
}
i.innerHTML = (parseInt(i.innerHTML)-1)+" sec";
}
interval=setInterval(function(){ countdown(); },1000);
return false;
}
$("#submit_vote").attr('disabled', true);
$("#ajax_result").html("Please wait...");
$('.scroll').hide();
$.ajax({
url: "***request URL***",
type: "get",
data:$("#poll_form").serialize(),// required datas
success: function(response, textStatus, jqXHR){
$("#ajax_result").html(response);
},
});
});
part 3:
Features:
1.No reload
2.can be used in validation,error alerts
3.choice delays
