div 형태로 되어있는 게시판 리스트를 무한스크롤로 구현

div 형태로 되어있는 게시판 리스트를 무한스크롤로 구현

QA

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처리해주신 부분이 잘못된걸거고..

 

화이팅해요~


<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페이지에 3개가 있다면 첫번째 한개만 뜨는 상태입니다 ㅠ 그 한개도 제대로 뜨지않고 부분부분만 요소들이 출력됩니다.

어펜드되는 부분의 thtml 부분의 [0]이부분을 지우면 3개가 다 뜨는데 div.item안에 있는 태그들이 item 바깥으로 빠져버리네요 ㅠ
$("div.tbl_head01").append(thtml);

글쓴이님 말 대로라면 url상에 뜨는 데이터는 정상인데 자바스크립트에서 처리가 잘못된거네요...

html태그를 javascript로 파싱해서 원하는 부분만 출력을 하겠다. 라고 보면 되는데, 그럼 파싱되어진 데이터들의 html과 css는 어떻게 재구성 또는 이용하실건가요? <--일단 여기서부터가 문제라고 보여지네요

저 같으면 해당 게시글 리스트가 보이는데 필요한 정보들만 보내주고 javascript에서 html태그 만들어서 넣는거를 처리하겠어요. 위에 하시는 방법은 기존 코드의 수정 없이 사용할 수 있다는 장점이 있겠지만 한번 고민 해보세요. 해결 할 수 있는 방법은 여러가지일테니...

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT