jQuery가 아닌 Prototype을 사용한 Rails 3의 Ajax 콜백

Question

Rails 2에서 3으로 응용 프로그램을 업그레이드 할 예정이며 조심성있는 자바 스크립트를 사용하기 위해 모든 원격 함수를 다시 작성하고 있습니다. 내가 고심하는 곳은 UJS에서 아약스 콜백을 처리하는 것입니다.

jQuery로 이러한 콜백을 구현하는 방법을 보여준 많은 리소스가 있지만 프로토 타입에는 그리 많지 않습니다. 아마 당신은 내가 이것을 알아낼 수 있도록 도울 수 있습니다. 나는이 있고, 레일 3에서

<% remote_form_for @foo, {:loading => "loading_function()", :complete => "complete_function()" } do |f| %> 
... 
<% end %> 

: 레일 2에서

, 나는이 있었다

나는 (잘못 될 수있는) 지금까지 알아 냈어요 어떤에서

<%= form_for @foo, :remote => true do |f| %> 
.... 
<% end %> 

, Rails.js의 handleRemote 함수에 의해 해고 될 수 있도록 폼에 이전의로드/완료 함수를 연결해야합니다. 나는 그것에 대해 어떻게해야할지 모르겠습니다.

다시 말해서 Prototype에서이 작업을 수행하고 있습니다. 따라서 해당 프레임 워크에 대한 해답은 높이 평가됩니다.

Answer 1

대답은 다음과 같다 :

유사한 문제를 가진 사람들을 위해

<%= form_for @foo, :remote => true do |f| %> 
... 
<% end %> 
... 
<script type='text/javascript'> 
    $('edit_foo').observe('ajax:before', loading_function()); 
    $('edit_foo').observe('ajax:complete complete_function()); 
</script> 

Answer 2

시도해보십시오. link 예, JQuery입니다.하지만 JQuery와 Prototype은 상황이 어떻게 작동하는지에 차이가 없습니다. 다음은 인덱스 페이지에서 직접 새 작업을 추가하는 코드는 - 그리고 그것은 프로토 타입 사용

views/tasks/_newform.html.erb: 
<%= form_for(@task, :remote => true) do |f| %> 
    <div> 
    <%= f.label 'Add a new task: ' %> 
    <%= f.text_field :name %> 
    </div> 
    <div> 
    <%= f.submit %> 
    </div> 
<% end %> 

views/tasks/index.html.erb: 
<div id='newform'> 
    <%= render :partial => "newform", :locals => { :@task => Task.new } %> 
</div> 

views/tasks/create.js.rjs: 
page.insert_html :after, 'tablehead', :partial => @task 
page.replace_html 'newform',:partial => "newform", :locals => { :@task => Task.new } 

편집 : 당신이 작업 컨트롤러의 우리의 작성 방법 "format.js"를 추가 할 필요가

Answer 3

, 또한 레일 인 2.3.x 소스 코드에서 the source code for the remote helpers보고하는 데 도움이 될 수 있습니다. 같이 매개 변수 : '갱신': 내 경우

, 나는 수행 할 작업을 파악하고 싶어

remote_form_for(@obj, :update => "new_obj", :before => "some js code") do |f| 

나는 remote_function code의 업데이트 기능을 발견했다. 이 레일 3 UJS 도우미와 :update에 해당하는 얻을 불가능처럼 내 특정 문제에 대한

---

, 그것은 보인다. 레일즈 3의 rails.js은 Ajax.Request(...)을 사용하여 :remote => true 요청을 랩하는 반면 레일 2의 :update 기능은 Ajax.Updater(...)을 사용하여 Ajax 요청을 래핑합니다. 당신은 Ajax 요청의 응답에 액세스 할 수 있도록 다음과 같은 코드로, JQuery와 레일에

• 스위치 : 찾는 사람들이 레일 2에서 :update 기능을 대체하기 위해, 나는이 옵션을 볼 수

  $("#elem").bind("ajax:complete", function(et, e){ 
      $("#results").html(e.responseText); 
  }); 
  

• 프로토 타입 기반 코드를 작성하여 양식을 가져와 Ajax.Request 대신 Ajax.Updater(...)을 사용하여 아약스를 통해 제출하십시오. :remote => true은 Ajax.Request을 사용하려고하므로 사용하지 마십시오.

사이드 노트 : 나는 ajax:complete 이벤트입니다 request 객체가 어디 응답을 포함하는 표시되지 않습니다

$('new_obj').observe('ajax:complete', function(request){ 
    console.info(request); 
}); 

에서 제공하는 콜백 객체와 주변했다. 그것은 꽤 거대합니다. 그러나 나는 잘못 될 수 있습니다. 그러나 이것은 다른 누군가가 레일즈 2에서 3으로 업그레이드하는 것을 도울 것입니다.

Answer 4

update 옵션과 함께 remote_form_for를 사용하는 경우 Ajax.Request 호출에서 응답을 얻는 방법이 있습니다. 따라서 Ajax.Updater를 대안으로 사용하기 위해이를 변경할 필요는 없습니다. 기본적으로 respone.memo.responseText를 사용하면 다음과 같이됩니다.

$('new_obj').observe('ajax:complete', function(response){ 
    console.info(response.memo.responseText); 
    // Probably you would use it like this: 
    $('new_obj').update(response.memo.responseText); 
});