새로고침 없는 좋아요 버튼

기존에 사용하는 코드는 새로고침이 되버린다.

https://thestorybook.tistory.com/202

 

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 관련해서 이게 검색이 잘 안되는거 같네.;;

 

스크랩

https://eond.com/talk/442007

https://eond.com/xe/469997

 

좋아요

https://eond.com/xe/441139

https://eond.com/xe/441138

 

 

 

---

 

아래는 스낙스님 코드인데 자기 게시물 추천은 안되고, 추천 취소 기능도 없다.

 

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)
}