질문/공유팁 게시판

댓글 새로고침 버튼 만들기

파파즈
조회 수 3496 추천 수 9
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

궁금하다고 쪽지주신 분이 계셔서.. 비교적 간단한거라 팁으로 올려드립니다.

CSS스피너와 jquery를 이용한 방법입니다.

 

(스케치북 게시판 기준)

 

reload2.gif

 

 

1. HTML

_read.html 적당한 위치에 다음 태그를 넣어주세요

 

<button class="comment-reload" onclick="commentReload({$oDocument->document_srl})">
  <span>댓글 새로고침</span>
  <div class="loading-spinner"></div>
</button>

 

 

 

2. CSS

board.css 적당한 위치에 다음 코드를 넣어주세요.

 

.bd button.comment-reload {position:relative; width:100px; height:32px; background-color:#54639e; color:#fff; text-align:center; border:none}

.bd .loading-spinner {
z-index:2; position:absolute; display:none; border:3px solid #fff; border-right-color:transparent; border-radius:50%; box-sizing:border-box; -webkit-animation-duration:0.45s; -moz-animation-duration:0.45s; animation-duration:0.45s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:rotate-forever; -moz-animation-name:rotate-forever; animation-name:rotate-forever; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; animation-timing-function:linear;
height:20px; width:20px; top:6px; left:40px; background-color:#54639e;
}

@-webkit-keyframes rotate-forever {
0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)}
}

@-moz-keyframes rotate-forever {
  0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)}
}

@keyframes rotate-forever {
0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)}
}

 

 

 

3. JS

board.js 맨 위에 다음 코드를 넣어주세요.

 

function commentReload(target_srl) {
  var reqUrl = current_url.setQuery('mid', current_mid, 'document_srl', target_srl);
  jQuery('.loading-spinner').show();
  jQuery('.comment-reload > span').hide();

  jQuery.ajax ({
    url:reqUrl,
    dataType:'html',
    success: function(data) {
      var a = jQuery(data),
      b = a.find('#cmtPosition').html();
      jQuery('#cmtPosition').html(b);
    },

    complete: function() {
      setTimeout(function() {
        jQuery('.loading-spinner').fadeOut(); 
        jQuery('.comment-reload > span').fadeIn();
      }, 500)
    }
  });
}

 

 

 

잘 안되시는 분은 댓글로 질문주시면 답변 드리겠습니다.

위로 아래로
댓글 61
  • profile
    우와.. 적용하고 싶은 내용이네요. 해보겠습니다! 감사합니다.
  • profile
    잘 안되네요. 버튼을 눌러도 반응이 없네요. 수정된건 모두 업로드 했습니다.
  • profile profile
    에구 코드하나가 틀렸네요 JS부분만 다시 복사해보시겠어요?
  • profile profile
    오~~ 뱅글뱅글 잘 돕니다. 새 댓글 잘 불러오는지 모니터링 해볼게요.. 뭔가 되게 발전된 모습이네요 ㅋㅋ 저희 사이트가 ㅋ
  • profile profile
    ^^ 스타일도 적당히 바꿔서 사용하시면 될듯하네요
  • profile
    애드센스에는 악효과지만 ㅎㅎ 저도 달아보겠습니다. 꿀팁 감사합니다.!
  • profile profile
    페이지 조회수 1000 카운트당 주는 수익은 거의 미미합니다 ㅋ
  • profile profile
    혹시 애드센스가 같이 새로고침되면 문제가 되는건가요? 전 잘 몰라서..

    애드센스 아닌 부분만 새로고침 하실 수도 있어요.

    JS 에서 #cmtPosition 부분이 새로고침되는 영역입니다. 적절히 바꿔서 사용하셔도 될듯하네요
  • profile profile

    아 그말이 아니고 ㅎㅎ 웹지기님 말씀대로 전체 페이지가 새로고침되면 페이지뷰 증가로 수익이 자연히 올라가서 적은겁니다. ㅎㅎ

    근데말씀하신데로 애드센스도 포함된 DIV가 새로고침이 계속된다면 100% 부정행위로 계정이 정지 당할 수 있겠네요.

  • profile profile
    그거 주는 광고주 몇 안되고 그거 수익 얼마 안되요. ㅋ 그 광고가 1000번 나와야 해요 ㅋㅋ
  • profile ?
    생각해보니 그렇다면 ajaxboard나 pjaxboard 쓰면 애드센스 수익은 (비록 티끌만큼이라고 해도) 줄어들겠네요?
  • ? profile
    네 그래서 본문 내 애드센스 쓰시는 분은 pjax 기능을 off하고 써야 한다는 한계가 있어요. 해결하려고 열심히 구글링해봤지만 구글에서조차 외면하는 문제더군요 ㅠ
  • profile

    살짝 문제가 됩니다. 

     

    attach.png

     

    첨부표시가 접혀야 되는데 저게 저상태로 유지되네요. 댓글새로불러오기를 하면요....

  • profile profile
    댓글의 첨부파일인가요?

    js 파일
    complete: function() {

    jQuery('첨부파일 부분 셀렉터 - 예를 들어 .rd_files').css('display', 'none'); <--- 이런 식으로 넣어주시면 아마 될거에요

    setTimeout(function() {
    jQuery('.loading-spinner').fadeOut();
    jQuery('.comment-reload > span').fadeIn();
    }, 500)
  • profile profile
    어떻게 넣으시라는건지 정확하게 이해하기 어려워요.
  • profile ?
    아직 안해봐서 모르겠는데 혹시 display none라고 하는건 저 첨부파일 자체가 안 보이는거 아닌가요? (아니라면 죄송합니다. 안해봐서 모름...)
  • profile profile
    문제 되는 부분 링크 주시면 다시 확인해드릴게요
  • profile profile



    댓글에 첨부가 있으면 첨부정보가 펼쳐졌다가 접히지 않아요.

  • profile profile 
    function commentReload(target_srl) {
  var reqUrl = current_url.setQuery('mid', current_mid, 'document_srl', target_srl);
  jQuery('.loading-spinner').show();
  jQuery('.comment-reload > span').hide();

  jQuery.ajax ({
    url:reqUrl,
    dataType:'html',
    success: function(data) {
      var a = jQuery(data),
      b = a.find('#cmtPosition').html();
      jQuery('#cmtPosition').html(b);
    },

    complete: function() {
      jQuery('.tg_cnt2').css('display', 'none');
      jQuery('.tg_btn2, .tg_close2').on('click', function() {
        jQuery('.tg_cnt2').toggle();
      })
      setTimeout(function() {
        jQuery('.loading-spinner').fadeOut();
        jQuery('.comment-reload > span').fadeIn();
      }, 500);
    }
  });
}

     

    정석적인 방법은 아니지만, 이렇게 하시면 일단 해결은 되네요

  • profile profile
    감사합니다. 잘 되네요. 멋지네요. 댓글 새로고침~
  • profile ?
    와 이거 위치정렬을 float 값으로 지정하니까 다른 요소들의 margin이 무시돼서 레이아웃이 깨지는 바람에 한참 삽질하고 있었는데... 웹지기님 적용하신거 보니까 해당 요소를 div로 감싸고 margin에 퍼센트값을 주셨네요. 덕분에 새로운거 하나 알아갑니다
  • ? profile

    아니에요. 이거 저도 float 으로 하다가 밑에거랑 겹쳐서 제가 실력이 없어 노답이라 그렇게 한거에요 ㅋㅋ
    아마 제대로 하시는 분들은 저처럼 안할거에요 ㅋ

  • profile ?
    근데 왜 겹치는지는 모르시나요? 지금 여러모로 해보고 있는데 왜 그런지 전혀 알 수가 없네요...
  • ? profile
    전 html / css 지식이 없어서 몰라요 ㅋ 모르니까 하다 안되면 포기하고 다른거로 해서 되면 그거로 하는 방식이죠. ㅋ
  • ?
    팁은 무조건 추천!^^ 감사합니다.
  • profile
    스케치북 게시판이 아니라 그런지.. 안되네요.. ^^;;
  • profile profile
    js 스크립트중 #cmtPosition 부분을 사용하시는 게시판에 맞게 수정하시면 됩니다.

    새로고침 시키고자 하는 영역의 아이디값을 입력하시면 되요.
  • profile

     

    화면녹화 못해서 그냥 스마트폰으로 찍어 봤습니다 ㅋㅋ

     

     

  • profile ?
    float 속성을 줄 때 다른 요소들에 영향이 없게 하려면 clear:both 를 해 줘야 하더군요. 이를 이용해서 해결했네요.

    제가 쓰는 레이아웃에서는 마진 퍼센트를 적용할 경우 이상해지는 바람에 어쩔 수 없이...
  • ? profile
    위치는 어디로 잡으셨나요? 저는 여기저기 보다가 그냥 중앙쯤에 좋은거 같아서 그냥 더 연구 안하고 이대로 하고 있어요 ㅋ
  • profile ?
    전 오른쪽으로 했네요. 댓글 입력창이 하단에 있어서..
  • ? profile

    거기 차짓 댓글 없을때 등록버튼처럼 보여서 누를수도 잇겠던데요 ㅋㅋ

    아.. 댓글입력창이 하단이며 새로고침버튼은 위쪽이라 괜찮겠네요~

  • ?
    감사합니다. 몇번 삽질해보니까 잘되네요
  • ?
    와우~감사합니다.
  • profile

    저는 작동은 되는데 스케치북이 아니라 그런지 CSS가 안먹네요.

    빈 HTML 파일에서도 CSS가 안먹히네요

     

    ddd.jpg

     

  • profile profile
    깜빡했네요 앞에 .bd 만 지워주세요
  • profile
    제 경우에는 조언해주신대로 했더니 잘 됐는데,
    문제는 한번 새로고침 후에는 댓글을 입력할 수 없는 현상이 나타납니다. (물론 제 경우겠죠.)
    해결할 수 없어서 하는 수 없이... 일단 보류했네요..

    그래도 어쨌거나 새로고침은 잘 작동했습니다.
  • profile
    댓글이 없는경우에는 해당 div가 애초에 숨겨져 있어서 버튼만으로 작동이 되지는 않는것 같네요.
  • profile profile
    방금 테스트했습니다. 잘 됩니다.
  • profile profile

    스케치북 이외의 게시판에서 발생하는 문제이겠네요
    아까 강제로 첨부파일을 OPEN 시킨게 이부분에해당하는 소스같아요 왠지

     

    만약 이프문으로 댓글이 없을때 댓글 출력부에 아무 소스도 출력되지 않도록 설정된 게시판이라면 당연히 작동이 안될것같네요. 그 IF 문을 찾아야할듯 ㅎㅎ

  • profile profile
    네. 다른 스킨은 구조가 다르다면 맞게 바꾸어야 하겠지만요.
  • profile profile
    근데 어차피 댓글이 없는 경우라면 출력안해도 상관 없구요.
    그 상태에 진입되어 있을때 버튼 누르면 ajax로 댓글 달린거 확인 후 그부분이 반영될텐데요. 혹시 테스트 했더니 안되셨던건가요?
  • profile profile

    IF 문으로 comment 인크루드 해오는 바깥에 Div로 하나 감싸고 그 Div를 새로고침 하게 하여서 작동 성공했습니다.

     

    사실 제사이트는 댓글이 없어서 ㅋㅋㅋ 필요가 없는기느이긴하네요 먼 훗날 이기능이 많이쓰였음 좋겠네요 ..

     

    백날 새로고침한들 ㅠㅠㅋㅋㅋ 댓글이 있어야말이죠 ㅋㅋ 하하

  • profile profile
    댓글이 없더라도 새댓글이 달리면 댓글 새로고침으로 보아야죠~ ㅎ
  • profile ?
    포메러브쩌럼 저걸 좀 끌어올리려면(?) 어떻게 해해야할까요?
  • ? profile
    위치를 제대로 잡은거라면 별도 마진이 없어 딱 붙어야 합니다. 오히려 저는 마진을 살짝 주었습니다.
  • profile ?
    제가 위치를 잘못잡은거군요~
  • ?
    와우~감사합니다 적용했는데 잘 되네요~
  • ?
    보니까 디씨도 이 방식을 쓰던데, 이게 실시간으로 통신하는 게 아니라서 그런지 ajaxboard 모듈과는 달리 서버에 부하가 심하게 일어나는 부작용도 없고 좋은 거 같네요.

    (다만 디씨는 댓글 등록할때도 새로고침 없이 되긴 하지만...)
  • profile
    그런데 궁금한게 왜 모바일에서는 보통 이런것을 적용하지 않는걸까요??
  • profile profile
    모바일에서도 밑으로 더보기 누르면 리스트 더보고 이런거 있지 않나요?
  • profile profile
    대형사이트들 보면 모바일에도 하는 경우가 있고 PC에만 하는 경우도 있더라구요.
  • ?
    움짤의 마우스가 움직여서 순간적으로 반대쪽으로 끌어ㅆ.....
  • profile
    저희는 모바일에도 똑같이 달아줬어요~
  • profile

    flat모바일에 적용하고 싶은 분들 첨부한 js파일로 덮어주시면 댓글작성,댓글터치시레이어팝업 이상없습니다.

    proto님께서 수정해주셨습니다.

     

    이 파일에 ajax 처리가 되어있으니 js파일은 따로 건드리실 필요가 없구 html/css 작업만 하시면 됩니다.

  • ?

    한 가지 문제가 있네요. 다른 경우는 제대로 되는 거 같은데, "대댓글을 작성하던 도중" 새로고침 버튼을 누를 경우 더 이상 대댓글 창이 펼쳐지지 않네요. 다른 분들도 그런가요?

    @웹지기

    확인 좀 부탁드립니다

    (그니까 대댓글을 입력하는 창을 띄우고 내용을 입력하던 도중에 새로고침 버튼을 누르면, 그 다음부터는 그 페이지 전체를 새로고침하기 전까지는 댓글 옆에 "댓글" 버튼을 눌러도 대댓글 창이 활성화가 안 된다는 뜻입니다.)

    혹시 앞에 @간장게장 님이 말씀하신 댓글 안 달린다는 증상이 이런건가요?

     

    (사실 이럴 일은 드물어서 별로 상관없을 수도 있긴 합니다. 저도 방금 아주 우연한 실수를 통해 깨달았네요. 애초에 댓글 쓰다가 그 버튼을 누를 일은 없어서...)

  • ? profile
    스케치북5 스킨을 말씀하시는 것 같은데 대댓글을 누르고 새로고침을 다시 누르는 액션 자체가 이상한거라 저는 별 문제로 보지 않고 있습니다.
    말씀 하신대로 댓글에 대댓글을 달으려다가 이를 중단하고 새로고침을 누르면 다시 대댓글을 시도하면 댓글 창이 열리지 않죠. js 동작에 영향을 줄 수 밖에 없을 겁니다.

    하지만 이런 경험을 할 경우는 극히 드물기도 하고 별 문제가 아닌것으로 판단하고 저는 그냥 넘깁니다.
  • profile ?
    그렇군요
  • ?
    board.js 가 없는 경우
    어디가 가능한가요?
  • ?
    PJAXboard에서 새로고침까지는 적용했는데 새로고침후 댓글의 답글/수정/삭제버튼을
    누르면 먹통이 되네요 ㅠㅠ
  • ?
    저는 버튼만 되고 댓글이 추가로 내려 오지 않네요 추가된것만큼 밑으로 늘어나야 하는데 안그러네요 ㅎㅎ
    감사합니다