Change Page Contents inside Widgets with JS setInterval method

by barkkathulla 2013-12-27 12:24:54

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
994
like
0
dislike
0
mail
flag

You must LOGIN to add comments