Home/ Questions/Q 697487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:10:23+00:00

I am using jquery with asp.net webforms….. I am using asp.net pagemethods and jquery….

  • 0

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&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').appendTo('#ResultsDiv');
            });
            $(".resultsdiv:even").addClass("resultseven");
            $(".resultsdiv").hover(function() {
                $(this).addClass("resultshover");
            }, function() {
                $(this).removeClass("resultshover");
            });
        }
    });

 }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you should try to build the Html first in the loop, and append it only once to the dom. That way you will not redraw for each employee.

    EDIT:

    What I would have is a variable where you store the blank html line that you insert for each employee 

        var allEmployees;

    var empLine = $('<div class="resultsdiv">
    <br />
    <span class="resultName"></span>
    <span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;
    <span class="resultfieldvalues"></span>
    <br />  
    <br />
    <span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues"></span>
    <span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;
    <span class="resultfieldvalues">' + employee.FixedSalary + '</span>
    <span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;</span>&nbsp;
    <span class="resultfieldvalues"></span>
</div>')

    Then, in the loop, you insert all the data of your employee in the correct places of this html chunk by using jquery selectors and functions and you append this line to the allEmplyee variable.

    After the loop, you can add the styles to these lines (even and odd lines for example) and finally, you inject the allEMployee variable that holds all the results into the page.
    I think that should do it… but I’m no jquery master, just a beginner 🙂
    if that takes some time, then you should probably display an ajax loader gif, it’s important to show that your app is doing something, or your user will start clicking around while waiting.

    http://preloaders.net/

    • 0