본문 바로가기
IT 스터디/HTML,CSS,jQuery

jQuery Mobile 스크롤러 이벤트, 마지막에 부분에 닿았을때 서버에서 데이터 가져오기

by Ryan Kim 2015. 6. 12.

$(document).on("pagecreate","#page",function(){

 

$(document).on("scrollstop",function(){

 if($(document).height() > $(window).height())

   {

       if($(window).scrollTop() == $(document).height() - $(window).height()){

   

        var param={flag:"bookgrid"};

    $.post("/Finder/gridpage/bringgridpage.do",param,getMoreGridContentResult,"json");

   

  }

   }

 }); 

});



function getMoreGridContentResult(jsonInfor){


var gl=jsonInfor.gridlist;

if(gl.length==0){

return false;

}

var gridcount=$("#gridcount").val();

$("#gridcount").attr("value",gridcount+gl.length);


if(gridcount%2==1){


var innerhtml='<div class="ui-block-b"><a href="#"><img src="../images/'+gl[0].num+'.jpg"/></a>';

var innerhtml2='<div class="imgCaption">'+gl[0].title+'<br/><span>'+gl[0].subtitle+'</span></div><div>';

$("#uigrida").html($("#uigrida").html()+innerhtml+innerhtml2);

for(var i=1; i< gl.length; i++){

if(i%2==1){

var innerhtml='<div class="ui-block-a"><a href="#"><img src="../images/'+gl[i].num+'.jpg"/></a>';

var innerhtml2='<div class="imgCaption">'+gl[i].title+'<br/><span>'+gl[i].subtitle+'</span></div><div>';

$("#uigrida").html($("#uigrida").html()+innerhtml+innerhtml2);

}

else{

var innerhtml='<div class="ui-block-b"><a href="#"><img src="../images/'+gl[i].num+'.jpg"/></a>';

var innerhtml2='<div class="imgCaption">'+gl[i].title+'<br/><span>'+gl[i].subtitle+'</span></div><div>';

$("#uigrida").html($("#uigrida").html()+innerhtml+innerhtml2);

}

}

}

else{

for(var i=0; i< gl.length; i++){

if(i%2==0){


var innerhtml='<div class="ui-block-a"><a href="#"><img src="../images/'+gl[i].num+'.jpg"/></a>';

var innerhtml2='<div class="imgCaption">'+gl[i].title+'<br/><span>'+gl[i].subtitle+'</span></div><div>';

$("#uigrida").html($("#uigrida").html()+innerhtml+innerhtml2);

}

else{


var innerhtml='<div class="ui-block-b"><a href="#"><img src="../images/'+gl[i].num+'.jpg"/></a>';

var innerhtml2='<div class="imgCaption">'+gl[i].title+'<br/><span>'+gl[i].subtitle+'</span></div><div>';

//$div1.html(innerhtml+innerhtml2);

$("#uigrida").html($("#uigrida").html()+innerhtml+innerhtml2);

}

}

}

}