In my laravel dashboard's blade, I'm trying to display few stats.

They will be updated upon, date picker's on change.

following is my date picker.

<div >
        <div >
            <td>
                <input id="date"  type="date">
            </td>
        </div>
</div>

And following is two of my stat widgets, I have over all 6 widgets.

<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>
                <img  id="loadingImage" src="images/calculating-shopify-v2.gif" >
                <span  id="tot_o">{{ $tot_o }}</span> 
            </div>
        </div>
        <div >
            <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 Sales </h5>
                <img  id="loadingImage" src="images/calculating.gif" >
                <span  id="tot_sum">{{ $sum }}</span>  {{ $crr }}
            </div>
        </div>

I'm using jQuery to fetch and display data on those widgets upon date selections.

This is my jQuery

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

            $('#tot_o').empty(); 
            $('#tot_sum').empty(); 
            $('#avg_ov').empty(); 
            $('#cus').empty();
            $('#item_sum').empty();
            $('#orders').empty();
            $("#loadingImage").show();

        $.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){
                $("#loadingImage").hide();
                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>

Every time when a user selects a date, all my widgets need to display the stats only belongs to that date. This works perfectly.

But my issue is with the loading gif... Even though I want it to show on all the 6 widgets upon date onchange, and hide them once the data is displayed... it works/appeared on the first widget only...

How can I display my loading gif on all the widgets same time until the data get displayed

CodePudding user response：

It is appearing on the first widget only because you are fetching the element via id and all image element has the same id (which is possible but invalid) and when you use $("#loadingImage").show(); only the first element from the first widget get displayed.

So, instead of id, use a class for all image elements because the class can be the same, and then update the image element using a class like this-

$(".loadingImage").show();

CodePudding user response：

instead of id, use class. Like: <img src="images/calculating.gif" >

and in your js code make this edit: $(".loadingImage").show();

you can define same id only once in one page where as you can use same class as many times as you want