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('열람중');
테스트는 해보지 않았지만
ajax success 부분에서 page도 따로 반영해줘야 하지 않을까 생각 됩니다..
리스트에서 클릭해서 본문 불러올때 page값이 가나요?
모든 게시물이 찍어보면 없거나 1 나올거같은데요???
클라이언트 스크립트에서 고정된 상태의 서버스크립트 변수를 사용하려고 해서 발생하는 문제입니다.
페이지에 뿌려진 소스의 페이지를 전달해야 합니다.
<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>