jQuery include 오류 문의드려요!
본문
안녕하세요, 코딩 관련해서 주먹구구식으로 하는지라 기초적인 것 질문드려요!
게시판 스킨 하나를 구해서(러브렛님이 공유해주신 댓글 별점기능 스킨입니다.) 공유해주신 스킨 폴더를 skin/board 경로에 업로드하고 관리자 설정에서 게시판에 스킨 해당 스킨으로 지정하고, _head, _tail 파일 들어간거 확인했는데 해당 게시판 관련 페이지에서만 js관련 파일이 전혀 로드가 안됩니다. 그래서 오류가 다음과 같이 뜹니다.
심지어 page로 넣은 개인페이지에서도 따로 설정 없어도 같이 불려오는 head에서 제대로 js관련 라이브러리를 불러오는거 같은데, 왜 이 게시판만 못불러오는걸까요...? 처음 사용해보는지라 기초지식이 없어서 여쭤봅니다 ㅠㅠ...
아래는 해당 게시판 들어갔을때 개발자도구 소스부분인데 원래부터 포함되어 있던 <script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script> 이 코드가 있어서 그런지 해당 파일만 있고, 다른 파일은 불려와있지 않습니다.
그래서 저도 임의로 jquery 1.12.4.min.js파일을 view랑 list파일에 직접 링크했음에도 불구하고 맨위 3개 오류중에서 $ is not defined 오류는 없어지지 않네요... 어떻게 해결할 수 있을까요?
답변 5
php 와 스크립트 및 기타 모든 언어 및 라이브러리는
위에서부터 아래로 순차적으로 실행됩니다.
특히 스크립트의 경우 특정 에러가 발생하면 다음 코드를 모두 죽여버립니다..
현재 해당 페이지가 어떤 구성으로 되어있는지 모르기 때문에
루트에 별도 페이지를 하나 만드시고
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">클릭하세요</button>
<div id="message"></div>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#message").text("제이쿼리가 활성화 되어있습니다.");
});
});
</script>
</body>
</html>
1차적으로 위 예제 코드로 우선 테스트 해보시고
2차적으로 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 이 부분을 빼고
원래 있는 head.php 등으로 대체해서 테스트해보세요.
루트/skin/board/basic_rating/test.php를 저 코드로 하고 들어가보니 버튼을 누르면 활성화 되어있다고 뜹니다!
그런데 script 대신 아래 내용으로 바꾸니 버튼을 누르면
<?php
include_once('../../../common.php');
include_once('../../../head.php');
?>
아래처럼 다시 에러가 뜨네요
test.php:147 Uncaught ReferenceError: $ is not defined
at test.php:147:5
(익명) @ test.php:147이 오류 이해하기AI
test.php:178 Uncaught ReferenceError: $ is not defined
at test.php:178:9
제 예상으로는 common.php 혹은 head.php를 제대로 안불러와서 에러가 터진거 같아요
이게 맨 위에 common, head, tail.php를 다 넣으니 페이지 하단부가 나오지 않고, 그렇다고 tail을 중간 어디에 넣으려니 똑같은 오류가 나네요... 어느 위치에 넣어야되는걸까요
view.skin.php
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
<!-- 게시물 읽기 시작 { -->
<article id="bo_v" style="width:<?php echo $width; ?>">
<header>
<h2 id="bo_v_title">
<?php if ($category_name) { ?>
<span class="bo_v_cate"><?php echo $view['ca_name']; // 분류 출력 끝 ?></span>
<?php } ?>
<span class="bo_v_tit">
<?php
echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력
?></span>
</h2>
</header>
<section id="bo_v_info">
<h2>페이지 정보</h2>
<div class="profile_info">
<div class="pf_img"><?php echo get_member_profile_img($view['mb_id']) ?></div>
<div class="profile_info_ct">
<span class="sound_only">작성자</span> <strong><?php echo $view['name'] ?><?php if ($is_ip_view) { echo " ($ip)"; } ?></strong><br>
<span class="sound_only">댓글</span><strong><a href="#bo_vc"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <?php echo number_format($view['wr_comment']) ?>건</a></strong>
<span class="sound_only">조회</span><strong><i class="fa fa-eye" aria-hidden="true"></i> <?php echo number_format($view['wr_hit']) ?>회</strong>
<strong class="if_date"><span class="sound_only">작성일</span><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></strong>
</div>
</div>
<!-- 게시물 상단 버튼 시작 { -->
<div id="bo_v_top">
<?php ob_start(); ?>
<ul class="btn_bo_user bo_v_com">
<li><a href="<?php echo $list_href ?>" class="btn_b01 btn" title="목록"><i class="fa fa-list" aria-hidden="true"></i><span class="sound_only">목록</span></a></li>
<?php if ($reply_href) { ?><li><a href="<?php echo $reply_href ?>" class="btn_b01 btn" title="답변"><i class="fa fa-reply" aria-hidden="true"></i><span class="sound_only">답변</span></a></li><?php } ?>
<?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b01 btn" title="글쓰기"><i class="fa fa-pencil" aria-hidden="true"></i><span class="sound_only">글쓰기</span></a></li><?php } ?>
<?php if($update_href || $delete_href || $copy_href || $move_href || $search_href) { ?>
<li>
<button type="button" class="btn_more_opt is_view_btn btn_b01 btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">게시판 리스트 옵션</span></button>
<ul class="more_opt is_view_btn">
<?php if ($update_href) { ?><li><a href="<?php echo $update_href ?>">수정<i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></li><?php } ?>
<?php if ($delete_href) { ?><li><a href="<?php echo $delete_href ?>" onclick="del(this.href); return false;">삭제<i class="fa fa-trash-o" aria-hidden="true"></i></a></li><?php } ?>
<?php if ($copy_href) { ?><li><a href="<?php echo $copy_href ?>" onclick="board_move(this.href); return false;">복사<i class="fa fa-files-o" aria-hidden="true"></i></a></li><?php } ?>
<?php if ($move_href) { ?><li><a href="<?php echo $move_href ?>" onclick="board_move(this.href); return false;">이동<i class="fa fa-arrows" aria-hidden="true"></i></a></li><?php } ?>
<?php if ($search_href) { ?><li><a href="<?php echo $search_href ?>">검색<i class="fa fa-search" aria-hidden="true"></i></a></li><?php } ?>
</ul>
</li>
<?php } ?>
</ul>
<script>
jQuery(function($){
// 게시판 보기 버튼 옵션
$(".btn_more_opt.is_view_btn").on("click", function(e) {
e.stopPropagation();
$(".more_opt.is_view_btn").toggle();
})
;
$(document).on("click", function (e) {
if(!$(e.target).closest('.is_view_btn').length) {
$(".more_opt.is_view_btn").hide();
}
});
});
</script>
<?php
$link_buttons = ob_get_contents();
ob_end_flush();
?>
</div>
<!-- } 게시물 상단 버튼 끝 -->
</section>
<section id="bo_v_atc">
<h2 id="bo_v_atc_title">본문</h2>
<div id="bo_v_share">
<?php include_once(G5_SNS_PATH."/view.sns.skin.php"); ?>
<?php if ($scrap_href) { ?><a href="<?php echo $scrap_href; ?>" target="_blank" class="btn btn_b03" onclick="win_scrap(this.href); return false;"><i class="fa fa-bookmark" aria-hidden="true"></i> 스크랩</a><?php } ?>
</div>
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
echo "<div id=\"bo_v_img\">\n";
foreach($view['file'] as $view_file) {
echo get_file_thumbnail($view_file);
}
echo "</div>\n";
}
?>
<!-- 본문 내용 시작 { -->
<div class="star-ratings">
<div class="star-ratings-fill" style="width:<?php echo (int)($view['wr_10']*10); ?>%">
<span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span>
</div>
<div class="star-ratings-base">
<span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span><span><i class="fa fa-star" aria-hidden="true"></i></span>
</div>
</div>
<div class="star-info"><span class="av"><?php echo number_format($view['wr_10'],2) ?></span><span>/10</span> (<?php if($view['wr_8'] > 0) { echo $view['wr_8']."명 평가"; } else { echo "평가자 없음"; } ?>)</div>
<div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>
<?php //echo $view['rich_content']; // 과 같은 코드를 사용할 경우 ?>
<!-- } 본문 내용 끝 -->
<?php if ($is_signature) { ?><p><?php echo $signature ?></p><?php } ?>
<!-- 추천 비추천 시작 { -->
<?php if ( $good_href || $nogood_href) { ?>
<div id="bo_v_act">
<?php if ($good_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $good_href.'&'.$qstr ?>" id="good_button" class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><?php echo number_format($view['wr_good']) ?></strong></a>
<b id="bo_v_act_good"></b>
</span>
<?php } ?>
<?php if ($nogood_href) { ?>
<span class="bo_v_act_gng">
<a href="<?php echo $nogood_href.'&'.$qstr ?>" id="nogood_button" class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?></strong></a>
<b id="bo_v_act_nogood"></b>
</span>
<?php } ?>
</div>
<?php } else {
if($board['bo_use_good'] || $board['bo_use_nogood']) {
?>
<div id="bo_v_act">
<?php if($board['bo_use_good']) { ?><span class="bo_v_good"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sound_only">추천</span><strong><?php echo number_format($view['wr_good']) ?></strong></span><?php } ?>
<?php if($board['bo_use_nogood']) { ?><span class="bo_v_nogood"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i><span class="sound_only">비추천</span><strong><?php echo number_format($view['wr_nogood']) ?></strong></span><?php } ?>
</div>
<?php
}
}
?>
<!-- } 추천 비추천 끝 -->
</section>
<?php
$cnt = 0;
if ($view['file']['count']) {
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view'])
$cnt++;
}
}
?>
<?php if($cnt) { ?>
<!-- 첨부파일 시작 { -->
<section id="bo_v_file">
<h2>첨부파일</h2>
<ul>
<?php
// 가변 파일
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view']) {
?>
<li>
<i class="fa fa-folder-open" aria-hidden="true"></i>
<a href="<?php echo $view['file'][$i]['href']; ?>" class="view_file_download">
<strong><?php echo $view['file'][$i]['source'] ?></strong> <?php echo $view['file'][$i]['content'] ?> (<?php echo $view['file'][$i]['size'] ?>)
</a>
<br>
<span class="bo_v_file_cnt"><?php echo $view['file'][$i]['download'] ?>회 다운로드 | DATE : <?php echo $view['file'][$i]['datetime'] ?></span>
</li>
<?php
}
}
?>
</ul>
</section>
<!-- } 첨부파일 끝 -->
<?php } ?>
<?php if(isset($view['link']) && array_filter($view['link'])) { ?>
<!-- 관련링크 시작 { -->
<section id="bo_v_link">
<h2>관련링크</h2>
<ul>
<?php
// 링크
$cnt = 0;
for ($i=1; $i<=count($view['link']); $i++) {
if ($view['link'][$i]) {
$cnt++;
$link = cut_str($view['link'][$i], 70);
?>
<li>
<i class="fa fa-link" aria-hidden="true"></i>
<a href="<?php echo $view['link_href'][$i] ?>" target="_blank">
<strong><?php echo $link ?></strong>
</a>
<br>
<span class="bo_v_link_cnt"><?php echo $view['link_hit'][$i] ?>회 연결</span>
</li>
<?php
}
}
?>
</ul>
</section>
<!-- } 관련링크 끝 -->
<?php } ?>
<?php if ($prev_href || $next_href) { ?>
<ul class="bo_v_nb">
<?php if ($prev_href) { ?><li class="btn_prv"><span class="nb_tit"><i class="fa fa-chevron-up" aria-hidden="true"></i> 이전글</span><a href="<?php echo $prev_href ?>"><?php echo $prev_wr_subject;?></a> <span class="nb_date"><?php echo str_replace('-', '.', substr($prev_wr_date, '2', '8')); ?></span></li><?php } ?>
<?php if ($next_href) { ?><li class="btn_next"><span class="nb_tit"><i class="fa fa-chevron-down" aria-hidden="true"></i> 다음글</span><a href="<?php echo $next_href ?>"><?php echo $next_wr_subject;?></a> <span class="nb_date"><?php echo str_replace('-', '.', substr($next_wr_date, '2', '8')); ?></span></li><?php } ?>
</ul>
<?php } ?>
<?php
// 코멘트 입출력
include_once(G5_BBS_PATH.'/view_comment.php');
?>
</article>
<!-- } 게시판 읽기 끝 -->
<script>
<?php if ($board['bo_download_point'] < 0) { ?>
$(function() {
$("a.view_file_download").click(function() {
if(!g5_is_member) {
alert("다운로드 권한이 없습니다.\n회원이시라면 로그인 후 이용해 보십시오.");
return false;
}
var msg = "파일을 다운로드 하시면 포인트가 차감(<?php echo number_format($board['bo_download_point']) ?>점)됩니다.\n\n포인트는 게시물당 한번만 차감되며 다음에 다시 다운로드 하셔도 중복하여 차감하지 않습니다.\n\n그래도 다운로드 하시겠습니까?";
if(confirm(msg)) {
var href = $(this).attr("href")+"&js=on";
$(this).attr("href", href);
return true;
} else {
return false;
}
});
});
<?php } ?>
function board_move(href)
{
window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");
}
</script>
<script>
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
// 추천, 비추천
$("#good_button, #nogood_button").click(function() {
var $tx;
if(this.id == "good_button")
$tx = $("#bo_v_act_good");
else
$tx = $("#bo_v_act_nogood");
excute_good(this.href, $(this), $tx);
return false;
});
// 이미지 리사이즈
$("#bo_v_atc").viewimageresize();
});
function excute_good(href, $el, $tx)
{
$.post(
href,
{ js: "on" },
function(data) {
if(data.error) {
alert(data.error);
return false;
}
if(data.count) {
$el.find("strong").text(number_format(String(data.count)));
if($tx.attr("id").search("nogood") > -1) {
$tx.text("이 글을 비추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
} else {
$tx.text("이 글을 추천하셨습니다.");
$tx.fadeIn(200).delay(2500).fadeOut(200);
}
}
}, "json"
);
}
</script>
<!-- } 게시글 읽기 끝 -->
여러가지 시도해봐도 이상한점은 basic을 기반으로 만든 스킨이라 거의 구조의 차이가 없는데, 해당 게시판 스킨을 basic으로 지정하면 잘 불러오고, 해당스킨인 basic_rating으로 지정하면 저렇게 jquery오류가 뜬다는겁니다. 파일구조가 거의 흡사한데 왜 이런오류가 발생하는걸까요..
현재 절대경로를 몾찾는거에요..
include_once('../../../common.php');
include_once('../../../head.php');
이게 제대로 로드 되는지 채크해보세요
만약 이게 제대로 로드되는거라면 head.php 에서 제이쿼리가 제대로 로드되는지 그것도 채크해보시구요
엇 선생님 view.skin.php 주신 코드대로 했는데 이번에는 경로를 찾을수 없다해서, 디렉토리를 위아래로 좀 조절했는데, 아래 코드로 경로 오류는 뜨지 않더라구요.
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once('../common.php');
include_once('../head.php');
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
실제 수정하고 있는 파일은 view.skin.php 파일은 html/skin/board/basic_rating 안에 있는 파일인데, 경로는 html/bbs 폴더에 있는 view.php파일 기준으로 상대경로를 지정해야되는건가요?
그리고 저렇게 해서 로드가 되긴한거같은데 여전히
Uncaught ReferenceError: $ is not defined
viewimageresize.js:96 Uncaught ReferenceError: jQuery is not defined
두개 오류가 발생하고 있습니다.
그냥 답답해서 치킨한마리 정도로 해드릴께요..
원하시면 쪽지로 카톡 ID 보내주세요.
답변을 작성하시기 전에 로그인 해주세요.
