programing

오류 유효성 검사가 보존된 AJAX 양식(simple_form 사용)

muds 2023. 10. 8. 10:24
반응형

오류 유효성 검사가 보존된 AJAX 양식(simple_form 사용)

이것은 제가 질문했던 더 어려운 질문들 중 하나일지도 모르지만, 저는 며칠 동안 갇혀 있었고, 더 경험이 풍부한 레일스 커뮤니티의 지원을 받는 것이 최선이라고 생각했습니다.

나는 이 가이드를 대략적으로 따르는 더미 앱을 작업하고 있습니다.ajax/jquery 튜토리얼...

가이드는 나만의 맞춤 제작을 통해 "브랜드"(네스팅 모델 "모델", "서브모델", "스타일" 포함) 제출 양식(simple_form을 사용)과 브랜드 목록을 한 페이지에 작성할 수 있도록 도와주었습니다.이것은 완벽하게 작동하며, (내 모델에 대한) 검증이 시행됩니다.하지만 양식과 브랜드 목록을 같은 페이지에 올려놓으면 제출 실패 시에 나타났던 깔끔한 인라인 검증 오류가 사라집니다(아래 이미지 참조).인라인 오류를 해결할 수 없게 되자 렌더링에 대해 더 배워야 한다는 것을 깨닫게 되었습니다.그래서 이 질문에 대한 답을 찾는 데 골몰하고 있는 겁니다

enter image description here

...그리고 목록은 다음과 같습니다.

enter image description here

다음은 인덱스 작업에 대한 컨트롤러입니다.

  def index

    #This is for the product listing

    @brands = Brand.all.reverse 

    #This is for the form   

    @brand = Brand.new
    @model = Model.new
    @submodel = Submodel.new
    @style = Style.new

    respond_to do |format|
      format.html
    end
  end

위 양식은 중첩 제출 양식에 사용할 브랜드, 모델, 서브모델 및 스타일을 생성합니다...아래는 양식의 코드입니다.

<%= simple_form_for @brand, :html => { :class => 'form-horizontal' }, :remote => true do |m| %>

  <fieldset style = "margin-top:34px;">
    <legend></legend>
    <%= m.input :name, :label => 'Brand' %>         
    <%= m.simple_fields_for :models, @model do |p| %>    
      <%= p.input :name, :label => 'Model' %>
      <%= p.simple_fields_for :submodels, @submodel do |s| %>
        <%= s.input :name, :label => 'Submodel' %>
        <%= s.simple_fields_for :styles, @style do |ss| %>
          <%= ss.input :name, :label => 'Style' %>
        <% end %>
      <% end %>
    <% end %>

    <div class="form-actions">
      <%= m.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', brands_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>

이제 보시다시피 제가 사용하고 있습니다.:remote => true새 "를 오류가 양식에 새로운 "브랜드"를 생성하거나 인라인 유효성 검사 오류가 발생하여 양식을 다시 로드하고 싶습니다.현재 내 생성 작업은 다음과 같습니다.

def create
    @brand = Brand.new(params[:brand])

    respond_to do |format|
      if @brand.save
        format.html { redirect_to brands_url, notice: 'Brand was successfully created.' }
        format.json { render json: @brand, status: :created, location: @brand }
        format.js
      else
        format.html { render action: "index" }
        format.json { render json: @brand.errors, status: :unprocessable_entity }
        format.js { render 'reload' }
      end
    end
  end

if @brand.save효과가 있는 것 같습니다..하지만 '다른' 코드는 내가 원하는 대로 작동하지 않습니다.@brand가 저장하지 않을 때 무슨 일이 발생합니까?인덱스 작업 내의 코드가 실행되고 있다고 생각합니다. then @brand.er rs가 json(simple_form validation errors에 대한 것이라고 가정함)으로 변환된 다음 reload.js.erb가 실행되고 있습니다.

오류가 폼을 다시 로드하려고 할 때 () 를 .$("#entryform").load(location.href+" #entryform>*","");d.js.erb로...잘못된 데이터를 폼 reload.js.erb에 입력하면 데이터가 입력되고 인라인 유효성 검사 오류가 발생하는 대신 폼 필드가 공백으로 다시 로드됩니다.

도움을 받을 수 있는 충분한 정보를 여기에 제공했길 바랍니다.이 문제로 정말 고생하고 있습니다.감사합니다!

폼을 일부에 넣으시면 간소화하실 수 있을 것 같습니다(우리는 그것을 부를 것입니다).simple_form), 그리고 이 코드를 reload.js.erb에 넣습니다.

$("#entryform").html("<%= escape_javascript(render :partial => 'simple_form') %>");

저는 jQuery의 것을 잘 모릅니다.loadmethod, 하지만 두번째 요청이 있다고 생각합니다.렌더링 오류가 있는 키는 인스턴스 변수(@brand양식을 렌더링하는 동안 사용하는 양식은 작성할 때 저장하려고 했던 양식과 동일해야 하므로 양식의 오류를 확인할 수 있습니다.이것이 당신이 항상 사용하는 이유입니다.render대신에redirect_to오류를 렌더링하고 싶을 때.리디렉션을 수행하면 새 요청을 시작합니다.@brand다시 초기화됩니다.당신이 당신의$(...).load(...)같은 문제를 가지고 있습니다.

이번 건에 대한 모든 질의응답에 감사드립니다.절 구했어요.

@tsherif의 파일 구조를 한 단계 단순화하여 (이미 js 파일이 있다고 가정하고) 폼에 직접 렌더를 호출하여 javascript/coffee script를 통해 보여줌으로써 이 문제를 해결했습니다.

#immediate_controller
def action_with_modal
  @brand = params[:failed_brand] || Brand.new
end

#brands_controller
def create
  @brand = Brand.new(params[:brand]) 

  respond_to do |format|
    if @brand.save
      ...
    else
      params[:failed_brand] = @brand
      ...
      format.js { render 'simple_form' }
    end
  end
end

#coffeescript
$('form-selectors-here').on 'ajax:error', @reRegister

reRegister: (e, data) =>
  $("div-that-contains-form").html(data.responseText)

이 항목을 확인합니다. .html(...)을 호출하면 래퍼 div 양식이 복제됩니다.=] 대신 .replateWith(...)를 사용합니다.

언급URL : https://stackoverflow.com/questions/10051050/ajax-form-using-simple-form-with-preserved-error-validation

반응형