2010-03-30 6 views
0

asp.net webforms에서 jquery를 사용하고 있습니다 ..... asp.net pagemethods 및 jquery를 사용하고 있습니다 ....jquery에서 깜박임을 피하는 방법은 무엇입니까?

나는 닻을 클릭 할 때 div를 비우고 새 내용으로 채 웁니다. 내 데이터가로드 될 때 내 div가 깜박입니다 ... jquery에서이를 피하는 방법은 무엇입니까? 나는 이것에 대한 영향을 사용할 수 ....

<script type="text/javascript"> 
     $(document).ready(function() { 
      getRecordspage(1, 5); 
      $("a.page-numbers").click(function() { 
      $("#ResultsDiv").empty(); 
       getRecordspage($(this).text(), 5) 
      }); 
     }); 

</script> 

내 페이지

,

<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> 

getRecordspage() 기능은

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"); 
      }); 
     } 
    }); 

} 

답변

1

당신이 HTML을 구축 에 시도해야입니다 루프에서 처음으로이고 은 dom에 단 한번을 추가합니다. 그렇게하면 각 직원에 대해 다시 그리지 않습니다.

편집 :

은 내가 것이다 것은 당신이 루프에서,

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>') 

그런 다음 각 직원에 대한 삽입 빈 HTML 라인을 저장하는 변수입니다, 당신은 모든 데이터를 삽입 jquery 선택자와 함수를 사용하여이 HTML 청크의 올바른 위치에 직원의 이름을 추가하고이 행을 allEmplyee 변수에 추가합니다.

루프가 끝나면이 줄 (예 : 짝수 및 홀수 줄)에 스타일을 추가하고 마지막으로 모든 결과를 보유하는 allEMployee 변수를 페이지에 삽입 할 수 있습니다. 나는 그것을해야한다고 생각하지만 ... jquery master, 초보자가 아닙니다.
시간이 걸리면 아마 ajax loader gif를 표시해야 할 것입니다. 또는 사용자가 기다리는 동안 주위를 클릭하기 시작할 것입니다.

http://preloaders.net/

+0

@serbech 당신은 좀 더 설명 할 수 ... –

관련 문제