Question 16572 in Laravel Question posted in
The official Laravel Documentation can be found here.

Displaying a loading gif every time when a date picker date is changed – Laravel

I have a laravel application which shows some stats to my users.

On my front end blade, I’m displaying few widgets where each widget contain’s a specific stat.

Following widget is to show number of total orders.

<div class="row mt-3" id="shopify_row1">
        <div class="col-md-2" id="shopify_widget1">
            <div class="jumbotron bg-dark text-white">
                <img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
                <h6 class="text-secondary mt-2 px-4">Shopify</h6>
                <hr class="border border-white">
                <h5 class="text-white">Total Orders</h5>
                <span class="tot_o" id="tot_o">{{ $tot_o }}</span> 
            </div>
        </div>
</div>

Like this widget, I have 5 more widgets to display 5 different stats.

In every widget initially I’m displaying stats for the current date, eg: if the total number of orders for the day is 0, it shows 0…

Then, I have added a a date picker as I can get the data only for a particular day.

<td>
      <input id="date" class="date form-control" type="date">
</td>

And following is my jQuery…

<script>
        $(document).on('change', '#date', function (e) {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'GET',
            url : '/shopify_data',
            data : {selected_date : $('#date').val()},
            success:function(data){

            $('#tot_o').empty(); 
            $('#tot_sum').empty(); 
            $('#avg_ov').empty(); 
            $('#cus').empty();
            $('#item_sum').empty();
            $('#orders').empty();
            var total_orders = data.tot_o;
            var total_sales = data.sum;
            var currency = data.crr;
            var avg_ov = data.avg_ov;
            var cus = data.cus;
            var item_sum = data.item_sum;
            var orders = data.orders;
            $('#tot_o').append(total_orders);
            $('#tot_sum').append(total_sales);
            $('#avg_ov').append(avg_ov);
            $('#cus').append(cus);
            $('#item_sum').append(item_sum);
            $('#orders').append(orders);
            //console.log(total_orders);

            },
            timeout:10000
        });

    });    
    </script>

This entire code works perfectly, but now I need to add a loading gif till the updated results get displayed on the date change.

What changes should I do to above jQuery in order to add the loading gif…

Tags:

2

Answers


  1. 0

    There are multiple ways how you can create the loading gif. One would be to create an element in your blade template that is hidden or shown by using a class.

    HTML:

    <div class="loader hidden"></div>

    CSS:

    .hidden {
    display: none;
}

    jQuery:

    const loader = document.querySelector('.loader');

$(document).on('change', '#date', function (e) {
    loader.classList.remove('hidden');
    // your other code..
}

    And inside your success function you add the hidden class which should hide the loading element again.

    success: function(data){
    loader.classList.add('hidden');
    // your existing code..
},

    However, I would instead add a complete block, which ensures that on failure as on success the loading element is hidden.

    $.ajax({
    // your existing code..
    complete: () => {
        loader.classList.add('hidden');
    }
}
    Login or Signup to reply.
  2. 0

    You can place loading gif in any place of DOM with style="display: none".
    Next, in your script before ajax you can show gif and after success or fail result hide it again:

    <script>
    let gif = $('.loading-gif'); // Your loading gif

    $(document).on('change', '#date', function (e) {
        
        gif.show(); // Show loading gif

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'GET',
            url : '/shopify_data',
            data : {selected_date : $('#date').val()},
            success:function(data){
            gif.hide(); // Hide gif

            $('#tot_o').empty(); 
            $('#tot_sum').empty(); 
            $('#avg_ov').empty(); 
            $('#cus').empty();
            $('#item_sum').empty();
            $('#orders').empty();
            var total_orders = data.tot_o;
            var total_sales = data.sum;
            var currency = data.crr;
            var avg_ov = data.avg_ov;
            var cus = data.cus;
            var item_sum = data.item_sum;
            var orders = data.orders;
            $('#tot_o').append(total_orders);
            $('#tot_sum').append(total_sales);
            $('#avg_ov').append(avg_ov);
            $('#cus').append(cus);
            $('#item_sum').append(item_sum);
            $('#orders').append(orders);
            //console.log(total_orders);

            },
            timeout:10000
        });
    });    
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search