Rails jQuery의 ajax화 방법 사용
기본적으로 알기 쉬운 삭제의 aax화를 예로 들어 aax화 방법을 소개한다.
글 삭제 aax화
아래에 보도된 쓰레기통 아이콘을 누르면 기사가 갑자기 사라진다.
우선, 쓰레기통 아이콘의 링크에remote:true를 추가합니다.rails는 이렇게 나에게 aax의 통신을 진행한다.
article.erb<%= link_to content_tag(:i, '', class: 'fa fa-trash'), article_path(article.id), method: :delete, data: { confirm: "本当に削除してもよろしいですか" }, class: "article_delete", remote: true %>
그러나 이렇게 하면 기사의 삭제만 실행되고 데이터베이스에서 사라지며 화면에서 업데이트되지 않으면 사라지지 않는다.여기서부터ajax의response를 받고 바로 기사를 사라집니다.
controllerrender :json
를 사용하여 데이터를 js 측에 보냅니다.
articles_controller.rb def destroy
writer = Article.find(params[:id])['user_id']
if @user.id != writer
redirect_to articles_path, :flash => {:alert => "削除権限がありません。"}
else
@article.destroy
render :json => {:article => @article}
end
end
aax의 데이터를 받아들여서 모든 글을 삭제합니다.
이번 기사는 #item _이 id 때문에fade Out을 합니다.
articles.js(function() {
$(function() {
$(document).on('ajax:complete', '.article_delete', function(event, ajax, status) {
var response;
response = $.parseJSON(ajax.responseText);
$('#item_'+response.article.id).fadeOut();
});
});
}).call(this);
이게 완성이야.쓰레기통 아이콘을 누르면 기사가 페이드 아웃될 거예요.
적용 가능
여기에서 삭제를 예로 들면, 같은 방법으로 각양각색의 일을 aax화할 수 있다.
예를 들어comment의create의ajax화는form에remote:true를 추가하고 컨트롤러에서 일부 템플릿을 이용하여 html를 받아들인 다음에ajax로 디스플레이를 받아들인다.
comments_controller.rb def create
@comments = @article.comments.create(comment_params)
html = render_to_string partial: 'articles/comment_show', locals: { comment: @comments }
render :json => {:html => html}
end
Reference
이 문제에 관하여(Rails jQuery의 ajax화 방법 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shizuma/items/755f8dea449204ba5d1d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<%= link_to content_tag(:i, '', class: 'fa fa-trash'), article_path(article.id), method: :delete, data: { confirm: "本当に削除してもよろしいですか" }, class: "article_delete", remote: true %>
def destroy
writer = Article.find(params[:id])['user_id']
if @user.id != writer
redirect_to articles_path, :flash => {:alert => "削除権限がありません。"}
else
@article.destroy
render :json => {:article => @article}
end
end
(function() {
$(function() {
$(document).on('ajax:complete', '.article_delete', function(event, ajax, status) {
var response;
response = $.parseJSON(ajax.responseText);
$('#item_'+response.article.id).fadeOut();
});
});
}).call(this);
def create
@comments = @article.comments.create(comment_params)
html = render_to_string partial: 'articles/comment_show', locals: { comment: @comments }
render :json => {:html => html}
end
Reference
이 문제에 관하여(Rails jQuery의 ajax화 방법 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shizuma/items/755f8dea449204ba5d1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)