Alewa's avatar
Level 2

Laravel 6 JQuery Error

Hello, i am working on a ecommerce application with laravel 6 and when i want to update my product quantity with axios this is the error i am getting

app.js:10232 jQuery.Deferred exception: $(...).lightBox is not a function TypeError: $(...).lightBox is not a function
    at HTMLDocument.<anonymous> (http://localhost/commerce/public/assets/frontend/themes/js/bootshop.js:11:19)
    at mightThrow (http://localhost/commerce/public/js/app.js:9948:29)
    at process (http://localhost/commerce/public/js/app.js:10016:12) undefined
jQuery.Deferred.exceptionHook @ app.js:10232
process @ app.js:10020
setTimeout (async)
(anonymous) @ app.js:10054
fire @ app.js:9682
fireWith @ app.js:9812
fire @ app.js:9820
fire @ app.js:9682
fireWith @ app.js:9812
ready @ app.js:10292
completed @ app.js:10302
app.js:10241 Uncaught TypeError: $(...).lightBox is not a function
    at HTMLDocument.<anonymous> (bootshop.js:11)
    at mightThrow (app.js:9948)
    at process (app.js:10016)
(anonymous) @ bootshop.js:11
mightThrow @ app.js:9948
process @ app.js:10016
setTimeout (async)
jQuery.readyException @ app.js:10240
(anonymous) @ app.js:10260
mightThrow @ app.js:9948
process @ app.js:10016
setTimeout (async)
(anonymous) @ app.js:10054
fire @ app.js:9682
fireWith @ app.js:9812
fire @ app.js:9820
fire @ app.js:9682
fireWith @ app.js:9812
process @ app.js:10036
setTimeout (async)
(anonymous) @ app.js:10054
fire @ app.js:9682
fireWith @ app.js:9812
fire @ app.js:9820
fire @ app.js:9682
fireWith @ app.js:9812
ready @ app.js:10292
completed @ app.js:10302
cart:56 GET http://localhost/commerce/public/assets/frontend/themes/images/logo.png 404 (Not Found)
ciuvo-contentscript.js:5684 GET https://api.ciuvo.com/api/analyze?url=http%3A%2F%2Flocalhost%2F&version=2.1.3&tag=threesixty&uuid=832AC902-2A98-4A1F-B82A-9CF63C347563 400 (Bad Request)

This is my javascript code for the product quantity update

<!-- ============== quantity update js  ============== -->
   <script src="{{ asset('js/app.js') }}"></script>
        <script>
        (function(){
            const classname = document.querySelectorAll('.quantity')

            Array.from(classname).forEach(function(element) {
                element.addEventListener('change', function() {
                    const id = element.getAttribute('data-id')
                    const productQuantity = element.getAttribute('data-productQuantity')

                    axios.patch(`/cart/${id}`, {
                        quantity: this.value,
                        productQuantity: productQuantity
                    })
                    .then(function (response) {
                        // console.log(response);
                        window.location.href = '{{ route('cart') }}'
                    })
                    .catch(function (error) {
                        // console.log(error);
                        window.location.href = '{{ route('cart') }}'
                    });
                })
            })
        })();
    </script>

And this is my app.js file

require('./bootstrap');

This is my bootstrap.js file

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

This is my cart.blade.php file

@extends('layouts.start')

@section('main-content')

@include('includes.messages')

<div id="mainBody">
    <div class="container">
    <div class="row">
<!-- Sidebar ================================================== -->
@include('layouts.sidebar')
<!-- Nav End====================================================================== -->

<div class="span9">
    <ul class="breadcrumb">
        <li><a href="{{ route('landing-page') }}">Home</a> <span class="divider">/</span></li>
        <li class="active"> Shopping Cart</li>
    </ul>
        @if (session()->has('success_message'))
          <div class="alert alert-success">
              {{ session()->get('success_message') }}
          </div>
      @endif

      @if(count($errors) > 0)
          <div class="alert alert-danger">
              <ul>
                  @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                  @endforeach
              </ul>
          </div>
      @endif

  @if (Cart::count() > 0)
    <h3>  SHOPPING CART [ <small>{{ Cart::count() }} Item(s) </small>]<a href="{{ route('shop') }}" class="btn btn-large pull-right"><i class="icon-arrow-left"></i> Continue Shopping </a></h3>
    <hr class="soft"/>

    <!-- cart images -->
@foreach(Cart::content() as $item)
<div class="row">
        <div class="span3">
        <a href="{{ route('product', $item->model->slug) }}">
        <img src="{{ asset('storage/product/'.$item->model->image) }}" style="width:50%;" alt="Fujifilm FinePix S2950 Digital Camera"/>
        </a>
        </div>
        <div class="span6">
            <div class="form-horizontal qtyFrm">
                <div class="control-group">
                <label class="control-label"><span>{{ $item->model->name }}</span><br/><p>{{ $item->model->details }}</p></label>
                <div class="control-label">
                    <form action="{{ route('cart.destroy', $item->rowId) }}" method="POST">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}
            <button type="submit" class="cart-remove">Remove</button>
          </form>
                    <form action="{{ route('cart.switchToSaveForLater', $item->rowId) }}" method="POST">
            {{ csrf_field() }}
            <button type="submit" class="cart-remove">Save For Later</button>
          </form>
                </div>
                <div class="controls">
                    <select class="quantity span1" data-id="{{ $item->rowId }}" data-productQuantity="{{ $item->model->quantity }}">
                @for ($i = 1; $i < 5 + 1 ; $i++)
                    <option {{ $item->qty == $i ? 'selected' : '' }}>{{ $i }}</option>
                @endfor
            </select>
                    <h4 class="pull-right">GHC {{ $item->model->price }}</h4>
                </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="soft"/>
    @endforeach

    <!-- end cart images -->
       @if (! session()->has('coupon'))
           <div class="col-xs-12 col-sm-6 col-md-6">
             <form action="{{ route('coupon.add') }}" method="POST">
               {{ csrf_field() }}
                 <div class="chk-coupon">
                 <label>Coupon Code (if any)</label>
                 <div class="input-group">
                 <input type="text" class="form-control" name="coupon_code" id="coupon_code">
                 <span class="input-group-btn">
                 <button type="submit" class="btn fld-btn">APPLY</button>
                 </span>
                 </div>
                 </div>
                </form>
                </div>
                <hr class="soft"/>
          @endif
            <!-- total amount -->
            <div class="cart-total">
                <h4>Total Amount</h4>
                <table>
                <tbody>
                <tr>
                <td>Subtotal:</td>
                    <td>{{ Cart::subtotal() }}</td>
                </tr>
        <!-- start after coupon is applied-->
        @if (session()->has('coupon'))
        <tr>
          <td>Discount ({{ session()->get('coupon')['name'] }}) :
          <form action="{{ route('coupon.remove') }}" method="POST" style="display:inline;">
            {{ csrf_field() }}
            {{ method_field('delete') }}
            <button type="submit" class="">Remove</button>
            </form>
            </td>
            <td> - {{ $discount }}</td>
            </tr>
            <hr/>
            @endif

            <tr>
            <td>New Subtotal:</td>
            <td>{{ $newSubtotal }}</td>
            </tr>
            <tr>
            <td>Tax (13%):</td>
            <td>{{ $newTax }}</td>
            </tr>
            <tr>
            <td><h4>Total:</h4></td>
            <td><h4>{{ $newTotal }}</h4></td>
            </tr>
              <!-- after coupon is applied-->
                      </tbody>
                      </table>
                      <a href="{{ route('shop') }}" class="btn update btn-block">Continue Shopping</a>
                      <a href="{{ route('checkout.index') }}" class="btn check_out btn-block">Check Out</a>
                </div>
            <!--end total amount -->
            <hr class="soft"/>
            @else
              <h3>No Item In Shopping Cart<a href="{{ route('shop') }}" class="btn btn-large pull-right"><i class="icon-arrow-left"></i> Continue Shopping </a></h3>
                <hr class="soft"/>
            @endif

            <!-- save for later -->
            @if (Cart::instance('saveForLater')->count() > 0)

      <h4>{{ Cart::instance('saveForLater')->count() }} item(s) save for Later</h4>
            @foreach(Cart::instance('saveForLater')->content() as $item)
            <div class="row">
                    <div class="span3">
                    <a href="{{ route('product', $item->model->slug) }}">
                    <img src="{{ asset('storage/product/'.$item->model->image) }}" style="width:50%" alt="Fujifilm FinePix S2950 Digital Camera"/>
                    </a>
                    </div>
                    <div class="span6">
                        <div class="form-horizontal qtyFrm">
                            <div class="control-group">
                            <label class="control-label"><span>{{ $item->model->name }}</span><br/><p>{{ $item->model->details }}</p></label>
                            <div class="control-label">
                                <form action="{{ route('saveForLater.destroy', $item->rowId) }}" method="POST">
                  {{ csrf_field() }}
                  {{ method_field('DELETE') }}
                  <button type="submit" class="cart-remove">Remove</button>
                </form>
                                <form action="{{ route('saveForLater.switchToCart', $item->rowId) }}" method="POST">
                  {{ csrf_field() }}
                  <button type="submit" class="cart-remove">Move To Cart</button>
                </form>
                            </div>
                            <div class="controls">
                                <h4 class="pull-right">GHC {{ $item->model->price }}</h4>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="soft"/>
            @endforeach

            @else
              <h3>You have No items saved for Later!</h3>
            <hr class="soft"/>
            @endif

          <!-- end save for later -->

        <!-- ============= Might Also Like =========== -->
            @include('might-like')
        <!-- ==================== end might also like =========== -->

</div>
</div></div>
</div>

@endsection

can someone pls help

0 likes
1 reply
ahmeddabak's avatar

The error says that you have tried to initialize a lightBox library, which you did not import, therefor the function $('#your selector').lightbox() was not found.

Please or to participate in this conversation.