0

I want to make a search function where the results show up without a page refresh. I am new to Ajax and MVC frameworks so I haven't actually tried it before.I don't know where to go about starting this function, especially with Symfony so any help would be appreciated!

This is my search form with a default list of table data's:

<div class="searchsubform">
    <form action="{{ path('searchno') }}" method="get">
        <input type="text" name="no" placeholder="Search by #" id="searchno"/>
        <button type="submit" name="submit">Search</button>
    </form>
</div>
<div id="sublist">
    <table id="showsub" class="tablesorter">
        <thead>
            <th>No. &uarr;&darr;</th>
            <th>Weight &uarr;&darr;</th>
            <th>Color &uarr;&darr;</th>
            <th>Dimensions &uarr;&darr;</th>
            <th>Qty &uarr;&darr;</th>
        </thead>
        {% for entity in entities %}
            <tr class="datarow" data-id="{{ entity.subid }}">
                <td>{{ entity.no }}</td>
                <td>{{ entity.weight }}</td>
                <td>{{ entity.color }}</td>
                <td>{{ entity.dimensions }}</td>
                <td>{{ entity.qty }}</td>
            </tr>
        {% endfor %}
    </table>
</div>

My default index action that displays all the data in the db:

/**
 * @return Response
 * @Route("/", name="searchhome")
 * @Template()
 */
public function indexAction() {
    $em = $this->getDoctrine()->getRepository('Bundle:Sub');
    $entities = $em->searchSub();

    return array('entities' => $entities,);
}

This is the controller I have for the search:

/**
 * @Route("/search/", name="searchdano")
 * @Template("Bundle:Search:index.html.twig")
 */
public function searchSubByNoAction(Request $request) {
    $no = $request->get('no');
    $em = $this->getDoctrine()->getRepository('Bundle:Sub');
    $entities = $em->searchSubByNo($no);

    return $this->render("Bundle:Search:index.html.twig", array(
            'entities' => $entities,
        ));
}

So right now when a user submits a number to search, the page refreshes and displays the rows of results. I need it to just display results without page refresh. I want to target the result display right on the row <tr class="datarow... Where do I hook the ajax to?

Sam Young
  • 183
  • 3
  • 3
  • 17

2 Answers2

0

You hook into the form submit event and call your indexAction

$(".searchsubform form").on("submit", function(event) {
    // prevent page reload
    event.preventDefault();

    $.ajax({
        url: '{{ path('searchhome') }}',
        type: 'POST',
        success: function() {
            // perform dom update to show search results
        }
    });
});

Check out jQuerys .submit() http://api.jquery.com/submit/ as well as $.ajax http://api.jquery.com/jQuery.ajax/.

user1777136
  • 1,746
  • 14
  • 28
0

1) client side : Use jquery in order to send ajax request like in "jQuery Ajax POST example with PHP"

2) server side: searchSubByNoAction(Request $request) :

2.1 use @Route annotation on method with defaults={"_format" = "json"}

2.2 remove template annotation

2.3 method should return new Response(json_encode($entities));

3) client side: take response and dynamically populate rows in tbl with jquery

3.1) use firebug or inspect element tool in order to see what you are getting from the server as json

Community
  • 1
  • 1
trix
  • 1,110
  • 7
  • 9
  • Am I sending request to my indexAction or my searchSubByNoAction()? – Sam Young Jun 04 '14 at 20:07
  • you are sending request to the searchSubByNoAction method by ajax, waits for successful response on client and based on the data returned from the server (searchSubByNoAction method) repopulate table on client side – trix Jun 05 '14 at 07:51