Displaying a loading gif every time when a date picker date is changed-CodePudding

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  id="shopify_row1">
        <div  id="shopify_widget1">
            <div >
                <img  src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
                <h6 >Shopify</h6>
                <hr >
                <h5 >Total Orders</h5>
                <span  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"  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...

CodePudding user response：

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 ></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');
    }
}

CodePudding user response：

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>