라디오버튼 체크시 사라지는현상
관련링크
본문
<?php
include_once('./_common.php');
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index.php');
return;
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_PATH.'/head.php');
?>
<style>
#map {
height: 594px;
width: 1064px;
}
html, body {
height: 500px;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
// 기본형식
$(function(){
setMenu("000000000000000",1);
getRollingData('오토바이');
});
//카테고리 로드 스크립트
//카테고리 로드 스크립트
function setMenu(pCode,menuLevel){//console.log('1 '+menuLevel);
$('.menuSelected').removeClass("menuSelected");
$("#"+pCode).addClass("menuSelected");
$("#"+pCode).parent().parent().parent().first().addClass("menuSelected");
var maxMenuLevel=3;
var targetMenu = $("#caMenu"+menuLevel);
var subMenuLevel = 0;
subMenuLevel = parseInt(menuLevel,10) +1;
//마지막 카테고리 선택시 데이터 조회하지 않음
if(menuLevel <= maxMenuLevel){
//메뉴 조회
$.ajax({
type: "POST"
,url: "<?=G5_URL?>/ca.php"
,data: {
mode:"list"
,pcode:pCode
}
,beforeSend: function() {//////console.log("beforeSend");
},complete: function() {//////console.log("complete");
},success: function(data) {////console.log(data);
//메뉴초기화
if(menuLevel <3) $("#caMenu2 li").remove();
if(menuLevel <4) $("#caMenu3 li").remove();
//메뉴 세팅
if(data.list != null && data.list.length !=0){
for(var i=0; i< data.list.length ; i++){
var lis = null;
var labels = null;
var inputs = null;
var imgs = null;
lis = $('<li>', {
onClick: "setMenu('"+data.list[i].code+"','"+subMenuLevel+"');"
,id:data.list[i].code
});
labels = $('<label>');
inputs = $('<input>', {type: "radio",value: data.list[i].code,name : "wr_3"});
imgs = $('<img>', {src: "<?=G5_URL?>/img/National/"+data.list[i].country+".png"});
$(labels).append(inputs);
$(labels).append(data.list[i].name);
if(menuLevel == 2 && data.list[i].country!='null' && data.list[i].country!=null && data.list[i].country!='' ) $(labels).append(imgs);
$(lis).append(labels);
$(targetMenu).append(lis);
}
}else{
$(targetMenu).append($('<li/>',{html:"하위분류가 없습니다."}));
}
},fail: function() {////console.log("fail");
},error:function(request,status,error){
////console.log(" error code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
}
var map = null;
var markers = [];
var markerCluster = null;
var beaches = null;
var searchBox = null;
var geocoder = null;
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
center: {lat: 36.4, lng: 127.6},
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
});
var searchBtn = document.getElementById('pac-input2');
var input = document.getElementById('pac-input');
searchBox = new google.maps.places.SearchBox(input);
// 검색
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
map.addListener('drag', function() {
setMapOnAll(null);
});
// Bounds for North America
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(32, 126),
new google.maps.LatLng(38, 131));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (allowedBounds.contains(map.getCenter())) return;
// Out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = allowedBounds.getNorthEast().lng(),
maxY = allowedBounds.getNorthEast().lat(),
minX = allowedBounds.getSouthWest().lng(),
minY = allowedBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
map.addListener('idle', function() {
getMarkerData();
});
var geocoder = new google.maps.Geocoder()
searchBtn.onclick = function () {
geocoder.geocode({'address': $('#pac-input').val() }, function(places, status) {
if (status === 'OK') {
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
////console.log("Returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
} else {
//alert('Geocode was not successful for the following reason: ' + status);
}
});
getMarkerData();
}
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
////console.log("Returned place contains no geometry");
return;
}
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
//검색
function getMarkerData(){
setMapOnAll(null);
var datas = setAjaxParam();
$.ajax({
type: "POST"
,url: "<?=G5_URL?>/shop/index_data.php"
,data: {serchData:datas,mb_id:'<?=$member[mb_id]?>'}
,beforeSend: function() {//////console.log("beforeSend");
},complete: function() {//////console.log("complete");
},success: function(data) {console.log(data);
//검색결과목록
appendList(data.list);
setMarkerData(data.list);
setMarkers(map);
},fail: function() {//////console.log("fail");
},error:function(request,status,error){
////console.log(" error code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
//검색조건 세팅
function setAjaxParam(){
var serchData = new Object();
var searchArray = new Array();
var searchInfo = new Object();
//메인에서는 그누보드카테고리 무시
//searchInfo = new Object();
//searchInfo.searchType = "ca_name";
//searchInfo.fild = "ca_name";
//searchInfo.value = $('#ca_name').val();
//searchArray.push(searchInfo);
//----------------------------------
//좌표는 ~ 범위검색 (위도 wr_1, 경도 wr_2)
//지도 화면 전체 lat
//map.getBounds().f.b 35.07580034856863
//map.getBounds().f.f 37.70201510090159
//지도 화면 전체 lng
//map.getBounds().b.b 124.67763671875002
//map.getBounds().b.f 130.52236328125002
searchInfo = new Object();
searchInfo.searchType = "between";
searchInfo.fild = "wr_1";
searchInfo.value = map.getBounds().f.b+','+map.getBounds().f.f; //35.075,37.702
searchArray.push(searchInfo);
searchInfo = new Object();
searchInfo.searchType = "between";
searchInfo.fild = "wr_2";
searchInfo.value = map.getBounds().b.b+','+map.getBounds().b.f;
searchArray.push(searchInfo);
//----------------------------------
// 카테고리 wr_3 = 카테고리
searchInfo = new Object();
searchInfo.searchType = "cata";
searchInfo.fild = "wr_3";
searchInfo.value = $('[name="wr_3"]:checked').val();
searchArray.push(searchInfo);
//연식 wr_6
searchInfo = new Object();
searchInfo.searchType = "between";
searchInfo.fild = "wr_6";
searchInfo.value = $('#wr_6_1').val()+','+$('#wr_6_2').val();
searchArray.push(searchInfo);
//주행거리 wr_7
searchInfo = new Object();
searchInfo.searchType = "between";
searchInfo.fild = "wr_7";
searchInfo.value = $('#wr_7_1').val()+','+$('#wr_7_2').val();
searchArray.push(searchInfo);
//가격 wr_10
searchInfo = new Object();
searchInfo.searchType = "between";
searchInfo.fild = "wr_10";
searchInfo.value = $('#wr_10_1').val()+','+$('#wr_10_2').val();
searchArray.push(searchInfo);
//튜닝 wr_c4 = wr_c4
searchInfo = new Object();
searchInfo.searchType = "key";
searchInfo.fild = "wr_c4";
searchInfo.value = $('[name="wr_c4"]:checked').val();
searchArray.push(searchInfo);
//mode='map' 이면 전체 조회 <> mode가 없거나, ''이면 pageRow에 따라 출력
searchInfo = new Object();
searchInfo.searchType = "mode";
searchInfo.fild = "";
searchInfo.value = "map";
searchArray.push(searchInfo);
//pageRow 현제페이지,패이당행수
return searchArray;
};
//우측목록만들기
function appendList(list){
//기존 목록 삭제
$('#leftList li').remove();
if(list != null && list.length !=0){
for(var i=0; i< list.length ; i++){
var li = null;
var liSubs = null;
var divs = null;
var images = null;
var boImgs = null;
var uls = null;
li = $('<li>', {
onClick: "document.location='<?=G5_BBS_URL?>/board.php?bo_table=shop&sca="+list[i]['ca_name']+"&wr_id="+list[i]['wr_id']+"';"
,class:'map_product'
});
//이미지
divs = $('<div>',{class:'map_p_img'});
if(list[i]['file'][0]!= null){
images = $('<img>',{src: '<?=G5_URL?>/data/file/shop/'+ list[i]['file'][0]['file']});
$(divs).append(images);
}
//보증매물 표시
if(list[i]['wr_check_view'] =='t'){
boImgs = $('<img>',{
src: '<?=G5_IMG_URL?>/boImegs.png'
,class:'boImage'
});
$(divs).append(boImgs);
}
//
$(li).append(divs);
if(list[i]['wr_c29']=='Y'){
complImg= $('<img>',{
src: '<?=G5_IMG_URL?>/deal.png'
,class:'dealImage'
});
$(li).append(complImg);
}
//첫쩨 줄
uls = $('<ul>',{class:'map_p_text'});
liSubs = $('<li>');
divs = $('<div>');
$(divs).append(list[i]['wr_28']);//1차 카테고리명
liSubs.append(divs);
divs = $('<div>');
$(divs).append(
(list[i]['wr_c29']=='Y' ? '---' : list[i]['wr_10'])
+'만원');//가격
liSubs.append(divs);
uls.append(liSubs);
//둘쩨 줄
liSubs = $('<li>');
divs = $('<div>');
$(divs).append(list[i]['wr_29']);//세부모델
liSubs.append(divs);
divs = $('<div>');
$(divs).append(list[i]['wr_6']+'년식');//연식
liSubs.append(divs);
divs = $('<div>');
var wr_c7='';
//카테고리명 : 오토바이
//표시 : 1:자동 / 2:6단 / 3:5단 / 4:4단 / 5:3단
if(list[i]['ca_name']=='오토바이'){
switch (list[i]['wr_c7']) {
case '1':wr_c7 = '자동';break;
case '2':wr_c7 = '6단';break;
case '3':wr_c7 = '5단';break;
case '4':wr_c7 = '4단';break;
case '5':wr_c7 = '3단';break;
}
}
//카테고리명 : 자전거
//표시 : 1:크로몰리 / 2:알류미늄 / 3:카본 / 4:티타늄 / 5:하이텐스틸
if(list[i]['ca_name']=='자전거'){
switch (list[i]['wr_c7']) {
case '1':wr_c7 = '크로몰리';break;
case '2':wr_c7 = '알류미늄';break;
case '3':wr_c7 = '카본';break;
case '4':wr_c7 = '티타늄';break;
case '5':wr_c7 = '하이텐스틸';break;
}
}
//카테고리명 : 캠핑 및 트레일러
//표시 : 1:캠핑/카라반 / 2:캠핑카/모터홈 / 3:다목적 / 4:보트 / 5:제트스키
if(list[i]['ca_name']=='캠핑 및 트레일러'){
switch (list[i]['wr_c7']) {
case '1':wr_c7 = '캠핑/카라반';break;
case '2':wr_c7 = '캠핑카/모터홈';break;
case '3':wr_c7 = '다목적';break;
case '4':wr_c7 = '보트';break;
case '5':wr_c7 = '제트스키';break;
}
}
$(divs).append(wr_c7);//기어방식
liSubs.append(divs);
uls.append(liSubs);
//셋쩨 줄
liSubs = $('<li>');
divs = $('<div>');
if(list[i]['ca_name']=='오토바이'
||list[i]['ca_name']=='자전거'
||list[i]['ca_name']=='보트 및 제트스키'
){
$(divs).append(list[i]['wr_7']+list[i]['wr_8']);//주행거리
}
liSubs.append(divs);
divs = $('<div>');
switch (list[i]['ca_name']) {
case '오토바이': $(divs).append( list[i]['wr_9']+'cc' );break;
case '자전거': $(divs).append( list[i]['wr_9']+'사이즈' );break;
case '보트 및 제트스키': $(divs).append( list[i]['wr_9']+'개' );break;
}
liSubs.append(divs);
divs = $('<div>');
var wr_c8='';
if(list[i]['ca_name']=='오토바이'){
switch (list[i]['wr_c8']) {
case '1':wr_c8 = '휴발유';break;
case '2':wr_c8 = '경유';break;
case '3':wr_c8 = '전기';break;
case '4':wr_c8 = '하이브리드';break;
}
}
if(list[i]['ca_name']=='보트 및 제트스키'){
switch (list[i]['wr_c8']) {
case '1':wr_c8 = '휴발유';break;
case '2':wr_c8 = '경유';break;
case '3':wr_c8 = '엔진없음';break;
}
}
switch (list[i]['ca_name']) {
case '오토바이':
case '보트 및 제트스키':
$(divs).append(wr_c8);
break;
}
//사용연료
liSubs.append(divs);
uls.append(liSubs);
$(li).append(uls);
$('#leftList').append(li);
}
//페이징
}else{
var li = null;
li = $('<li>', {class:'map_product'});
$(li).append('검색결과가 없습니다.');
$('#leftList ul').append(li);
}
}
//마커데이터 생성
function setMarkerData(list){
beaches = new Array();
if(list != null && list.length !=0){
for(var i=0; i< list.length ; i++){
var row = new Array();
row[0] = list[i]['wr_subject'];
row[1] = list[i]['wr_1'];
row[2] = list[i]['wr_2'];
row[3] = "<?=G5_BBS_URL?>/board.php?bo_table=shop&sca="+list[i]['ca_name']+"&wr_id="+list[i]['wr_id'];
beaches[i] =row;
}
}
}
//마커표시
function setMarkers(map) {
if(beaches != null){
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: parseFloat(beach[1]), lng: parseFloat(beach[2])},
title: beach[0],
url: beach[3],
icon: '<?=G5_URL?>/images/m2.png'
});
//마커클릭이벤트
marker.addListener('click', function() {
document.location = this.url;
});
markers.push(marker);
}
}
markerCluster = new MarkerClusterer(map, markers,mcOptions);
//마커크룹 클릭 이벤트
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
map.setCenter(cluster.getCenter());
map.setZoom(map.getZoom()+2);
});
}
var clusterStyles = [
{
textColor: '#000',
textSize:25,
url: '<?=G5_URL?>/images/m1.png',
height: 50,
width: 50
}
];
var mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 15
};
function setMapOnAll() {
try{
markerCluster.clearMarkers();
beaches = null;
}catch(exception){////console.log(exception.message);
}
markers = [];
}
//메뉴스크립트
$(function() {
var $oe_menu = $('#oe_menu3');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
});
$(document).ready(function() {
var $panel = $(".rolling_panel").find("div");
var itemWidth = $panel.children().outerWidth(); // 아이템 가로 길이
var itemLength = $panel.children().length; // 아이템 수
// Auto 롤링 아이디
var rollingId;
auto();
// 배너 마우스 오버 이벤트
$panel.mouseover(function() {
clearInterval(rollingId);
});
// 배너 마우스 아웃 이벤트
$panel.mouseout(function() {
auto();
});
// 이전 이벤트
$("#prev").on("click", prev);
$("#prev").mouseover(function(e) {
clearInterval(rollingId);
});
$("#prev").mouseout(auto);
// 다음 이벤트
$("#next").on("click", next);
$("#next").mouseover(function(e) {
clearInterval(rollingId);
});
$("#next").mouseout(auto);
function auto() {
// 2초마다 start 호출
rollingId = setInterval(function() {
start();
}, 2000);
}
function start() {
//$panel.css("width", itemWidth * itemLength);
$panel.animate({"left": - itemWidth + "px"}, function() {
// 첫번째 아이템을 마지막에 추가하기
$(this).append("<ul>" + $(this).find("ul:first").html() + "</ul>");
// 첫번째 아이템을 삭제하기
$(this).find("ul:first").remove();
// 좌측 패널 수치 초기화
$(this).css("left", 0);
});
}
고수님들 라디오버튼 종류에서 오토바이를 선택을 하구 브랜드가서 브랜드 라디오버튼을선택하구 종류로오면 라디오버튼 값이 체크가 되어있어야하는데 체크된값이 사라지는데.. 안사라지게 할려면 어떻게해야되는지 고수님들 답변 부탁드립니다.
답변 1
저도 저거 비슷한 문제 해결한적이 있었는데요
https://sir.kr/g5_skin/5192?sfl=wr_subject%7C%7Cwr_content&stx=3차
위 소스 참고로 작업했습니다.
저 스킨만드신 원 개발자분이 참 대단하신것 같아요.
처리요지는 지금처럼 카테고리 선택을 단순 jquery로 하지 말고 iframe으로 처리해서 처리하시더라구요
소스가 너무 길어서 다 보진 못했는데 드문드문보니 카테고리쪽 설정인것 같아
도움이 되었으면 해서 글 남겨드립니다.