div 형태로 되어있는 게시판 리스트를 무한스크롤로 구현
본문
<div class='portfolio__grid hover--one three--columns tbl_head01 tbl_wrap'>
<?php for ($i=0; $i<count($list); $i++) {
$classes = array();
$classes[] = 'gall_li';
$classes[] = 'col-gn-'.$bo_gallery_cols;
if( $i && ($i % $bo_gallery_cols == 0) ){
$classes[] = 'box_clear';
}
if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
$classes[] = 'gall_now';
}
?>
<div class="item">
<?php if($member['mb_level'] <= 10){ //관리자 아닐때?>
<a data-video="<? echo $list[$i]['wr_10'];?>" class="popyt mov_b2" style="cursor:pointer;">
<?php }?>
<?php
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else if ($list[$i]['wr_10']){
$img_content = '<img src="https://s.ytimg.com/yts/img/favicon_144-vfliLAfaB.png" style="position:absolute; width:30px; margin:15px 20px;"><img src="https://img.youtube.com/vi/'.$list[$i]['wr_10'].'/0.jpg">';
} else {
$img_content = '<div class="no_image">No Image</div>';
}
echo $img_content;
?>
<?php
if ($list[$i]['ca_name'] == "온라인full영상") { // 공지사항
echo '<strong class="full_video">온라인 풀 영상</strong>';
} else {
echo '<strong class="full_video2">보조 영상</strong>';
}
?>
<?php //echo ( isset($list[$i]['icon_new']) && !empty($list[$i]['icon_new']) ) ? "<span class='circle'>new</span>" : "";?>
<div class="caption">
<div class="inner">
<?php if ($list[$i]['ca_name']) { ?><span style="color:#fff; font-size:11px; padding:bottom:5px;"><?php echo $list[$i]['ca_name']; ?></span><?php } ?>
<section style="display:none;" class="ca_name_list_box">
<?php
$categories = explode('|', $is_category);
if ($categories && $list[$i]['ca_name']) { ?>
<?php
echo str_replace($list[$i]['ca_name'], '<h6 style="display: inline-block;color: #333;display: inline-block;padding: 0px 10px;">' . $list[$i]['ca_name'] . '</h6>', $board['bo_category_list']);
}
?>
</section>
<?php
$url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
?>
<h4><?php echo $list[$i]['subject'] ?></h4>
<p style="margin-top:5px; display: none;"><?php echo $result->items[0]->snippet->description ?></p>
<h5 style="border-top: 1px solid #4c4e6b; margin-top:1px; display:none;" class="select_view"><?php echo $list[$i]['wr_2'] ?> > <?php echo $list[$i]['wr_4'] ?> > <?php echo $list[$i]['wr_7'] ?> > <?php echo @str_replace("|", "", $list[$i]['wr_3'])?></h5>
<p class="href_lik" style="display:none"><?php echo $list[$i]['href'] ?></p>
<div class="share_btn" style="position:fixed; top:-99999px;">
<input id="myInput_<?php echo $i ?>" value="<?php echo $list[$i]['href'] ?>" readonly style="position:fixed; top:-99999px;">
<p onclick='copy_to_clipboard(<?php echo $i ?>)' class="share_btn_p">공유하기 <i class='fas fa-share-alt'></i></p>
</div>
<section class="link_down">
<?php for ($j = 1; $j <= 10; $j++) { ?>
<?php if ($list[$i]['wr_link' . $j]) { ?>
<p class="wr_link_count">링크 <?php echo $j; ?></p>
<span class="wr_link_tit"><?php echo $list[$i]['wr_link' . $j] ?></span>
<?php } ?>
<?php } ?>
<div class="wr_link" style="display:none">
<?php for ($j = 1; $j <= 10; $j++) { ?>
<?php if ($list[$i]['wr_link' . $j]) { ?>
<!--<a href="<?php echo $list[$i]['wr_link' . $j] ?>">링크 <?php echo $j; ?></a>-->
<button type="button" onclick="window.open('<?php echo $list[$i]['wr_link' . $j] ?>') " style="display: block;
background-color: #fff;
padding: 7px;
text-align: center;
border-radius: 7px;
border: 0;
width: 100%;
margin: 20px auto;">다운로드 링크 <?php echo $j; ?></button>
<?php } ?>
<?php } ?>
</div>
</section>
</div>
<div class="bo_info_in_right" style="font-weight:100; display:none;">
<?php
$url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
?>
<span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
<span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
<!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
<!--
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
<?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
<?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>-->
</div>
</div>
</a>
<div class="video_text">
<a href="<?php echo $list[$i]['href'] ?>">
<span style="font-size:11px; padding-bottom:10px; width:100%;"><?php echo $list[$i]['ca_name']; ?></span><h5 style="display:none; font-size: .55em;
float: right;
text-align: right; opacity:.6; font-weight: 100;" class="select_view"><?php echo $list[$i]['wr_2'] ?> > <?php echo $list[$i]['wr_4'] ?> > <?php echo $list[$i]['wr_7'] ?> > <?php echo @str_replace("|", "", $list[$i]['wr_3'])?></h5>
<h4 style="border-top: 1px solid #4c4e6b; margin-top:5px; color:#0b9ae3"><strong style="display:none;font-size: .55em; font-weight:100;"><?php echo @str_replace("|", "", $list[$i]['wr_8'])?></strong><?php echo $list[$i]['subject'] ?></h4>
</a>
<!--<p class="tit_mem" style="color:#0B79B5 !important; display:inline-block;"><?php echo $list[$i]['name'] ?></p>-->
<div class="bo_info">
<span class="bo_date hit_css"> <i class="fas fa-play"></i> <?php echo $list[$i]['wr_hit'] ?></span>
<!--<span class="sound_only">작성자</span><?php echo $list[$i]['name'] ?>-->
<div class="bo_info_in_right" style="font-weight:100;">
<?php
$url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
?>
<span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
<span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
<!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
<!--
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
<?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
<?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>--></div>
</div>
</div>
<?php if ($is_checkbox) { ?>
<div class="txt" style="font-size:9px; color:#999; letter-spacing:0px; float:right; line-height:25px; text-align:right; position:absolute;bottom: 0; right: 0; z-index: 99987;">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</div>
<?php } ?>
<div style="clear:both;"></div>
</div>
<?php } ?>
<?php if (count($list) == 0) { echo '<div class="item" style="width:100%; text-align:center;"><h3 style="width:100%; padding:30px;">등록된 게시물이 없습니다.</h3></div>'; } ?>
</div>
<div class="moreBar moreBtm">불러오는 중</div>
<div class="scrollTop btmScroll"><i class="fa fa-arrow-down"></i> 마우스 스크롤 (다음글 불러오기)</div>
이런식으로 게시판 리스트 부분을 짯고,
<script>
var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;
$(window).ready(function(){
console.log(now_page);
if(now_page != 1){
$(".topScroll").show();
}
if(roll_page != total_page){
$(".btmScroll").show();
}
});
$(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
if(chkBtm == $(window).scrollTop()){
roll_page++;
if(roll_page <= total_page){
callContent(roll_page,'append');
}
}else if($(window).scrollTop() == 0){
now_page--;
if(now_page > 0){
callContent(now_page,'prepend');
}
}
});
function callContent(a,b){
if(b=='append'){
$(".moreBtm").slideDown();
}else{
$(".moreTop").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"POST",
url:url,
dataType : "html",
success: function(html){
tbody = html.split("<div class='portfolio__grid hover--one three--columns tbl_head01 tbl_wrap'>");
thtml = tbody[1].split("</div>");
setTimeout(function() {
if(b=='append'){
$("div.tbl_head01").append(thtml[0]);
}
$(".moreBar").slideUp();
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}
</script>
이런식으로 무한 스크롤을 구현하였습니다. 관리자페이지에서 한페이지당 목록 수는 6으로 지정을 해논 상태구요.
그런데 문제가
스크롤 했을때 2페이지에 있는 6개가 노출이 되어야 하는데 1개만 노출이 되어버리고,
div class = "item" 안에있는 .video_text, .txt 등 div요소들이 나오지 않고 있습니다.
무엇이 문제인지 정확하게 모르겠어서 질문요청 드립니다.
답변 1
하나씩 확인 해보는수 밖에요..제가 보기에는
if(now_page > 0){
callContent(now_page,'prepend');
}
1. 위의 부분 callContent의 ajax에서 사용되는 url을 먼저 체크
2. url이 나오니깐 url의 리턴값이 정상인지 체크
-> 가능성은 url의 리턴값이 잘못됨 or 리턴된 값으로 만들어주는 곳이 잘못됨
리턴값이 잘못되었으면 ajax에서 불러오는 페이지 코드가 잘못된거고 아니면 javascript처리해주신 부분이 잘못된걸거고..
화이팅해요~
url 경로를 콘솔창으로 보았는데, 2페이지의 도메인이 나오고있더라구요.
XHR finished loading: POST "도메인/bbs/board.php?bo_table=contetnts&page=2"
아 그리고 ,
if(now_page > 0){
callContent(now_page,'prepend');
}
이부분은 상단스크롤할때 이전 리스트 불러오기인데 이전리스트 불러오기는 사용하지 않을꺼라 삭제하였습니다.
<script>
var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;
$(window).ready(function(){
console.log(now_page);
if(roll_page != total_page){
$(".btmScroll").show();
}
});
$(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
if(chkBtm == $(window).scrollTop()){
roll_page++;
if(roll_page <= total_page){
callContent(roll_page,'append');
}
}
});
function callContent(a,b){
if(b=='append'){
$(".moreBtm").slideDown();
}else{
$(".moreTop").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"POST",
url:url,
dataType : "html",
success: function(html){
tbody = html.split("<div class='portfolio__grid hover--one three--columns tbl_head01 tbl_wrap'>");
thtml = tbody[1].split("</div>");
setTimeout(function() {
if(b=='append'){
$("div.tbl_head01").append(thtml[0]);
}
$(".moreBar").slideUp();
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}
</script>
네 그런데 결론이 없네요. 2페이지의 url이 나오는데 그 url로 값을 보내면 해당 페이지의 데이터가 정확히 뜨나요?
만약 2페이지에 3개가 있다면 첫번째 한개만 뜨는 상태입니다 ㅠ 그 한개도 제대로 뜨지않고 부분부분만 요소들이 출력됩니다.
어펜드되는 부분의 thtml 부분의 [0]이부분을 지우면 3개가 다 뜨는데 div.item안에 있는 태그들이 item 바깥으로 빠져버리네요 ㅠ
$("div.tbl_head01").append(thtml);
글쓴이님 말 대로라면 url상에 뜨는 데이터는 정상인데 자바스크립트에서 처리가 잘못된거네요...
html태그를 javascript로 파싱해서 원하는 부분만 출력을 하겠다. 라고 보면 되는데, 그럼 파싱되어진 데이터들의 html과 css는 어떻게 재구성 또는 이용하실건가요? <--일단 여기서부터가 문제라고 보여지네요
저 같으면 해당 게시글 리스트가 보이는데 필요한 정보들만 보내주고 javascript에서 html태그 만들어서 넣는거를 처리하겠어요. 위에 하시는 방법은 기존 코드의 수정 없이 사용할 수 있다는 장점이 있겠지만 한번 고민 해보세요. 해결 할 수 있는 방법은 여러가지일테니...
답변을 작성하시기 전에 로그인 해주세요.