기존에 사용하는 코드는 새로고침이 되버린다.
modules/board/skins/user_board_dev
해당 게시판에서 구현한 적이 있는데 다시 코드 좀 살펴보러...=33
참고자료
1) 새로고침 없는 댓글 애드온
https://xetown.com/tips/1168446
2) 베스트 댓글 애드온
https://xetown.com/download/23580
3) 나의 메뉴 위젯
https://xetown.com/tips/784922
4) 회원소개 위젯
https://xetown.com/download/1022094
5) 댓글 추천/비추천 새로고침 없이 (코어 수정 방법)
https://xetown.com/tips/130833
6) 스케치북에서 새로고침 없는 댓글 삭제
https://xetown.com/board/402724
7) 추천 모듈 (이걸 사용하면 디자인이 통일되버려서 안됨)
https://xe1.xpressengine.com/index.php?mid=download&package_id=22753651
8) 추천 애드온
https://xe1.xpressengine.com/index.php?mid=download&package_id=22753500
관련해서 내가 제일 많이 글을 썼는데
XE 관련해서 이게 검색이 잘 안되는거 같네.;;
스크랩
좋아요
article-vote.html
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <unload target="article-vote.scss" vars="$rxpFlexTheme->variables" /> <load target="article-vote.js" /> <div class="app-article-vote" data-target-srl="{$oDocument->document_srl}"> {@ $isMyVoted = $oDocument->getMyVote() == 1; $voteActiveClassName = $isMyVoted ? 'active' : null; } <a class="app-article-toolbar__item app--is-vote app-tooltip {$voteActiveClassName} <!--@if($isMyVoted)-->true<!--@end-->" title="좋아요" data-type="up" onclick="alArticleVote(this)"> <div class="app-icon"> <!--@if($isMyVoted)--> <!--<ion-icon name="triangle-sharp"></ion-icon>--> <i class="thumbup"></i> <!--@else--> <!--<ion-icon name="triangle-sharp"></ion-icon>--> <i class="thumbup"></i> <!--@end--> </div> <span class="app-article-vote__count"> {$oDocument->get('voted_count') > 0 ? $oDocument->get('voted_count') : '0'} </span> </a> {@ $isMyBlamed = $oDocument->getMyVote() == -1; $blameActiveClassName = $isMyBlamed ? 'active' : null; } <a class="app-article-toolbar__item app--is-blame app-tooltip {$blameActiveClassName} <!--@if($isMyBlamed)-->true<!--@end-->" title="싫어요" data-type="down" onclick="alArticleVote(this)"> <div class="app-icon"> <!--@if($isMyBlamed)--> <i class="thumbdown"></i> <!--<ion-icon name="triangle-sharp" class="rotate"></ion-icon>--> <!--@else--> <i class="thumbdown"></i> <!--<ion-icon name="triangle-sharp" class="rotate"></ion-icon>--> <!--@end--> </div> <span class="app-article-vote__count"> {$oDocument->get('blamed_count') < 0 ? $oDocument->get('blamed_count') : '0'} </span> </a> </div>
article-vote.js
function appToast(message, type) { const element = document.createElement('div') element.className = 'app-toast' if(type) { element.className = element.className + ' ' + type } const text = document.createTextNode(message) element.appendChild(text) $(document.body).append($(element).fadeIn()) setTimeout(function() { $(element).fadeOut('normal', function() { $(this).remove() }) }, 1000) } function alDocumentAjaxCall(targetSrl, action, callback) { const params = { target_srl: targetSrl, cur_mid: window.current_mid, mid: window.current_mid, module: 'document', act: action, _rx_ajax_compat: 'JSON', _rx_csrf_token: getCSRFToken() } $.ajax({ type: "POST", dataType: "json", url: request_uri, data: params, processData: (action !== 'raw'), success: callback, error: function(err) { console.log(err) } }) } function alArticleVote(el) { console.log(el) const targetSrl = $(el).parent().attr('data-target-srl') const type = $(el).attr('data-type') const isActive = $(el).hasClass('active') if(type === 'down') { var transformedType = 'Down' } else { var transformedType = 'Up' } console.log(targetSrl, type, isActive) // 이미 액티브 상태인 경우 취소 if(isActive) { var action = 'procDocumentVote' + transformedType + 'Cancel' } else { var action = 'procDocumentVote' + transformedType } // 콜백 function callback(res) { if(res.error) { // console.log(el) // appToast(res.message, 'danger') return } var appliedCount = res.voted_count || res.blamed_count var getVoteCount = Number($(el).find('.app-article-vote__count').text()) if(appliedCount) { var count = appliedCount } else if(getVoteCount > -1) { var count = getVoteCount -1 } else { var count = getVoteCount + 1 } $(el).find('.app-article-vote__count').text(count) $(el).toggleClass('active') // appToast(res.message) } alDocumentAjaxCall(targetSrl, action, callback) }
이 코드는 스낙스님 코드인데 자기 게시물 추천은 안되고, 추천 취소 기능도 없다.