2017-02-13 80 views
2

我使用symnfony並通過參數形式爲搜索實體,但是當提交表單我的頁面重新加載時,我不知道如何實現搜索表單填寫字段和表單下我有結果沒有重新加載頁面,就像在申請一些字在這個時間下的更新區塊與結果Symfony serach表單沒有重新加載頁面

這是我的形式用行動寫,動作等得到的參數,並在此視圖與形式呈現,並在行動中我得到

<div class="filters" id="filter_form"> 
    <form action="{{ path('outbound_invoices') }}" method="get"> 
     <div class="choice-group" role="group" data-toggle="buttons"> 
      <label class="btn active"> 
       <input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }} 
      </label> 
      <label class="btn"> 
       <input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }} 
      </label> 
      <label class="btn"> 
       <input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }} 
      </label> 
     </div> 

     <div class="choice-group" role="group" data-toggle="buttons"> 
      <label class="btn active"> 
       <input type="radio" name="type" value="all" checked="checked">all 
      </label> 
      <label class="btn"> 
       <input type="radio" name="type" value="contract">contract 
      </label> 
      <label class="btn"> 
       <input type="radio" name="type" value="other">other 
      </label> 
     </div> 

     <input name="search" id="filter-employees" placeholder="{{ 'search'|trans }}" class="form-control"> 
     <p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p> 
     <p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 
// block result 
<table class="table"> 
    <thead> 
    <tr> 
     <th> 
      {% trans %}invoice_number_short{% endtrans %} 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
     {# @var outboundInvoice \AppBundle\Entity\OutboundInvoice#} 
     {% for outboundInvoice in outboundInvoices %} 
     <tr class="clickable" data-href="{{ path('outbound_invoices_show', {'id': outboundInvoice.id}) }}"> 
      <td> 
       {{ outboundInvoice.invoiceNumber }} 
      </td> 
      {% endfor %} 
     </tr> 
    </tbody> 
</table> 

只需創建用於查找實體並在模板中呈現的查詢生成器即可。如何實現ajax而無需實時重新加載和搜索?

+1

您應該閱讀Ajax。 –

+0

我知道,但我沒有與js和ajax的經驗,我明白行動返回json和如何使用這個json我不知道,也許一些例子會幫助我 –

+0

只是谷歌「開始使用ajax」,你會發現一堆教程。特別是因爲你已經似乎使用jQuery。 SO不是那些地方的正確位置。 –

回答

0

下面是一個例子通過AJAX使用jQuery來發表您的形式:

var form = $('#my-form'); 

$.post(
    form.prop('action'), //action url 
    form.serializeArray(), //serialized form data 
    function(result){  //callback 
     console.log(result); 
    } 
); 
0

使用AJAX,就像您平常做的事:

//add jquery here 
$('#filter-employees').click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     action:"/invoices" 
     //... 
    }).done(function(resp)); 
}); 

然後在控制器動作,您需要驗證請求是否是XMLHttpRequest請求,並相應地創建功能。

/** 
* @Route("/invoices", name="outbound_invoices") 
*/ 
public function processAction(Request $request) 
{ 
    if ($request->isXmlHttpRequest()) { 
     //do work 
    } 

    return $this->redirectToRoute('whatever'); 
} 

OBS:我建議你使用Angular來處理這類事情。