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

조회수 3176회

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

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

팔로우 버튼 이미지

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

이미지

팔로우 최소 버튼도 역시

이미지

콘트롤러 쪽은

이미지

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

스크립트 태그도 없고,

이미지

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

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

  • (•́ ✖ •̀)
    알 수 없는 사용자

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.30 14:33

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)