ajax를 적용하여 버튼 새로고침 하려고 하는데요,


루비온레일즈를 통해서 뼈대는 작성되어 있는 상태입니다.

팔로우버튼, 좋아요, 댓글 각각의 기능마다 ajax를 통해 페이지 새로고침 없이 바로바로 업데이트 되는 내용들을 보여주려 하는데요

팔로우 버튼 이미지

그리고 그 아래쪽 스크립트는 이렇습니다.(위에 버튼 태그 마무리되는 곳 아래쪽에 작성)

이미지

팔로우 최소 버튼도 역시

이미지

콘트롤러 쪽은

이미지

제가 이해하고 있는 내용은 follow-btn 클래스로 지정되어 있는 버튼이 눌릴때 변수 followed_id에 followed-id 데이터를 넣어 /follows 주소로 보내서 followed_id를 통한 콘트롤러 쪽 작업을 마치고 다시 데이터를 보내어 역시 follow-btn 클래스로 지정되어 있는 곳에 p태그로 감싸여 있는 곳에 데이터를 적용한다. 이렇게 인데요

스크립트 태그도 없고,

이미지

으로 했을때랑 차이없이 페이지 전체 새로고침 되면서 팔로우-팔로우 취소 버튼이 작동하고 있습니다.

어떤 부분을 고치면 팔로우버튼만 새로고침(ajax... ㅜㅜ)이 될 수 있을까요?

  • 2016년 11월 28일에 작성됨
    레일즈를 통해서 sns를 만들고 있습니다.

조회수 49


1 답변


버튼눌렀을 때 ajax 콜로 해줘야해요.

http://api.jquery.com/jquery.ajax/


$('.follow-btn').click(function() {

    var followd_id = $(this).data{"followed-id"};

    $.ajax({
        type: "POST",     //또는 GET, 라우터에서 설정한 걸로 하세요.
        url: '/follows',     // request url
        data: {
            followd_id : followd_id
        },
        dataType: "script", // reponse는 script로
        success: function() {
           // 로딩창 숨기는거 넣으면 됩니다.
        }
    });

}

view 폴더에 create시에 해당하는 js 를 만들어 줍니다.

예를 들어 생성후에 보여지는 view가 show.html.erb라면 show.js.erb를 만들어줍니다.

show.js.erb

    # 부분 업데이트를 해줍니다.
    # 댓글 관련 view 부분을 따로 빼주면 좋습니다 ( _comment.html.erb) 이런식으로
    # 댓글을 감싸고 있는 div 아이디가 comment_wrapper라면 아래와 같이하면 됩니다.
    $('#.comment_wrapper).html(
        "<%= escape_javascript(render('comment') %>"
    );

이래도 안돼면

컨트롤러를 수정해주세요.

def create
    @follow = Follow.create(...)
    if @follow.save
        respond_to do |format|
            format.html do
                redirect_to :back
            end
            format.js #javascript response
        end
    else
        # 오류 처리
    end

end

정리하자면

  1. ajax 호출.
  2. 변경하기 원하는 부분을 처리 (view안의 js에서)

해주시면 됩니다.


자바스크립트로 ajax 콜 말고 view 단에서 바로 할 수 도 있습니다.

<%= link_to "팔로우", { :controller => 'mycontroller', :action=>"create", :data=> post.user.id }, :remote=>true %>

를 하시고 똑같이 view단에서 변경할 부분을 js에서 처리해주면 됩니다.

  • 2016년 11월 28일에 작성됨
    프론트앤드, 임베디드 초보개발자입니다

  • 제가 실력이 부족해서 아직 막혀있는 상태이지만 ㅜㅜ 기존에 알고 있는 것과는 다른 식으로 생각해 볼 여지를 주신 점 고맙습니다. (그래서 답변채택도 못 하고 있어요;;;;)    네로네로   2016.11.30 14:33     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close