How to set pre-loader on a div when ajax is running
here is my AJAX
<script> $(document).ready(function () { @foreach($cartCollection as $item) $("#quantity{{$item->id}}").on('change keyup', function () { $.ajax({ url: "{{ route('cart.update') }}", method: 'GET', data: {id: {{ $item->id }} , quantity: $(this).val()}, success: function (data) { $("#totalPrice{{$item->id}}").html(data); }, }); }); @endforeach }); </script> I want to show pre loader (loader.gif) when my ajax is running.
My content is inside this div
<div id="status"> <div id="preloader"></div> </div> <main id="content" role="main"> @yield('content') </main> i used it when Page is loading. here is the script
jQuery(window).load(function() { jQuery("#status").delay(500).fadeOut(); jQuery("#preloader").delay(500).fadeOut("slow"); }) I want to show pre loader again when my ajax start and again hide when ajax success. How can I set this now? please Help
