JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<p class="button">
    <a href="#">
        <span class="add">Add to Basket</span>
    </a>
</p>

JavaScript

$(function () {
    $('.button').click(function (e) {
        e.preventDefault();
        var button = $(this);
        var content = button.contents();

        $.ajax({
            type: 'get',
            url: '/shop/add/some-product-name/',
            data: '',
            cache: false,
            dataType: 'text',
            beforeSend: function (rs) {
                button.html('<p class="para"><img src="/media/images/spinner.gif" />Please wait...</p>');
            },
            success: function (rs) {
                button.html(content);

                if (rs = 'YES') {
                    $('#modal > p.text').html('<span class="green">Item added successfully</span>');

                    $('#modal').modal({
                        overlayClose: true,
                        opacity: 80,
                        overlayCss: {
                            backgroundColor: '#fff',
                            cursor: 'cursor'
                        }

                    });
                }
                else {
                    alert('Something went wrong');
                }

            }
        });



    });
});