Question 37029 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Spinner Working on only One button in a page when the button is clicked. Others dont show spinner – Jquery

I am having a carousel with products and I want to show a loading Spinner when each and every Add to Cart button is clicked. But the code I have only shows a spinner on the first button clicked. Others wont show afterwards. Please Help

The Carousel

<div class="carousel-multiple owl-carousel owl-theme">
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block" id='spinner-btn'>ADD TO CART</a>
                    </div>
                </div>

            </div>
        </div>

The Javascript Code for showing spinner on button click

$(document).ready(function () {
    $("#spinner-btn").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html(
            '<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading'
        );
    });
});
Tags:

2

Answers


  1. 0

    ID attribut must be unique !

    If you want to target more than one element, you need to use a class.

    https://careerkarma.com/blog/css-class-vs-id-2/

    $(document).ready(function () {
    $(".spinner-btn").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html('<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading');
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-multiple owl-carousel owl-theme">
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
                    </div>
                </div>

            </div>
            <div class='item'>
                <div class="card product-card">
                    <div class="card-body">
                        <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                        <h2 class="title">Apple</h2>
                        <p class="text">1 kg</p>
                        <div class="price">$ 1.50</div>
                        <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
                    </div>
                </div>

            </div>
        </div>
    Login or Signup to reply.
  2. 0

    You are using the same ID on all of them, this will cause you problems because an ID element must be unique and used in 1 place only.

    Try giving them all a shared class, or change the a elements to a button element, and give it a certain type for example:

    <button type="add-to-cart">Add To Cart</button>

$(document).ready(function () {
    $("button[type='add-to-cart']").click(function () {
        // disable button
        $(this).prop("disabled", false);
        // add spinner to button
        $(this).html('<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading');
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search