테스트 사이트 - 개발 중인 베타 버전입니다

ajax로 비동기 리스트 구현 후 페이징 post값 1고정 채택완료

더루차 2년 전 조회 2,539

소스를 반으로 나눠서

왼쪽은 리스트 오른쪽은 뷰화면이 나오도록 구현했습니다..

1번 페이지에서는 번호가 열람중으로 잘 불러오지만 2페이지에서 제목을 클릭하면 

리스트가 초기화 되어 1페이지로 와집니다 개발자 도구로 확인한 결과 

ajax_list.php 파일에 post 값이 2가아닌 1로 넘어가져서 그런것 같습니다

그런데 이상한 점은 $page를 찍어보면 또 2페이지로 정상적으로 구동하고 있습니다.

 

비동기 시에 post에 기존에 불러온 값이 아닌 리스트가 있는 $page 값을 넘겨주고 싶습니다

혹시몰라 링크 첨부합니다

 

list.skin.php -> list.php -> list2.skin.php(뷰페이지)↓


1-> view_ajax.php로 오른쪽 뷰 페이지
   view.php -> view.skin.php 로 


2-> ajax_list.php로 왼쪽 뷰페이지 
   list3.php -> list3.skin.php로 

 

 

list.skin.php

</p>

<p><div class="banban"></p>

<p> <!-- 반반 추가 아래 스타일추가</p>

<p> style="float:left;width:50%;max-width:50%;overflow:hidden;</p>

<p> --></p>

<p> </p>

<p>    <div class="tbl_head01 tbl_wrap" style="float:left;width:25%;max-width:25%;overflow:hidden;height:1100px;"></p>

<p>        <table></p>

<p>        <caption><?php echo $board['bo_subject'] ?> 목록</caption></p>

<p>        <thead></p>

<p>        <tr></p>

<p>            <?php if ($is_checkbox) { ?></p>

<p>            <th scope="col" class="all_chk chk_box"></p>

<p>                <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk"></p>

<p>                <label for="chkall"></p>

<p>                    <span></span></p>

<p>                    <b class="sound_only">현재 페이지 게시물  전체선택</b></p>

<p>                </label></p>

<p>            </th></p>

<p>            <?php } ?></p>

<p>            <th scope="col">번호</th></p>

<p>            <th scope="col">분류</th></p>

<p>            <th scope="col">제목</th></p>

<p>        </tr></p>

<p>        </thead></p>

<p>        <tbody></p>

<p>        <?php</p>

<p>        for ($i=0; $i<count($list); $i++) {</p>

<p>            if ($i%2==0) $lt_class = "even";</p>

<p>            else $lt_class = "";</p>

<p>        ?></p>

<p>        <tr class="<?php if ($list[$i]['is_notice']) echo "bo_notice"; ?> <?php echo $lt_class ?>"></p>

<p>            <?php if ($is_checkbox) { ?></p>

<p>            <td class="td_chk chk_box"></p>

<p>                <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk"></p>

<p>                <label for="chk_wr_id_<?php echo $i ?>"></p>

<p>                    <span></span></p>

<p>                    <b class="sound_only"><?php echo $list[$i]['subject'] ?></b></p>

<p>                </label></p>

<p>            </td></p>

<p>            <?php } ?></p>

<p>            <td class="td_num2"></p>

<p>            <?php</p>

<p>            if ($list[$i]['is_notice']) // 공지사항</p>

<p>                echo '<strong class="notice_icon">공지</strong>';</p>

<p>            else if ($wr_id == $list[$i]['wr_id'])</p>

<p>                echo "<span class=\"bo_current\">열람중</span>";</p>

<p>            else</p>

<p>                echo $list[$i]['num'];</p>

<p>             ?></p>

<p>            </td></p>

<p>            <td class="td_cate" ></p>

<p>            <?php</p>

<p>                if ($is_category && $list[$i]['ca_name']) {</p>

<p>                ?></p>

<p>                <div  class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></div></p>

<p>                <?php } ?></p>

<p>                </td></p>

<p> </p>

<p>            <td class="td_subject" style="padding-left:<?php echo $list[$i]['reply'] ? (strlen($list[$i]['wr_reply'])*10) : '0'; ?>px"></p>

<p> </p>

<p>                <a class="bo_tit" data-id="<?php echo $list[$i]['wr_id']; ?>" data-table="<?php echo $bo_table; ?>"></p>

<p>               </p>

<p>                   </p>

<p>                        <?php echo $list[$i]['icon_reply'] ?></p>

<p>                        <?php</p>

<p>                            if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);</p>

<p>                         ?></p>

<p>                        <?php echo $list[$i]['subject'] ?></p>

<p>                   </p>

<p>                    <?php</p>

<p>                    if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";</p>

<p>                    // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }</p>

<p>                    if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);</p>

<p>                    if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);</p>

<p>                    if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);</p>

<p>                    ?></p>

<p>                    <?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?></p>

<p>                </a></p>

<p>            </td></p>

<p> </p>

<p>        </tr></p>

<p>        <?php } ?></p>

<p>        <?php if (count($list) == 0) { echo '<tr><td colspan="'.$colspan.'" class="empty_table">게시물이 없습니다.</td></tr>'; } ?></p>

<p>        </tbody></p>

<p>        </table></p>

<p>            <!-- 페이지 --></p>

<p>    <?php echo $write_pages; ?></p>

<p>    <!-- 페이지 --></p>

<p>    </div></p>

<p> </p>

<p><!-- 반반 추가 --></p>

<p><div class="view_content"></p>

<p>    <?php include_once(G5_BBS_PATH."/view.php");?>  <!-- 기본 화면 표시 --></p>

<p></div></p>

<p> </p>

<p></div></p>

<p>    <script></p>

<p>        $(document).on('click', '.bo_tit', function(e){</p>

<p>            $.ajax({</p>

<p>                url:'<?php echo $board_skin_url?>/view_ajax.php',</p>

<p>                type:'POST',</p>

<p>                data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,</p>

<p>                dataType:'html',</p>

<p>                success : function(data){</p>

<p>                    $('.view_content').html(data);</p>

<p>                }</p>

<p>            });</p>

<p>        });</p>

<p>    </script></p>

<p>        <script></p>

<p>        $(document).on('click', '.bo_tit', function(e){</p>

<p>            $.ajax({</p>

<p>                url:'<?php echo $board_skin_url?>/ajax_list.php',</p>

<p>                type:'POST',</p>

<p>                data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,</p>

<p>                dataType:'html',</p>

<p>                success : function(data){</p>

<p>                    $('.tbl_head01.tbl_wrap').html(data);</p>

<p>                }</p>

<p>            });</p>

<p>        });</p>

<p>    </script></p>

<p> </p>

<p>    <script></p>

<p>        function listAjax(no){</p>

<p>       </p>

<p>        $.ajax({</p>

<p>            type: "POST",</p>

<p>            url: "<?=$board_skin_url?>/ajax_list.php",</p>

<p>            data: "bo_table=<?=$bo_table?>&page="+ no + "&sop=<?=$sop?>&stx=<?=$stx?>&sca=<?=$sca?>&sfl=<?=$sfl?>",</p>

<p>            cache: false,</p>

<p>            success: function(data){  </p>

<p>                $('.tbl_head01.tbl_wrap').html(data);</p>

<p>               </p>

<p>            }</p>

<p>        });</p>

<p>    }</p>

<p></script></p>

<p><!-- 반반 추가 -->

 

ajax_list.php

</p>

<p><?php</p>

<p>include_once('../../../../../common.php');</p>

<p>include_once('../common.php');</p>

<p> </p>

<p>$bo_table = $_POST['bo_table'];</p>

<p>$wr_id = $_POST['wr_id'];</p>

<p>$page = $_POST['page'];</p>

<p>$sop = $_POST['sop'];</p>

<p>$stx = $_POST['stx'];</p>

<p>$sca = $_POST['sca'];</p>

<p>$sfl = $_POST['sfl'];</p>

<p> </p>

<p>include_once(G5_BBS_PATH."/list3.php");</p>

<p>?>

 

view_ajax.php

</p>

<p><?php</p>

<p>include_once('../../../../../common.php');</p>

<p>include_once('../common.php');</p>

<p> </p>

<p>$bo_table = $_POST["bo_table"];</p>

<p>$wr_id = $_POST["wr_id"];</p>

<p>$page = $_POST['page'];</p>

<p>$sop = $_POST['sop'];</p>

<p>$stx = $_POST['stx'];</p>

<p>$sca = $_POST['sca'];</p>

<p>$sfl = $_POST['sfl'];</p>

<p> </p>

<p>$view_sql="select * from g5_write_".$bo_table." where wr_id=".$wr_id;</p>

<p>$view_row=sql_fetch($view_sql);</p>

<p>$ca_name = $view_row['ca_name'];</p>

<p>?></p>

<p> </p>

<p><?php include_once(G5_BBS_PATH."/view.php");?></p>

<p>

로 작업하였습니다

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
2년 전

data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,

 

$page 값이 '1' 로 고정 출력되어서 생기는 문제입니다.

브라우저에서 검사를 하면 해당 스크립트 코드 부분은, ajax 호출/처리가 계속되어도 해당부분은 1로 고정되어 보일 것입니다.

 

현재 구조에서 해결방법은, 

ajax_list.php 에서 갱신된 page 값을 추출하여 리턴해주고,

위의 문제 코드는 넘겨받은 page 값으로 ajax 호출을 할 수 있게 해야 하는데..

 

현재 구조에서는 이를 구현하기가 어렵습니다.

 

-----------------

 

현재 구현하려는 목표는,

좌측의 글리스트에서 글제목을 클릭하면, 우측에 뷰페이지를 ajax로 보여주는 방식입니다.

좌측의 글리스트 클릭시 우측에 (클릭한 글의) 뷰 페이지를 보여주면서, 좌측의 글 리스트를 다시 불러올 필요는 굳이 없어 보입니다.

'열람중' 표시를 위해서 그러한 것이라면..

좌측의 글 리스트를 다시 불러오는 것 (list_ajax.php 호출) 을 하지 않고,

열람중 표시 처리만 해주면 됩니다. 

1) $(document).on('click', '.bo_tit', function(e){

~ ajax_list.php

~}

삭제

 

2) $(document).on('click', '.bo_tit', function(e){ 

~ view_ajax.php

~}

success 에서 '열람중' 처리

또는 ajax 호출 전에 '열람중' 처리해도 무방

ex. $(this).parent().find('.td_cate').html('열람중');

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

더루차
2년 전
말씀하신 목표가 정확하신 것 같습니다
열람중, 페이징 , 검색창과 연동하려고 하다보니 이것 저것 꼬인것 같습니다..
시도해보고 다시 말씀드리겠습니다 !
더루차
2년 전
현 상황에선 열람중 표시를 빼버리는게 나을 것 같다는 판단하에 예를 들어주신 코드로 해보았는데 안 됩니다.. ㅠㅠ
혹은 번호 자체를 빼버리고 게시글 제목에 bold css를 주는 방법이 괜찮으려나요..?
마르스컴퍼니
2년 전
ajax 처리문 안에서 $(this) 사용이 기본적으로 안됩니다.

그 전에 처리하거나, context 를 추가해주어야 합니다. https://ljg960730.tistory.com/130

댓글을 작성하려면 로그인이 필요합니다.

2년 전

클라이언트 스크립트에서 고정된 상태의 서버스크립트 변수를 사용하려고 해서 발생하는 문제입니다.

페이지에 뿌려진 소스의 페이지를 전달해야 합니다.

</p>

<p><script src="<a href="http://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js"></script></a>

<script>

listAjax = function (e) {

    e.preventDefault();</p>

<p>    var href = $(this).attr('href');

    href = href.match(/page=(\d+)/);</p>

<p>    if (href.length == 2 && isNaN(href[1]) == false) {

        no = parseInt(href[1], 10);

        console.log('page to ' + no);

    } else {

        console.log('no page info');

    }

}</p>

<p>$(function () {

    $('.pg_page').click(listAjax);

});

</script></p>

<p><nav class="pg_wrap"><span class="pg"><span class="sound_only">열린</span><strong class="pg_current">1</strong><span class="sound_only">페이지</span>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=2"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=2"</a> class="pg_page">2<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=3"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=3"</a> class="pg_page">3<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=4"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=4"</a> class="pg_page">4<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=5"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=5"</a> class="pg_page">5<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=6"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=6"</a> class="pg_page">6<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=7"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=7"</a> class="pg_page">7<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=8"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=8"</a> class="pg_page">8<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=9"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=9"</a> class="pg_page">9<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=10"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=10"</a> class="pg_page">10<span class="sound_only">페이지</span></a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=11"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=11"</a> class="pg_page pg_next">다음</a>

<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=13"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&amp;page=13"</a> class="pg_page pg_end">맨끝</a>

</span></nav></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

더루차
2년 전
덕분에 어떻게 오류가 나오는지도 이해 했습니다만, 지식이 부족해서 올려주신 코드를 어떻게 응용해야할지 조금 어려워 그러는데 혹시 조금만 더 풀어 주실 수 있으실까요??
배르만
2년 전
a href=...
a href=...
Ajax 적용되지 않은 기본 상태의 소스일 겁니다.

a onclick="listAjax(2)"... 이런식으로 가공이 되어있던데
가공하지 않은 상태로 놔두고
script ~ /script 부분만 적용해보고 확인해 보시면 이해하실것 같습니다.
더루차
2년 전
다시 되돌려.. 재시도 해보겠습니다 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

ifelse
2년 전

리스트에서 클릭해서 본문 불러올때 page값이 가나요?

모든 게시물이 찍어보면 없거나 1 나올거같은데요???

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

더루차
2년 전
네 정확하게 보셨습니다 1페이지 시작한 뷰페이지는 1로만
2페이지에서 시작한 뷰페이지는 2로만 넘어가게 되네요
i
ifelse
2년 전
하단에 리스트의 page버튼을 누를때
history.pushState로 url을 페이지 넘버링이 변경되도록 해보시거나
a 태그 data로 wr_id POST하는것처럼 page부분도 동일하게 a태그에서 전달받도록
해보시는방법 정도 떠오르네요
더루차
2년 전
감사합니다!! 해결되면 또 오겠습니다

댓글을 작성하려면 로그인이 필요합니다.

테스트는 해보지 않았지만

ajax success 부분에서 page도 따로 반영해줘야 하지 않을까 생각 됩니다..

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

더루차
2년 전
댓글감사합니다 개발자도구로 확인하면 페이로드가 page값 자체가 1로 넘어가는데 어떤 부분을 건드려 봐야 할까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인