레일 4는 ajax, jquery, :remote => true로 부분을 렌더링하고 _에 응답합니다.

레일 4는 ajax, jquery, :remote => true로 부분을 렌더링하고 _에 응답합니다.

제출된 양식에 따라 AJAX와 함께 페이지를 동적으로 렌더링하는 것이 일반적인 것 같습니다.다른 유사한 질문 중 일반적인 방법으로 이를 수행하는 방법에 초점을 맞춘 것은 없습니다.

이 주제에 대해 찾을 수 있는 최고의 블로그 게시물은 여기 http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails 입니다.

질문:양식을 제출하거나 링크를 클릭할 때 AJAX를 통해 로드할 부분 보기를 트리거할 수 있도록 레일 응용 프로그램을 코드화하려면 어떻게 해야 합니까?

트리거링 요소의 :remote => true 플래그, 컨트롤러 클래스 정의의 response_to :js 플래그, 경로, 부분 보기, 마지막으로 동적 부분을 실제로 렌더링하기 위한 jquery 등 몇 가지 사항이 있어야 작동할 수 있습니다.

아래의 예는 "someajax" 컨트롤러의 가상 "render_partial_form" 메서드에 대한 것입니다.

1) 트리거링 요소에 :remote => true 플래그 추가
.remote => true flag를 AJAX 호출을 트리거할 요소에 대해 .vmx.erb 파일(view)에 있는 링크 또는 폼 태그에 다음과 같이 입력합니다.

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

:remote => true이면 레일이 보기를 자동으로 전환하지 않으므로 JQuery를 대신 실행할 수 있습니다.이 태그는 form_tag, link_tag 또는 다른 유형의 태그와 함께 사용할 수 있습니다.

2) 컨트롤러 상단에 "response_to :html, :js" 추가

이제 컨트롤러의 클래스 정의 상단에 다음과 같이 컨트롤러가 html뿐만 아니라 javascript에도 응답할 수 있도록 지정해야 합니다.

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

이 예에서는 컨트롤러에서 뷰로 전달되는 변수가 있습니다. 다음과 같은 선택 목록 옵션 배열입니다.@array_from_controller.

3) http 동사를 컨트롤러 메소드로 라우팅

AJAX 호출을 트리거하기 위해 POSTed 폼을 원했기 때문에 컨트롤러에 대한 포스트 동사를 render_partial_form 뷰로 라우팅했습니다.

post 'someajax' => 'someajax#render_partial_form

다음과 같이 정의된 컨트롤러 메소드def render_partial_form보기 이름과 일치합니다._render_partial_form.html.erb따라서 컨트롤러에서 렌더링 작업을 호출할 필요가 없습니다.

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"을 컨트롤러 메서드 및 부분 보기의 실제 이름으로 바꿉니다.슬라이드 다운 효과는 옵션인 "눈사탕"입니다.확장명을인 .js.erb 파일을 .

render_partial_form.js.erb

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

컨트롤러 작업을 생성하려면 "create.js.erb"와 같은 JS 뷰(확장자가 "js.erb"인 경우)를 사용해야 합니다.그다음에 추가합니다.format.jsrespond_to do |format| ... endblock. 그리고 remote: true 파라미터를 폼에 추가합니다.참고: js.erb에는 다음과 같이 포함되어야 하는 자바스크립트 코드가 포함되어야 합니다.

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

(Rails 2에서 3으로 앱을 업그레이드할 때 이 문제에 걸려 넘어졌기 때문에) 이전 Rails 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);
)};

가 했던 . 은 결코 γ를 이었습니다. 당신은 내가 했던 것과 같은 문제에 부딪힐지도 모릅니다. 그것은 결코 불을 지피지 않는다는 것이었습니다.ajax:success에 JS나 입니다. :event!의 속성을 이 될 입니다. 문제는 응답에 JS나 텍스트를 기대하고 있지만 HTML을 얻는다는 것입니다. 수정하는 방법은 양식 태그의 속성을 사용하여 응답이 HTML이 될 것임을 알려주는 것입니다.

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

식은 죽 먹기!

언급URL : https://stackoverflow.com/questions/26808696/rails-4-rendering-a-partial-with-ajax-jquery-remote-true-and-respond-to