Use data from ajax to create an input in Laravel

Question

. Hello yall, I'm trying to use ajax to run a search and then have it return links to the search results' pages with a checkbox next to each result so that the user can select orders to print.

I figured out the link part but am not sure how to use each search result to make a checkbox.

I tried working with the "success:" part of the ajax in the JS but couldn't just broke it every time.

Ideally when the ajax is all said and done it will have a link_to("/{$search_table}/{$result->id}/", $result->street_address) link and then a checkbox with an id = "$search_table + '_' + $result" (so for example an id of "order_123TestStreet").

Any pointers or helpers would be greatly appreciated! Thank so much!

JS:

$(document).ready(function(){
    $("#search_form").submit(function(e) {
        e.preventDefault();
    //form_data
    var form_data = $('#search_form').serializeArray();

    $.ajax({
        url: 'search',
        type: "POST",
        dataType: "html",
        data: form_data,
        success: function(data){


            $("#search_results").html(data);
            $("#search_results").addClass('panel callout radius');
        },
        error: function(xhr, status, error){
            console.log(xhr);
            console.log(status);
            console.log(error);
        }
    });
});
});

Controller:

 public function search(){
        $validator = Validator::make(
            array(
                'search_table' => Input::get('search_table'),
                'search_column' => Input::get('search_column'),
                'search_input' => Input::get('search_input'),
                ),
            array(
                'search_table' => 'required',
                'search_column' => 'required',


        'search_input' => 'required',
            )
        );

    if($validator->fails()){
        exit;
    }   else   {
        /*Run Search Query*/

        $search_table       = Input::get('search_table');
        $search_column      = Input::get('search_column');
        $search_input       = Input::get('search_input');
        $search_results     = DB::table($search_table)->where($search_column, 'LIKE', "%{$search_input}%")->get();

        foreach($search_results as $result){
            $result_street_address = $result->street_address;
            echo link_to("/{$search_table}/{$result->id}/", $result->street_address) . "<br>" . "<br>";
        }
    }   
}

Answer 1

I think your problem is working with HTML instead of JSON, and also you should consider working with templates instead of implementing HTML code inside your PHP code. This is going to be a long answer, please bear with me.

First of all you should switch your JS code to a proper AJAX call.

<!-- index.blade.php -->

<form id="search_form">
    {{Form::text('search_table', Input::old('search'))}}<br />
    {{Form::text('search_column', Input::old('search'))}}<br />
    {{Form::text('search_input', Input::old('search'))}}<br />

    <button id="search_button" type="button" class="btn btn-default">
        Search
    </button>
</form>

<div id="search_results" style="display: none;">&nbsp;</div>

<script type="text/javascript" src="/bower_components/requirejs/require.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
<script type="text/javascript">
//  My testing system uses require, just use jQuery as you used to.
require(["jquery"], function($) {
    $("#search_button").click(function() {
        $.ajax({
            url: '/test',
            type: "post",
            dataType: "json",
            data: $('#search_form').serializeArray(),
            success: function(json) {
                // Just use json.data so we can add more details if we want to.
                if (json.data) {
                    /**
                     * Actually you don't have to addClass to your div, you can
                     * just show or hide it when you don't need it.
                     */
//                      $("#search_results").html(json.data).addClass('panel callout radius');
                    $("#search_results").html(json.data).show();
                }

                // Let's give feedback to user that they have gone off route ;)
                if (json.error) {
                    alert(json.error);
                }
            }
        }).always(function(xhr, status, error) {
            console.log(xhr);
            console.log(status);
            console.log(error);
        });
    });
});
</script>

I created a controller for you, you can change things to your needs.

<?php
// TestController.php
use Illuminate\Database\Eloquent\Collection;

class TestController extends Controller {

    public function getIndex() {
        $layout = View::make("test.index");

        return $layout->render();
    }

    public function postIndex() {
        /*
         * Sorry for shortening the code, you can just fix it as you go.
         */
        $f = Input::all();
        $rules = [
            'search_table' => 'required',
            'search_column' => 'required',
            'search_input' => 'required',
        ];

        $validator = Validator::make($f, $rules);
        if ($validator->fails()) {
            return \Response::json(['error' => 'You have to fill all the fields.']);
        } else {
            /*
             * We have a global array called $f now.
             */
            $term = str_replace(" ", "%", $f["search_input"]);
//          $search_results = DB::table($f["search_table"])->where($f["search_column"], 'LIKE', "%" . $term . "%")->get();

            /*
             * I created a result just for testing.
             */
            $search_results = new Collection();

            $results = [
                ['id' => 1, 'street_address' => 'Baker Street'],
                ['id' => 2, 'street_address' => 'Abbey Road'],
            ];
            foreach ($results as $result) {
                $newRow = new Collection();
                $newRow->id = $result["id"];
                $newRow->street_address = $result["street_address"];

                $search_results->add($newRow);
            }

            /*
             * Now comes the tricky part.
             */
            $layout = View::make("test.results");
            $layout->results = $search_results;

            return \Response::json(['data' => $layout->render()]);
        }
    }

}

Now we can create a layout for our search results. You can create a form inside this file, add checkboxes, form fields and etc, with some cookies and some Session using you can make the page remember what you have searched for and do more tricks.

<!-- results.blade.php -->
@foreach ($results as $result)
<a href="/some/url/{{$result->id}}">
    {{$result->street_address}}
</a>
<br />
@endforeach

in the routes.php file you should add;

Route::controller("test", "TestController");

These should do the trick for you I guess.

Best of luck!