ajax 를 활용한 목록 불러오기
본문
(출처 - 옥션)
안녕하세요. 위 옥션의 목록 처럼
해당 상품 목록명을 클릭하면 그에 해당하는
목록을 불러 오려고 하는데요,
item.php
<div class="tab_type1">
<button class=" on" onclick="portfolio('1');">전체</button>
<button class="" onclick="portfolio('제품&브랜드');">제품&브랜드</button>
<button class="" onclick="portfolio('케이블광고');">케이블광고</button>
<button class="" onclick="portfolio('홍보&홈쇼핑');">홍보&홈쇼핑</button>
<button class="" onclick="portfolio('분양');">분양</button>
</div>
<div class="p_list"><!--전체-->
<div class="element-item" id="el_item"></div>
</div><!--p_list-->
<script>
function portfolio(f) {
var item = f;
$.ajax({
type: 'post',
url: '../bbs/ajax.item.php',
data: { item : item },
success: function(data){
$("#el_item").html(data);
}
});
}
</script>
ajax.item.php
<?php
include_once('./_common.php');
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
$item = $_POST['item'];
$sql = "SELECT * FROM g5_write_portfolio WHERE ca_name = '$item'";
$result = sql_query($sql);
for($i=0; $row=sql_fetch_array($result); $i++) {
echo "<div class='element-item' id='el_item'>".$row['wr_subject']."</div>";
}
?>
이렇게 작업 했습니다.
불러오긴 하는데 div 도 먹히지 않고, class 도 먹히지 않습니다.
1. 목록은 불러와 지지만 div/class 가 먹히지 않습니다.
2. 만약 불러온 목록에 해당 게시글로 이동하는 링크 & 썸네일을 적용 시키려면 어떻게 해야 할까요?
(이미지는 저장되어 있는걸 불러와도 됩니다)
답변 2
1. $.ajax 속성에 dataType:'html'을 추가해보시겠어요.
2. ajax.item.php에서 링크 썸네일을 그대로 꾸며주시면됩니다.
<script>
function portfolio(f) {
var item = f;
$.ajax({
type: 'post',
dataType: 'html',
url: '../bbs/ajax.item.php',
data: { item : item },
success: function(data){
$("#el_item").html(data);
}
});
}
</script>
말씀하신것 처럼 해봤지만...제대로 실행이 되지않습니다 ㅠ
혹시 서버에 올리고 만드시고계시면 주소를 알수있을까요?쪽지로 주셔도됩니다.
답변이 늦었습니다 ㅠㅠ 해결 했습니다!
알고보니 css 상속 문제 때문에 제대로 안되는거였습니다.
정말 죄송합니다! 그리고 감사합니다.
1. item 을 encodeURIComponent 으로 감싸 주세요.
2. ajax.item.php 에서
$item = urldecode($_POST['item']); 해주세요 .
<-- -->
<script>
function portfolio(f) {
var item = f;
$.ajax({
type: 'post',
dataType: 'html',
url: '../bbs/ajax.item.php',
data: { item : encodeURIComponent(item) },
success: function(data){
$("#el_item").html(data);
}
});
}
</script>
답변 감사합니다! 인코딩하여 사용중입니다!
