リロードなしのsymfony serachフォーム

Question

私はsymnfonyを使用し、パラメータで検索エンティティのフォームを作成しますが、フォームを送信するときに私のページをリロードすると、フィールドを記入しフォームに記入するとどのように検索フォームが実現するのか分かりません。提出されたいくつかの言葉で、その結果

アクションで、この私のフォームでの更新ブロックの下にこの時点での書き込みのようなページは、アクションのパラメータを取得し、フォームと、このビューでのレンダリング待ってからアクションIに

<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でどのように実現しましたか？ここで

Answer 1

はjQueryを使ってAJAX経由でフォームを投稿する例を次に示します。

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

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

Answer 2

あなたが通常行うだろうと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を使用することをお勧めします。