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

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

QA

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

본문

소스를 반으로 나눠서

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

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


<div class="banban">
 <!-- 반반 추가 아래 스타일추가
 style="float:left;width:50%;max-width:50%;overflow:hidden;
 -->
 
    <div class="tbl_head01 tbl_wrap" style="float:left;width:25%;max-width:25%;overflow:hidden;height:1100px;">
        <table>
        <caption><?php echo $board['bo_subject'] ?> 목록</caption>
        <thead>
        <tr>
            <?php if ($is_checkbox) { ?>
            <th scope="col" class="all_chk chk_box">
                <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
                <label for="chkall">
                    <span></span>
                    <b class="sound_only">현재 페이지 게시물  전체선택</b>
                </label>
            </th>
            <?php } ?>
            <th scope="col">번호</th>
            <th scope="col">분류</th>
            <th scope="col">제목</th>
        </tr>
        </thead>
        <tbody>
        <?php
        for ($i=0; $i<count($list); $i++) {
            if ($i%2==0) $lt_class = "even";
            else $lt_class = "";
        ?>
        <tr class="<?php if ($list[$i]['is_notice']) echo "bo_notice"; ?> <?php echo $lt_class ?>">
            <?php if ($is_checkbox) { ?>
            <td class="td_chk chk_box">
                <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
                <label for="chk_wr_id_<?php echo $i ?>">
                    <span></span>
                    <b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
                </label>
            </td>
            <?php } ?>
            <td class="td_num2">
            <?php
            if ($list[$i]['is_notice']) // 공지사항
                echo '<strong class="notice_icon">공지</strong>';
            else if ($wr_id == $list[$i]['wr_id'])
                echo "<span class=\"bo_current\">열람중</span>";
            else
                echo $list[$i]['num'];
             ?>
            </td>
            <td class="td_cate" >
            <?php
                if ($is_category && $list[$i]['ca_name']) {
                ?>
                <div  class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></div>
                <?php } ?>
                </td>
 
            <td class="td_subject" style="padding-left:<?php echo $list[$i]['reply'] ? (strlen($list[$i]['wr_reply'])*10) : '0'; ?>px">
 
                <a class="bo_tit" data-id="<?php echo $list[$i]['wr_id']; ?>" data-table="<?php echo $bo_table; ?>">
               
                   
                        <?php echo $list[$i]['icon_reply'] ?>
                        <?php
                            if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
                         ?>
                        <?php echo $list[$i]['subject'] ?>
                   
                    <?php
                    if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
                    // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
                    if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
                    if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
                    if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
                    ?>
                    <?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 } ?>
                </a>
            </td>
 
        </tr>
        <?php } ?>
        <?php if (count($list) == 0) { echo '<tr><td colspan="'.$colspan.'" class="empty_table">게시물이 없습니다.</td></tr>'; } ?>
        </tbody>
        </table>
            <!-- 페이지 -->
    <?php echo $write_pages; ?>
    <!-- 페이지 -->
    </div>
 
<!-- 반반 추가 -->
<div class="view_content">
    <?php include_once(G5_BBS_PATH."/view.php");?>  <!-- 기본 화면 표시 -->
</div>
 
</div>
    <script>
        $(document).on('click', '.bo_tit', function(e){
            $.ajax({
                url:'<?php echo $board_skin_url?>/view_ajax.php',
                type:'POST',
                data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,
                dataType:'html',
                success : function(data){
                    $('.view_content').html(data);
                }
            });
        });
    </script>
        <script>
        $(document).on('click', '.bo_tit', function(e){
            $.ajax({
                url:'<?php echo $board_skin_url?>/ajax_list.php',
                type:'POST',
                data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,
                dataType:'html',
                success : function(data){
                    $('.tbl_head01.tbl_wrap').html(data);
                }
            });
        });
    </script>
 
    <script>
        function listAjax(no){
       
        $.ajax({
            type: "POST",
            url: "<?=$board_skin_url?>/ajax_list.php",
            data: "bo_table=<?=$bo_table?>&page="+ no + "&sop=<?=$sop?>&stx=<?=$stx?>&sca=<?=$sca?>&sfl=<?=$sfl?>",
            cache: false,
            success: function(data){  
                $('.tbl_head01.tbl_wrap').html(data);
               
            }
        });
    }
</script>
<!-- 반반 추가 --> 

 

ajax_list.php


<?php
include_once('../../../../../common.php');
include_once('../common.php');
 
$bo_table = $_POST['bo_table'];
$wr_id = $_POST['wr_id'];
$page = $_POST['page'];
$sop = $_POST['sop'];
$stx = $_POST['stx'];
$sca = $_POST['sca'];
$sfl = $_POST['sfl'];
 
include_once(G5_BBS_PATH."/list3.php");
?> 

 

view_ajax.php


<?php
include_once('../../../../../common.php');
include_once('../common.php');
 
$bo_table = $_POST["bo_table"];
$wr_id = $_POST["wr_id"];
$page = $_POST['page'];
$sop = $_POST['sop'];
$stx = $_POST['stx'];
$sca = $_POST['sca'];
$sfl = $_POST['sfl'];
 
$view_sql="select * from g5_write_".$bo_table." where wr_id=".$wr_id;
$view_row=sql_fetch($view_sql);
$ca_name = $view_row['ca_name'];
?>
 
<?php include_once(G5_BBS_PATH."/view.php");?>

로 작업하였습니다

이 질문에 댓글 쓰기 :

답변 4

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('열람중');

현 상황에선 열람중 표시를 빼버리는게 나을 것 같다는 판단하에 예를 들어주신 코드로 해보았는데 안 됩니다.. ㅠㅠ
혹은 번호 자체를 빼버리고 게시글 제목에 bold css를 주는 방법이 괜찮으려나요..?

ajax 처리문 안에서 $(this) 사용이 기본적으로 안됩니다.

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

테스트는 해보지 않았지만

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

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

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

 

 

하단에 리스트의 page버튼을 누를때
history.pushState로 url을 페이지 넘버링이 변경되도록 해보시거나
a 태그 data로 wr_id POST하는것처럼 page부분도 동일하게 a태그에서 전달받도록
해보시는방법 정도 떠오르네요

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

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


<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
listAjax = function (e) {
    e.preventDefault();
    var href = $(this).attr('href');
    href = href.match(/page=(\d+)/);
    if (href.length == 2 && isNaN(href[1]) == false) {
        no = parseInt(href[1], 10);
        console.log('page to ' + no);
    } else {
        console.log('no page info');
    }
}
$(function () {
    $('.pg_page').click(listAjax);
});
</script>
<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="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=2" class="pg_page">2<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=3" class="pg_page">3<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=4" class="pg_page">4<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=5" class="pg_page">5<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=6" class="pg_page">6<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=7" class="pg_page">7<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=8" class="pg_page">8<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=9" class="pg_page">9<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=10" class="pg_page">10<span class="sound_only">페이지</span></a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=11" class="pg_page pg_next">다음</a>
<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=13" class="pg_page pg_end">맨끝</a>
</span></nav>

덕분에 어떻게 오류가 나오는지도 이해 했습니다만, 지식이 부족해서 올려주신 코드를 어떻게 응용해야할지 조금 어려워 그러는데 혹시 조금만 더 풀어 주실 수 있으실까요??

a href=...
a href=...
Ajax 적용되지 않은 기본 상태의 소스일 겁니다.

a onclick="listAjax(2)"... 이런식으로 가공이 되어있던데
가공하지 않은 상태로 놔두고
script ~ /script 부분만 적용해보고 확인해 보시면 이해하실것 같습니다.

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

회원로그인

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