[G5.3+] ajax 댓글 플러그인 v1.0 (새로고침없이 댓글 달기) > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

[G5.3+] ajax 댓글 플러그인 v1.0 (새로고침없이 댓글 달기) 정보

[G5.3+] ajax 댓글 플러그인 v1.0 (새로고침없이 댓글 달기)

첨부파일

basic.core.zip (821byte) 149회 다운로드 2018-12-10 11:18:03
basic.zip (44.9K) 109회 다운로드 2018-12-10 11:18:03

본문

** 소개 ** 

ajax를 활용하여 풀페이지 새로고침 없이 댓글을 달 수 있는 스킨형식의 플러그인입니다 

루트폴더/skin/board/basic에 위치한 베이직 게시판 스킨 기준으로 작성되었습니다

코어는 건드리지 않아 설치, 수정 및 삭제가 간편합니다

다만, 본 ajax 코멘트 등록 방식은 json이 아닌 풀html으로 데이터를 주고 받기 때문에 다소 비효율적입니다. 베이직 게시판 뿐만 아니라 모든 게시판 스킨에도 활용할 수 있도록 일부러 이런 방식으로 플러그인을 제작했습니다.

 

 

** 적용방법 ** 

1. basic.zip 의 경우 (베이직 스킨 대체)

그누보드 5.3의 베이직 게시판(루트/skin/board/basic)에 ajax 코멘트를 적용한 방식입니다

덮어 씌우면 추가 수정 없이 그대로 사용할 수 있습니다.

 

 

2. basic.core.zip 의 경우 (기존 스킨에 플러그인 적용)

기존에 사용하던 게시판 스킨이 있는 경우 아래와 같은 순서를 따라 주세요

 

1) basic.core.zip의 압축을 풀어 delete_comment.head.skin.php, delete_comment.skin.php, write_comment_update.skin.php 를 사용하는 스킨 폴더로 복사하세요

 

2) 사용중인 스킨의 view_comment.skin.php 를 열어서 아래와 같이 수정하세요

가) 코멘트 삭제 문구를 찾아서 변경

onclick="return comment_delete();"

onclick="return comment_delete(this);"

 

나) <!-- 댓글 시작 { --> <!-- } 댓글 끝 --> 내부를 <ajaxcomment>로 감싸주세요

<!-- 댓글 시작 { -->
<ajaxcomment>
<section id="bo_vc">
...
</section>
</ajaxcomment>
<!-- } 댓글 끝 -->

 

다) fviewcomment_submit 함수 코드를 수정하세요

function fviewcomment_submit(f)
{
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
 
f.is_good.value = 0;
 
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": "",
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
 
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
f.wr_content.focus();
return false;
}
 
// 양쪽 공백 없애기
var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
if (char_min > 0 || char_max > 0)
{
check_byte('wr_content', 'char_count');
var cnt = parseInt(document.getElementById('char_count').innerHTML);
if (char_min > 0 && char_min > cnt)
{
alert("댓글은 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
} else if (char_max > 0 && char_max < cnt)
{
alert("댓글은 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
else if (!document.getElementById('wr_content').value)
{
alert("댓글을 입력하여 주십시오.");
return false;
}
 
if (typeof(f.wr_name) != 'undefined')
{
f.wr_name.value = f.wr_name.value.replace(pattern, "");
if (f.wr_name.value == '')
{
alert('이름이 입력되지 않았습니다.');
f.wr_name.focus();
return false;
}
}
 
if (typeof(f.wr_password) != 'undefined')
{
f.wr_password.value = f.wr_password.value.replace(pattern, "");
if (f.wr_password.value == '')
{
alert('비밀번호가 입력되지 않았습니다.');
f.wr_password.focus();
return false;
}
}
 
<?php if($is_guest) echo chk_captcha_js(); ?>
 
set_comment_token(f);
 
document.getElementById("btn_submit").disabled = "disabled";
 
// ajax comment system
$.ajax({
url: f.action,
type: 'POST',
data: $(f).serialize(),
dataType: 'html',
})
.done(function(str) {
var tempDom = $('<output>').append($.parseHTML(str))
var title = $('title', tempDom).text()
if (title === '') {
// 1. commentBox 원위치
comment_box('', 'c')
 
// 2. commentBox Form 리셋
f.reset()
// 3. 코멘트 출력
$.ajax({
url: str,
type: 'GET',
dataType: 'html'
})
.done(function(str2) {
var tempDom2 = $('<output>').append($.parseHTML(str2))
$('ajaxcomment').replaceWith($('ajaxcomment', tempDom2))
})
}
 
<?php if ($is_guest) { ?>
// 4. 캡차 리로드
$('#captcha_reload').trigger('click')
<?php } ?>
 
document.getElementById("btn_submit").disabled = ""
})
 
return false;
}

 

라) comment_delete 함수 코드를 수정하세요

function comment_delete(that)
{
if (confirm('이 댓글을 삭제하시겠습니까?')) {
// ajax comment system
$.ajax({
url: that.href,
type: 'GET',
dataType: 'html',
})
.done(function(str) {
var tempDom = $('<output>').append($.parseHTML(str))
var title = $('title', tempDom).text()
if (title === '') {
// 1. commentBox 원위치
comment_box('', 'c')
// 2. 코멘트 출력
$.ajax({
url: str,
type: 'GET',
dataType: 'html'
})
.done(function(str2) {
var tempDom2 = $('<output>').append($.parseHTML(str2))
$('ajaxcomment').replaceWith($('ajaxcomment', tempDom2))
})
}
 
<?php if ($is_guest) { ?>
// 4. 캡차 리로드
$('#captcha_reload').trigger('click')
<?php } ?>
})
}
 
return false
}

 

수정내용이 헷갈리면 basic.zip 첨부파일의 view_comment.skin.php를 참고하시기 바랍니다

추천
15

댓글 전체

다른 분들은 어떠하신지 모르겠는데요
$('ajaxcomment').replaceWith($('ajaxcomment', tempDom2)) 로 인해서 본문은 영향을 받지 않지만 댓글들 중 움짤이나 동영상은 replaceWith로 인해 처음부터 다시 시작하는 증상이
혹 이 부분을 비효율적이라고 말씀하신 건가요?
이 부분도 개선해주셨으면 너무 좋겠습니다

그리고 sir처럼 loading 이미지를 넣으려면 어떻게 참조해야 할까요?
비효율적이라는 말은 데어터를 주고받을때 json이 아닌 html텍스트를 주고받기 때문에 쓴 내용입니다 :)
댓글을 추가/수정/삭제시 새로 추가된 댓글만 불러오는 것이 아니라, 댓글 전체를 reload 하기 때문에 댓글 내부의 움짤이나 동영상은 처음부터 다시 시작하는 것이 정상적인 작동입니다.

로딩 이미지를 넣으려면 ajax에 async true 처리를 하고
ajax 전에 로딩 이미지를 띄우고 ajax complete 후에 로딩 이미지를 삭제하면 되실 것 같네요
다만 ajax가 콜백으로 중첩되어 있기 때문에 ajax를 분리하고 성공 플래그를 통해 두번째 ajax를 구동하는 등 직접 수정하시려면 다소 까다로운 과정이 되실 것 같습니다
짧은 생각으론 댓글을 추가/수정/삭제시 새로 추가된 댓글만 추가/수정/삭제가 더 좋은 방법같은데 이 방식으로 수정하는 건 어려울까요?
공개해 주신 것만 해도 감사한데 더 한걸 요청드려 죄송합니다
음...제가 이렇게 만든 이유는
댓글을 달았을때 모든 댓글 변동사항을 reload 하기 위해서 그렇게 만든거구요~
또 추가된 댓글만 추가/수정/삭제 기능으로 개발할 경우는 베이스 스킨 외에는 적용이 안됩니다! (자바스크립트로 새로운 댓글을 구현할 때 제가 의도한 모양으로만 댓글 생성이 됩니다) 그래서 이런 방식으로 구현한거랍니다ㅎㅎ
멋지십니다. 궁금한점이 있는데, 댓글들을 쭈욱 읽어봤는데요, 댓글 전체를 새로고침이 된다고 하셨는데, 그래도 원래 그누보드의 동기방식인 댓글 입력 수정 삭제보다는 부하가 훨씬 없겠죠? 나중에 댓글들이 50~100개씩 올라온다는 가정하에, 동기로 돌리는 방식이랑 비교시 데이터양의 차이가 많이 클까요?
1. 최신 그누보드 basic에 알려주신 수정방법대로 하면 이상하게 코멘트 작성이 안됩나다. 오류가 나요
2. 그냥 basic 폴더 그대로 덮어씌우면 그건 정상적으로 됩니다. 디자인이 옜날 그누보드지만..
3. 2번 게시판 쓸 경우 비회원이 대댓글 다는 건 간혈적으로 안됩니다. 새로고침 마구 하고 하면 어쩌다 성공하는데...뭔가 오류가 있씁니다 (관리자는 상관없이 다 잘됩니다)
전체 503
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT