javascript - ajax get data request url not found but already exist, Laravel 8

Question

hello guys i have a problem with my ajax data json, i have a project about scan a barcode with a webcam but it just views the code of the barcode, the data in the database not call in my ajax, this is the code of blade, i'm using a modal this is the modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scanModalLabel">Scan Barcode</h5>
                <button type="button" class="close close-btn" data-dismiss="myModal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <dl class="row">
                <dt class="col-sm-4"><h4>Kode Barang</h4></dt>
                <dd class="col-sm-8" id="kode_barang"></dd>
            </dl> <hr>
                    <table class="table align-items-center tabel-detail" >
                        <thead class="thead-light">
                          <tr>
                            <th>Nama Barang</th>
                            <th>Harga Jual</th>
                            <th>Stok</th>
                            <th>Insert</th>
                          </tr>
                        </thead>
                        <tbody class="list">
                        </tbody>
                      </table>
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>

this is the jquery code

var args = {
        autoBrightnessValue: 100,
        resultFunction: function(res) {
            [].forEach.call(scannerLaser, function(el) {
                $(el).fadeOut(300, function() {
                    $(el).fadeIn(300);
                });
            });
            scannedImg.attr("src", res.imgData);
            scannedQR.text(res.format + ": " + res.code);
            console.log(res.code);
            document.getElementsByName('qrcode')[0].value = res.code;
            var kode= res.code;
            $('#kode_barang').text(': '+kode);
            $.ajax({
                url:"{{ route('daftar_produk.scan') }}",
                method:'GET',
                data:{kode:kode},
                dataType:'json',
                success:function(data)
                  {
                    $('.list').html(data.table_data)
                  }
              });
            $('#myModal').modal('show');
        },

this is the controller

public function cekScan(Request $req)
    {
        $id = $req->get('kode');
        $output='';
        $produk = Produk::findOrFail($id)
        ->where('kode_barang', '=', $id)
        ->select('produks.*')
        ->first();

        $no = 0;
        $data = array();
        foreach ($produk as $list) {
            $no ++;
            $output .= '<tr><td>'.$no.'</td><td>'.$list->nama_barang.'</td><td>'."Rp.".format_uang($list->harga_jual).'</td><td>'.$list->stok.'</td><td><a type="button" data-stok=(('.$list->stok.')) data-id=(('.$list->id.')) data-nama=(('.$list->nama_barang.')) data-kode=(('.$list->kode_barang.')) data-harga=(('.$list->harga_jual.')) class="btn btn-primary btn-pilih" role="button">Insert</a></td></tr>';
        }
        $data = array(
            'table_data' =>  $output
        );
        return json_encode($data);
    }

this is the route

 Route::get('transaksi/scan', 'AppHttpControllersProdukController@cekScan')->name('daftar_produk.scan');

what should i do the error said "jquery.min.js:2 GET http://localhost:8080/rezkastore1/%7B%7B%20route('daftar_produk.scan')%20%7D%7D?kode=2135758676 404 (Not Found)"

question from:https://stackoverflow.com/questions/65914045/ajax-get-data-request-url-not-found-but-already-exist-laravel-8

Answer 1

I have no idea wether you write your Javascript section, in Laravel Blade View or in separate JS file. If you write it within Laravel Blade Template, you may use

    $.ajax({
        url:"{{ route('daftar_produk.scan') }}",

but I recommend you to write complete URL within your AJAX call. Make your AJAX call like this :

$.ajax({
    url:"/transaksi/scan",
    method:'GET',
    data:{kode:kode},
    dataType:'json',
    success:function(data) {
        $('.list').html(data.table_data)
    }
});

Instead of using findOrFail(), you can use find() or regular where() with error handler, because findOrFail() will returns 404 not found if it can't find any records, here is the cekScan function

public function cekScan(Request $req)
{
    $id = $req->get('kode');
    $output='';
    $produk = Produk::where('kode_barang', '=', $id)->first();

    if (!$produk) {
        return json_encode(['table_data' => 'Barang Tidak Ditemukan']);
    }

    $no = 0;
    $data = array();
    foreach ($produk as $list) {
        $no ++;
        $output .= '<tr><td>'.$no.'</td><td>'.$list->nama_barang.'</td><td>'."Rp.".format_uang($list->harga_jual).'</td><td>'.$list->stok.'</td><td><a type="button" data-stok=(('.$list->stok.')) data-id=(('.$list->id.')) data-nama=(('.$list->nama_barang.')) data-kode=(('.$list->kode_barang.')) data-harga=(('.$list->harga_jual.')) class="btn btn-primary btn-pilih" role="button">Insert</a></td></tr>';
    }
    $data = array(
        'table_data' =>  $output
    );
    return json_encode($data);
}

Maturnuwun