Level 47
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.
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
Please or to participate in this conversation.