Ajax, 레일 3으로 구성 - 모범 사례?

Ajax, 레일 3으로 구성 - 모범 사례?

Ajax 양식의 레일즈 방식으로 간주되는 것

오늘까지는 Rails forms + jQuery UJS를 사용하는 것이 올바른 방법이라고 생각했지만, jQuery 1.7로 업그레이드하는 것은 지금까지와 같은 방식으로 실패했습니다.

어떻게 하는 거지?

나는 내 양식과 함께 Ajax를 사용하고 싶습니다.Ajax 응답은 양식을 다시 렌더링하거나(예: 오류 발생 시) 성공 페이지로 리디렉션해야 합니다.(모델을 보여주는 것과 같이 더 많은 기능을 제공해야 하지만 이 예를 단순하게 유지하고 싶습니다.)

EJS 및 $('#formid').html(...) 사용

그것이 제가 지금까지 한 일입니다.나의 아약스 응답은 양식을 다시 렌더링하기 위해 (오류가 있는) 자바스크립트 코드를 반환하거나 사용자를 성공 페이지로 리디렉션한 오류인지 여부에 따라 ejs 템플릿이었습니다.

<% unless @success_submit %>
$('#form_wrapper').html('<%= escape_javacsript( render :partial => 'form' ) %>'); 
<% else %>
document.location = '/success_thank_you';
<% endif %>

이제 폼에 div와 같은 오류 메시지가 포함되어 있다고 상상해 보십시오.

<div class="error_message">BlaBla</div>

좋은 효과를 추가하기 위해 일반적인 jQuery.live 이벤트가 ajax complete에 바인딩되어 오류가 강조되었습니다.

$('form').live('ajax:complete', function() {
   // do stuff like highlighting all error messages in that form
}); 

그것은 더 이상 jQuery1.7 + jquery-ujs에서 작동하지 않습니다(아마도 좋은 이유일 것입니다).그래서 저는 제가 한 방법이 옳지 않았다고 생각합니다.

위의 방법을 사용하지만 반복합니다.

아약스를 바인딩하는 대신: 완전한 이벤트 나는 EJS에서 다음과 같은 "오류 강조 항목"을 수행할 수 있습니다.

$('#form_wrapper').html('<%= escape_javascript( render :partial => 'form' ) %>');
$('#form_wrapper form .error_message').fadeIn();

그러나 이는 양식을 렌더링하는 거의 모든 EJS에서 두 번째 줄을 반복해야 한다는 것을 의미합니다.그리고 물론 저는 그것을 건조하게 유지하고 싶습니다.

Ajax 응답이 순수 html, ajax: 전체 이벤트 핸들 표시를 렌더링합니다.

완전히 다른 해결책은 아약스 응답이 순수한 html을 렌더링하고 내 사용자 정의 아약스:complete 핸들러가 양식 표시를 처리한다는 것입니다.핸들러는 다음과 같이 보입니다.

$('form').live('ajax:success', function(ev, data, status, xhr) {
  $(this).html(data);
  // and e.g. highlight stuff
  $(this).children('.error_message').fadeIn();
});

그것은 통할 것이다.그러나 이제 서버가 양식을 다시 렌더링하지 않고(예: 성공적인 등록 후) 다른 URL로 리디렉션하거나 모달 양식을 표시하려면 어떻게 해야 합니까?서버는 다음과 같은 방법으로 응답할 수 있습니다.

<script>
   document.location = '/success.blabla/';
</script>

하지만 그게 좋은 해결책일까요?

사용자 지정 JSON 프로토콜

아마도 좋은 해결책은 버전 3을 사용하는 것이겠지만, 단순히 현재 양식을 반환된 html로 대체하는 대신 우리는 몇 가지 사용자 정의 json 프로토콜을 만들 수 있습니다.그런 식으로 우리는 심지어 서버가 다음과 같은 것으로 응답하도록 할 수 있습니다.

1. 첫 번째 show modal(예: 'Signup Success')
2. 로그인 페이지로 리디렉션

ajax:success 핸들러는 응답이 순수 html인지 확인할 수 있으며, 이 경우 현재 양식을 html 코드로 대체합니다.그러나 응답이 JSON 어레이인 경우 서버가 다음과 같이 응답합니다.

{ html: '<%= render :partial => 'something' %>', 
  show_modal:  '<%= render :partial => 'modal_template' %>',
  redirect_after_modal: '/login_page'
}

agax:성공 핸들러는 다음과 같이 처리했을 것입니다.

$('form').live('ajax:success', function(ev, data, status, xhr) {
   // try parsing json
   if (data.json['show_modal') { // show modal code.... }; 
   if (data.json['redirect']) { document.location=data.json['redirect']);...
});

어떻게 이런 일을 하는 거지?

분명히 아약스 양식을 처리하는 방법은 여러 가지가 있습니다.하지만 Rails를 사용하는 가장 좋은 방법은 무엇입니까?

그래서 저는 당신의 문제를 jquery로만 요약할 수 있었습니다. 물론 jquery 1.6.4에서는 작동하지만 jquery 1.7에서는 작동하지 않습니다.

DOM에서 요소를 교체한 다음 원래 요소에서 생성된 jquery 개체에서 이벤트를 트리거하는 경우 1.6.4는 요소 원래 위치에서 이벤트를 트리거하고 DOM으로 전파되도록 허용하지만 1.7은 요소를 트리거하지 않습니다(더 의미가 있습니다).

방금 jquery 1.7 변경 로그를 검색했는데, 여기 이 동작을 수정한 두 개의 티켓이 있습니다: 9951과 10489.

이와 같은 작업을 수행하는 데 가장 좋은 방법이 무엇인지에 대한 질문에 답하려면 이벤트가 발생하는 순서를 제어하십시오. jQuery는 Ajax 응답으로 반환된 JS를 자동으로 실행합니다. 이는 사용자가 이러한 상황을 제어할 수 없음을 의미합니다.

자체를 하여 코드수는가방를은로법운다정 로▁form▁the▁html▁▁inququ▁itself▁j의 반환된 입니다.ajax:complete또는ajax:success/ajax:error대로 일이 할 수 .이렇게 하면 원하는 순서대로 일이 진행될 수 있습니다.

이를 수행하는 정확한 방법을 보려면 [내 기사]를 읽어 보십시오.

• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
• http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/
• http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-in-rails3/

또는 이러한 링크 등은 jquery-ujs Wiki를 참조하십시오.

더 이상 필요한지는 모르겠지만, AJAX를 통해 양식을 구현하기 위해 수행한 작업은 다음과 같습니다.

우리가 다음과 같은 행동을 한다고 가정합니다.

def new
  @saved_search = SavedSearch.new
new

def create
  if @saved_search.save
    respond_to do |format|
      format.js { render :saved }
    end
  else
    respond_to do |format|
      format.js { render :new }
    end
  end
end

그리고 우리는 다음과 같은 형태를 가지고 있습니다.

# app/views/saved_searches/new.html.erb
<%= form_for @saved_search,  url: saved_searches_path(format: :js), remote: true do |f| %>
  <div class="form">
    <div class="content">
      <div class="field">
        <%= f.label(:name, t(".name_search"), class: "label") %>
        <%= f.text_field(:name, size: "25", autofocus: "autofocus") %>
      </div>

      <div class="clear"></div>
    </div>

    <footer class="clear">
      <div class="left">
        <%= f.button t(".save"), class: "button" %>
      </div>
      <div class="clear"></div>
    </footer>
  </div>
<% end %>

또한 일부 필드가 잘못된 경우 오류를 반환해야 합니다.그래서 여기에 속임수가 있습니다.

# app/views/saved_searches/new.js.erb
<%- @saved_search.errors.keys.each do |field| %>
  $('#saved_search_<%= field %>').after("<span class=\"errors\">&nbsp;<%=   @saved_search.errors[field].join(',')  %></span>")
  $('#saved_search_<%= field %>').wrap('<div class="field_with_errors" />');;
<% end %>

그러면 JQuery 바인딩이나 콜백이 중단되지 않지만 오류가 발생합니다.

나는 지금 HTML 양식을 렌더링하고 양식 필드에 대한 JQuery 지시어 묶음을 반환할 수 있는 양식 작성기를 작성하는 것이 좋은 생각일 수 있다고 생각합니다.

Rails.configuration.action_view.field_error_proc

고려하여

언급URL : https://stackoverflow.com/questions/8184512/ajax-forms-with-rails-3-best-practice