Laravel Ajax Live Search

Werner S

Mitglied
Guten Tag,

ich habe mal wieder neben der Arbeit was Zeit gefunden mich etwas mehr mit Laravel und JS zu beschäftigen, komme aber derzeit nicht weiter.
Es geht sich um folgendes https://www.pakainfo.com/create-laravel-live-search-using-ajax/ unter Laravel 8 und JQuery V2

Ich habe dem Autor schon vor 20 Tagen geschrieben, bekomme aber keine Antwort und hoffe man kann mir hier wieder helfen

Vorstellung:
Ich rufe die http://127.0.0.1:8000/invoice/create auf, gebe in der Suche den Firmennamen ein, dieser leitet die Anfrage an name('search_instant_live'), sucht in der companies DB den company_name oder ID und gibt mir die Daten aus.

Route
PHP:
use App\Http\Controllers\InvoiceController;
Route::resource('invoice', InvoiceController::class);
Route::get('/search_instant_live', [App\Http\Controllers\InvoiceController::class, 'action'])->name('search_instant_live');

http://127.0.0.1:8000/search_instant_live funktioniert. An der Route kann es nicht liegen

InvoiceController
PHP:
<?php

namespace App\Http\Controllers;

use App\Models\Company;
use App\Models\Group;
use App\Models\Invoice;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class InvoiceController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        if (!Group::access_check(Auth::user()->user_perm_grp, 'add_invoice')) {
            return view('access');
            exit();
        }

        return view('invoice.create');
    }
    function action(Request $request)
    {
        if ($request->ajax()) {
            $output = '';
            $query = $request->get('query');
            if ($query != '') {
                $data = DB::table('companies')
                    ->where('company_name', 'like', '%' . $query . '%')
                    ->orWhere('street', 'like', '%' . $query . '%')
                    ->get();
            } else {
                $data = DB::table('companies')
                    ->orderBy('id', 'desc')
                    ->get();
            }
            $total_row = $data->count();
            if ($total_row > 0) {
                foreach ($data as $row) {
                    $output .= '' . $row->company_name . '' . $row->street . '';
                }
            } else {
                $output = 'No Data Found';
            }
            $data = ['table_data' => $output, 'total_data' => $total_row];
            echo json_encode($data);
        }
    }
}

invoice/create.blade.php
HTML:
<div class="form-group">
    <input type="text" name="search" id="search" class="form-control" placeholder="Search Member Data" />
</div>
<div class="table-responsive">
    <h3 align="center">
        Total Data :
        <span id="total_records"></span>
    </h3>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Address</th>
                <th>City</th>
                <th>Postal Code</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script>
    $(document).ready(function () {
        fetch_member_data()

        function fetch_member_data(query = "") {
            $.ajax({
                url: "{{ route('search_instant_live') }}",
                method: "GET",
                data: { query: query },
                dataType: "json",
                success: function (data) {
                    $("tbody").html(data.table_data)
                    $("#total_records").text(data.total_data)
                }
            })
        }

        $(document).on("keyup", "#search", function () {
            var query = $(this).val()
            fetch_member_data(query)
        })
    })
</script>

Auf mich macht es den Eindruck als sendet er erst gar keine Daten an den Controller.
Könnt Ihr mir was dazu sagen?
 
Was ist denn der Fehler? Taucht einfach nix auf?

Mach mal ein Semikolon nach fetch_member_data() in Zeile 24.

Kannst auch mal überprüfen, ob jQuery geladen ist. Kommen irgendwelche Fehler in der Entwicklerkonsole im Browser, wenn du die Seite öffnest? Eigentlich sollten allein schon wegen des Semikolons Fehler kommen.

Und was machst du mit $output? Debugging? Die Variable wird nur belegt, aber es passiert nichts damit.
 
Was ist denn der Fehler? Taucht einfach nix auf?

Mach mal ein Semikolon nach fetch_member_data() in Zeile 24.

Kannst auch mal überprüfen, ob jQuery geladen ist. Kommen irgendwelche Fehler in der Entwicklerkonsole im Browser, wenn du die Seite öffnest? Eigentlich sollten allein schon wegen des Semikolons Fehler kommen.

Und was machst du mit $output? Debugging? Die Variable wird nur belegt, aber es passiert nichts damit.

Oh, Semikolon ist wohl beim Einrücken hier verloren gegangen. Es ist vorhanden.
jQuery wird geladen und funktioniert auch da ich es für das Verwendete Bootstrap Template automatisch benötige.

Soweit ich das richtig verstanden habe, ist in $output das Ergebnis gespeichert wenn was gefunden wurde/nicht gefunden wurde und sollte über den Ajax Teil ausgegeben werden. In JS bin nicht nicht Fit.

Das einzige was er mir in der Console anzeigt bei $(document).ready(function () { ist ReferenceError: $ is not defined at create:249

Ich habe dazu schon gegogelt, keines der Lösungen funktionierte, weder umschreiben der Zeile non nonconflict etc.

Wenn ich den PHP die IF Abfrage entferne if ($request->ajax()) { und ein echo $data; unten einfüge und die definierte Route direkt abrufe "http://127.0.0.1:8000/search_instant_live" habe ich ein Ergebnis, der SQL Teil scheint also richtig zu sein.
 
Zuletzt bearbeitet:
Hast du darauf geachtet, dass jQuery im HTML Script vor deinem Script geladen wird? ReferenceError: $ is not defined bedeutet eigentlich immer, dass jQuery noch nicht geladen wurde.
 
Zurück
Oben Unten