Question 11529 in Shopify Question posted in
The Shopify help center can be found here.

jQuery loading gif not working properly same time, on the multiple divs – Shopify

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 class="row">
        <div class="col-md-12">
            <td>
                <input id="date" class="date form-control w-50  pull-right" type="date">
            </td>
        </div>
</div>

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

<div class="col-md-2" id="shopify_widget1">
            <div class="jumbotron bg-light text-dark">
                <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-dark mt-2 px-4">Shopify</h6>
                <hr class="border border-black">
                <h5 class="text-dark">Total Orders</h5>
                <img  id="loadingImage" src="images/calculating-shopify-v2.gif" class="img-fluid w-100">
                <span class="tot_o" id="tot_o">{{ $tot_o }}</span> 
            </div>
        </div>
        <div class="col-md-2">
            <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 Sales </h5>
                <img  id="loadingImage" src="images/calculating.gif" class="img-fluid">
                <span class="tot_sum" 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

Tags:

2

Answers


  1. 0

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

    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

    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search