[RUBY-ON-RAILS] 원격 => 진실과 respond_to : 4 AJAX JQuery와 함께 부분적 렌더링 레일

원격 => 진실과 respond_to : 4 AJAX JQuery와 함께 부분적 렌더링 레일

그것은 제출 된 형태가 일반적이다에 응답 AJAX와 동적 페이지를 렌더링처럼 보인다. 다른 유사한 질문 것도 일반적인 방법으로이 작업을 수행하는 방법을 주위에 집중되지 않습니다.

나는이 주제에 찾을 수있는 가장 좋은 블로그 게시물이 여기에 있었다 : http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

질문 : 어떻게 내가 양식을 제출하거나 링크를 클릭 할 때 내가 AJAX를 통해 부하에 대한 부분보기를 실행할 수 있도록 내 레일 응용 프로그램을 코딩 할 수 있습니까?

해결법

1. ==============================

   1.여러 가지가 포함이 작업을 수행하려면 있어야합니다 : 트리거 요소에 원격 => 사실 플래그는 respond_to : JS 플래그 컨트롤러의 클래스 정의에서, 경로, 부분보기, 그리고 마지막으로 JQuery와 실제로 동적 렌더링하기 부분은 별도의 .html.js 파일에 포함되어 있어야합니다. 다음 예는 "someajax"제어기의 가상 "render_partial_form"위한 방법.

   여러 가지가 포함이 작업을 수행하려면 있어야합니다 : 트리거 요소에 원격 => 사실 플래그는 respond_to : JS 플래그 컨트롤러의 클래스 정의에서, 경로, 부분보기, 그리고 마지막으로 JQuery와 실제로 동적 렌더링하기 부분은 별도의 .html.js 파일에 포함되어 있어야합니다. 다음 예는 "someajax"제어기의 가상 "render_partial_form"위한 방법.

   1) 추가 원격 => 진정한 플래그를 트리거 소자 같은, 당신이 AJAX 호출을 트리거하려는 요소에 대한 .html.erb 파일 (보기)에 링크 또는 양식 태그에 원격 => 진정한 플래그 다음을 넣어

   <%= form_tag("/someajax", method: 'post', :remote => true) do %>
   

   함께 원격 => 진정한 레일 자동 대신 실행될 JQuery와 허용 뷰를 전환 할 것이다. 이것은 때 form_tag하는 link_tag, 또는 다른 유형의 태그와 함께 사용할 수 있습니다.

   컨트롤러의 상단에있는 "JS : HTML, respond_to를"2) 추가 컨트롤러의 클래스 정의의 상단에, 당신은 지금 컨트롤러뿐만 아니라 HTML로 자바 스크립트에 응답 할 수 있음을 지정해야합니다 :

   class SomeajaxController < ApplicationController
      respond_to :html, :js
   
      ...
   
      def render_partial_form
         @array_from_controller = Array.new
   
         ...
   
      end
   end
   

   @array_from_controller라는 선택리스트 옵션의 배열이 예에서, 뷰에 컨트롤러로부터 전달 된 변수의 존재가있다.

   3) 경로는 HTTP 동사 컨트롤러의 방법 내가 AJAX 호출을 트리거 게시 된 양식을 원하기 때문에, 나는 render_partial_form보기에 내 컨트롤러에 대한 포스트 동사를 전달.

   post 'someajax' => 'someajax#render_partial_form
   

   뷰의 이름 데프 render_partial_form 일치에 의해 정의 된 제어 방법, _render_partial_form.html.erb A는 컨트롤러에서 작업을 렌더링 호출 할 필요가 없기 때문에.

   4) 상기 부분보기 만들기 부분보기는 컨트롤러 메소드와 같은 이름을 가지고 밑줄로 시작해야합니다 _render_partial_form.html.erb를

   <h3>Here is the partial form</h3>
   
   <%= form_tag("/next_step", method: 'post') do %>
       <%= label_tag(:data, "Some options: ") %>
       <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
       <%= submit_tag('Next') %>
   <% end %>
   

   5) JQuery와 파일을 만듭니다

   JQuery와 문 양식의 렌더링을 트리거합니다. 컨트롤러 방법과 부분보기의 실제 이름으로 "render_partial_form"를 교체합니다. slideDown 효과는 선택 사항 "눈 사탕"입니다. .js.erb 확장하고 컨트롤러와 동일한 이름의 파일을 생성합니다 : render_partial_form.js.erb

   $('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
   $('#render_partial_form').slideDown(350);
   

2. ==============================

   2.당신은 컨트롤러 액션을 생성하기위한 "create.js.erb"같은 것을 ( "js.erb"확장자가) JS 뷰를 사용합니다. 그런 다음, 할 respond_to받는 format.js을 추가 | 형식 | ... 엔드 블록. 그리고 원격 추가 : true 매개 변수를 폼에. 주의 사항 : js.erb 당신이 같이 포함 할 필요가 자바 스크립트 코드를 포함해야합니다 :

   당신은 컨트롤러 액션을 생성하기위한 "create.js.erb"같은 것을 ( "js.erb"확장자가) JS 뷰를 사용합니다. 그런 다음, 할 respond_to받는 format.js을 추가 | 형식 | ... 엔드 블록. 그리고 원격 추가 : true 매개 변수를 폼에. 주의 사항 : js.erb 당신이 같이 포함 할 필요가 자바 스크립트 코드를 포함해야합니다 :

   $("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")
   

3. ==============================

   3.그것의 가치 (나는 3 레일 2에서 앱 업그레이드이에 일인가 때문에) 무엇을 : 당신은 또한이 프로토 타입 라이브러리를 수행하는 데 사용 된 레일처럼, 반환 된 HTML을 추가 이벤트 처리기를 추가하여 그것을 할 수 있습니다.

   그것의 가치 (나는 3 레일 2에서 앱 업그레이드이에 일인가 때문에) 무엇을 : 당신은 또한이 프로토 타입 라이브러리를 수행하는 데 사용 된 레일처럼, 반환 된 HTML을 추가 이벤트 처리기를 추가하여 그것을 할 수 있습니다.

   예를 들어, 당신이 걸릴하려는 경우 (문장의 실행 준비) :

   form_remote_tag url: {...}, update: ...
   

   응답은 HTML로오고 자동으로 추가되고,이으로 대체 장소 :

   form_tag {...}, remote: true
   

   다음과 같이 특정 요소에 내용을 추가, 단순히 같은 일을 당신의 application.js 파일에 이벤트 핸들러를 추가하여 :

   $("#myform").on('ajax:success', function(e, data, status, xhr) {
     $("#container").append(data);
   )};
   

   성공 이벤트 : 그때 ... 당신은 아약스를 발생 결코이었다 내가 한 동일한 문제로 실행할 수 있습니다! 문제는 응답에 JS 또는 텍스트를 기대,하지만이 HTML을 얻고 있다는 점이다. 응답이 HTML 양식 태그의 속성을 사용하고있을 것입니다 그것을 알리는 것입니다 해결하는 방법 :

   form_tag {...}, remote: true, data: {type: :html}
   

   케이크의 조각!

from https://stackoverflow.com/questions/26808696/rails-4-rendering-a-partial-with-ajax-jquery-remote-true-and-respond-to by cc-by-sa and MIT license