[G5.3+] ajax 댓글 플러그인 v1.0 (새로고침없이 댓글 달기) 정보
[G5.3+] ajax 댓글 플러그인 v1.0 (새로고침없이 댓글 달기)첨부파일
본문
** 소개 **
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
댓글 전체
추천 누르고 갈게요 :)
잘 사용하겠습니다 ^^b
$('ajaxcomment').replaceWith($('ajaxcomment', tempDom2)) 로 인해서 본문은 영향을 받지 않지만 댓글들 중 움짤이나 동영상은 replaceWith로 인해 처음부터 다시 시작하는 증상이
혹 이 부분을 비효율적이라고 말씀하신 건가요?
이 부분도 개선해주셨으면 너무 좋겠습니다
그리고 sir처럼 loading 이미지를 넣으려면 어떻게 참조해야 할까요?
댓글을 추가/수정/삭제시 새로 추가된 댓글만 불러오는 것이 아니라, 댓글 전체를 reload 하기 때문에 댓글 내부의 움짤이나 동영상은 처음부터 다시 시작하는 것이 정상적인 작동입니다.
로딩 이미지를 넣으려면 ajax에 async true 처리를 하고
ajax 전에 로딩 이미지를 띄우고 ajax complete 후에 로딩 이미지를 삭제하면 되실 것 같네요
다만 ajax가 콜백으로 중첩되어 있기 때문에 ajax를 분리하고 성공 플래그를 통해 두번째 ajax를 구동하는 등 직접 수정하시려면 다소 까다로운 과정이 되실 것 같습니다
공개해 주신 것만 해도 감사한데 더 한걸 요청드려 죄송합니다
댓글을 달았을때 모든 댓글 변동사항을 reload 하기 위해서 그렇게 만든거구요~
또 추가된 댓글만 추가/수정/삭제 기능으로 개발할 경우는 베이스 스킨 외에는 적용이 안됩니다! (자바스크립트로 새로운 댓글을 구현할 때 제가 의도한 모양으로만 댓글 생성이 됩니다) 그래서 이런 방식으로 구현한거랍니다ㅎㅎ
2. 그냥 basic 폴더 그대로 덮어씌우면 그건 정상적으로 됩니다. 디자인이 옜날 그누보드지만..
3. 2번 게시판 쓸 경우 비회원이 대댓글 다는 건 간혈적으로 안됩니다. 새로고침 마구 하고 하면 어쩌다 성공하는데...뭔가 오류가 있씁니다 (관리자는 상관없이 다 잘됩니다)