2013-03-24 5 views
0

제출 후 양식 필드 값을 유지하기 위해 고급 검색 양식을 원했기 때문에 method = POST, ajax로 양식을 변경했습니다. 내 컨트롤러는 여전히 훌륭하게 작동하며 휴식을 취하고 데이터를 가져올 수 있습니다.AJAX에서 양식 제출을 통한 렌더링

문제는 아약스로 페이지를 다시 렌더링하는 방법을 모르겠다는 것입니다. 응답 로직이 advanced_search_order_table에 내장되어 있기 때문에 아약스가 응답과 관련이 없도록하고 싶지 않습니다. advanced_search_orders_table을 다시로드하기 위해서는 Ajax가 필요합니다.

<%= render "advanced_search_orders_form" %> 
<div id="advanced_search_orders_table" class="fk-table ajax"> 
    <%= render "advanced_search_orders_table" %> 
</div> 
advanced_search_orders_form.html.erb에서

(일부 조각 만)

form id="advancedSearchOrder" name="advancedSearchForm" value="advancedSearch" class=" search line" action="" onsubmit="return submitForm();"> 

<div class="advancedSearchFormField"> 
     <span class="advancedSearchFormlabel">Order Id</span> 
     <%= text_area_tag('filters[order_id]',filter_params['order_id'],:rows=>10) %> 
</div> 

<div class="advancedSearchFormSelectField"> 
    <span class="advancedSearchFormlabel"> Order Sales Channel </span> 

    <%= select_tag 'filters[order_sales_channel]', 
        options_for_select(
          [["Web", "Web"], ["Phone", "Phone"]] 
       ), 
        selected: filter_params['order_sales_channel'], 
        multiple: true, 
        class: "advancedSearchFormSelectBox" %> 
</div> 

<input type="submit" class="advanced-search-btn" id="advancedSearchButton" name="advancedSearchButton" value="Search"/> 

그리고 단순히 응답 자바 스크립트를 사용하여 구문 분석

function submitForm() { 
    $.ajax({type:'POST',url: '', data:$('#advancedSearchOrder').serialize(), success: function(response) { 
     /*Render advanced_search_orders_table here */ 
    }}); 

    return false; 
} 
+0

'advanced_search_orders_form'의 모양은 무엇입니까? 'form_for'를 사용하지 않기로 결정한 이유가 있습니까? –

+0

@SrikanthVenugopalan - 어떻게 도움이되는지 모르지만 레일즈 기능을 많이 사용했습니다 ... Mix & Match. –

답변

0

로 SubmitForm에 정의했습니다. 기본적으로 테이블에서 행을 제거한 다음 각 결과에 대해 행을 추가하십시오.

또 다른 옵션은 데이터가 들어있는 이미 렌더링 된 HTML 페이지로 해당 AJAX 호출에 응답하는 것입니다. 그러면 JavaScript를 사용하여 새 테이블로 바꾸기 만하면됩니다. 나는 더 잘 수행 할 것이라고 말할 수 없다.

관련 문제