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
</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개
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개
혹은 번호 자체를 빼버리고 게시글 제목에 bold css를 주는 방법이 괜찮으려나요..?
그 전에 처리하거나, context 를 추가해주어야 합니다. https://ljg960730.tistory.com/130
댓글을 작성하려면 로그인이 필요합니다.
클라이언트 스크립트에서 고정된 상태의 서버스크립트 변수를 사용하려고 해서 발생하는 문제입니다.
페이지에 뿌려진 소스의 페이지를 전달해야 합니다.
</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&page=2"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=3"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=4"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=5"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=6"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=7"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=8"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=9"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=10"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&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&page=11"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=11"</a> class="pg_page pg_next">다음</a>
<a href="<a href="https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=13"" target="_blank" rel="noopener noreferrer">https://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&page=13"</a> class="pg_page pg_end">맨끝</a>
</span></nav></p>
<p>
답변에 대한 댓글 3개
a href=...
Ajax 적용되지 않은 기본 상태의 소스일 겁니다.
a onclick="listAjax(2)"... 이런식으로 가공이 되어있던데
가공하지 않은 상태로 놔두고
script ~ /script 부분만 적용해보고 확인해 보시면 이해하실것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
2페이지에서 시작한 뷰페이지는 2로만 넘어가게 되네요
history.pushState로 url을 페이지 넘버링이 변경되도록 해보시거나
a 태그 data로 wr_id POST하는것처럼 page부분도 동일하게 a태그에서 전달받도록
해보시는방법 정도 떠오르네요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
열람중, 페이징 , 검색창과 연동하려고 하다보니 이것 저것 꼬인것 같습니다..
시도해보고 다시 말씀드리겠습니다 !