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 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 부분만 적용해보고 확인해 보시면 이해하실것 같습니다.

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

회원로그인

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