How to avoid flickering in jquery?
Posted
by Pandiya Chendur
on Stack Overflow
See other posts from Stack Overflow
or by Pandiya Chendur
Published on 2010-03-30T10:31:03Z
Indexed on
2010/03/30
10:33 UTC
Read the original article
Hit count: 319
I am using jquery with asp.net webforms..... I am using asp.net pagemethods and jquery....
I am emptying a div on click of anchor tags and filling it with new content.... What happens is my div flickers when my new data is loaded to it... How to avoid this in jquery? Can i use any effect for this....
<script type="text/javascript">
$(document).ready(function() {
getRecordspage(1, 5);
$("a.page-numbers").click(function() {
$("#ResultsDiv").empty();
getRecordspage($(this).text(), 5)
});
});
</script>
and my page,
<body>
<form id="form1" runat="server">
<div id="ResultsDiv">
</div>
<div class="pager">
<a ID="lnkbtn0" class="page-numbers" href="javascript:void(0);">1</a>
<a ID="lnkbtn1" class="page-numbers" href="javascript:void(0);">2</a>
<a ID="lnkbtn2" class="page-numbers" href="javascript:void(0);">3</a>
<a ID="lnkbtn3" class="page-numbers" href="javascript:void(0);">4</a>
</div>
</form>
</body>
and my getRecordspage() function is
function getRecordspage(curPage, pagSize) {
$.ajax({
type: "POST",
url: "Default.aspx/GetRecords",
data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(jsonObj) {
var strarr = jsonObj.d.split('##');
var jsob = jQuery.parseJSON(strarr[0]);
$.each(jsob.Table, function(i, employee) {
$('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv');
});
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
}
});
}
© Stack Overflow or respective owner
