Laravel Post + Ajax

Question

I'm having a issue with laravel, i have a SPA running and i need to do a form with search and filters by category.

I'm doing this via POST, but i need to run the query again with the filters, with ajax so the page don't reload.

But how can i do that? I need to run just that query and reload the div, the ajax part is okay, but i don't know how to run just that query without running every query to "populate" the content from the page.

Sorry if wasn't clear enough, my english is not to good.

Thanks in advice!

Controller:

public function index()
{
    $data['servicos']                   = DB::select('SELECT * FROM servicos WHERE ativo = 1 ORDER BY ORDEM ASC');
    $data['servicos_processo']          = DB::select('SELECT * FROM servicos_processo WHERE ativo = 1 ORDER BY ID ASC');
    $data['servicos_fun']               = DB::select('SELECT * FROM servicos_fun WHERE ativo = 1 ORDER BY ID ASC');
    $data['curriculum_historico']       = DB::select('SELECT * FROM curriculum_historico WHERE ativo = 1 ORDER BY ID DESC');
    $data['curriculum_educacao']        = DB::select('SELECT * FROM curriculum_educacao WHERE ativo = 1 ORDER BY ANO ASC');
    $data['curriculum_coding_skills']   = DB::select('SELECT * FROM curriculum_coding_skills WHERE ativo = 1 ORDER BY ID ASC');
    $data['curriculum_other_skills']    = DB::select('SELECT * FROM curriculum_other_skills WHERE ativo = 1 ORDER BY ID ASC');
    $data['curriculum_testimonials']    = DB::select('SELECT * FROM curriculum_testimonials WHERE ativo = 1 ORDER BY ID ASC');
    $data['certificados_last']          = DB::select('SELECT * FROM certificados WHERE ativo = 1 ORDER BY data_conclusao DESC LIMIT 9');
    return view('main', $data);
}

public function certificados()
{
    $nome = Request::input('filtro-certificados');
    $data['certificados_last']          = DB::select("SELECT * FROM certificados WHERE ativo = 1 AND nome LIKE '%{$nome}%' ORDER BY data_conclusao DESC LIMIT 9");
    return $data;
}

View:

 <div class="latest-posts media-grid masonry" data-layout="masonry" data-item-width="340">

                @foreach($certificados_last as $certificado)
                <article class="hentry media-cell">
                    <div class="media-box">
                        <img src="images/certificados/{{$certificado->id}}.svg" style="padding:60px" alt="post-image">
                        <div class="mask"></div>
                        <a href="certificado/{{$certificado->id}}"></a>
                    </div>

                    <header class="media-cell-desc">
                            <span title="2013" class="date">
                                <span class="day">{{$certificado->dia_conclusao}}</span>{{$certificado->mes_conclusao}}</span>
                        <h3>
                            <a href="certificado/{{$certificado->id}}">{{$certificado->nome}}</a>
                        </h3>
                    </header>

                </article>
                @endforeach

            </div>

Answer 1

Send the post request using axios, jQuery, or whatever client you choose. Include your search and filter parameters.

In Laravel, create the post route that points to a controller method. This method should just return the data directly- do not return a view.

For example:

public function ajaxSearch(Request $request)
{
    $data = User::where('name', $request->query);

    return $data;
}

Then, use your JavaScript to replace with or insert the new data.

• Check out Vue if you haven't already.

Note: Laravel auto-converts the response to jSON.

Use the done() method, like so when using jQuery:

$.post( '/myRouteHere', { name: 'John', time: '2pm' })
    .done(function() {

        // insert / update data

    }).fail(function() {

        alert( "error" );

    });