CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraplaravellaravel-blade
Anderson Madeira
Anderson Madeira

Reputation: 430

How to make Bootstrap toggle button start on after page loads and not call callback if on

I've been working on an ecommerce with Laravel 5. In each product's detail page, I want the visitor to click on a toggle button to add that item to the cart and click again to remove that item. When my visitor reloads the page or goes back to that product's detail page later, I want that toggle button to start 'on' after page load, so my visitor knows that product is already in the cart. I want to use a toggle button because of that built in toggling animation of the element. I'm using Bootstrap Toggle for the toggle button element. What I've done so far is:

  1. HTML for the button:

    <input id="btn_cart_item_toggle" type="checkbox" checked data-toggle="toggle" data-width="270" data-offstyle="danger" data-on="<i class='fa fa-shopping-cart'></i> Adicionar ao carrinho" data-off="<i class='fa fa-times'></i> Remover do carrinho" width="200" data-style="slow">

  2. I'm passing a Boolean to the controller (in_cart) to tell whether the product was already added to the cart, so I my Blade file I have:

    @if ($in_cart)
$(document).ready(function() {
    $('#btn_cart_item_toggle').prop('checked', true).change();
    bootbox.alert('DEBUG: Product in cart');
});
@endif

  3. And right after it, I have some jQuery code with Blade-generated stuff to make the AJAX calls (add/remove from cart) using the product's ID.

    $('#btn_cart_item_toggle').change(function () {
    if ($(this).prop('checked')) {
        $.post( "{{ route('api_cart_remove') }}", { id: '{{ $product->id }}' }, function(data) {
            if (data.success) {
                $('span.cart-count').html(data.count);
            } else {
                bootbox.alert('Fail');
            }
        });
    } else {
        $.post( "{{ route('api_cart_add') }}", { 'id': '{{ $product->id }}' }, function(data) {
            if (data.success) {
                $('span.cart-count').html(data.count);
            } else {
                bootbox.alert('Fail');
            }
        });
    }
});

I'm not managing to make that toggle button start 'on' without calling the callbacks. With $('#btn_cart_item_toggle').prop('checked', true).change(); the callback functions are called and I get "fail" because it's trying to add the product when it's already in the cart. I want that button to start 'on' without calling that functions if $in_cart is true. How can I do this? Or what would be a better approach?

It was hard to explain because it involves a lot of things like Blade, jQuery, CSS, and Bootstrap, but I hope I was clear enough.

UPDATE:

I managed to make it work just as I wanted, based on @CBroe's comment:

<input id="btn_cart_item_toggle" type="checkbox" data-toggle="toggle" @if (!$in_cart) checked @endif data-width="270" data-offstyle="danger" data-on="<i class='fa fa-shopping-cart'></i> Adicionar ao carrinho" data-off="<i class='fa fa-times'></i> Remover do carrinho" width="200" data-style="slow">

Upvotes: 2

Views: 1431

Answers (1)

C3roe
C3roe

Reputation: 96241

I would not do this client-side – but rather edit the template that outputs this input element to include the checked attribute to begin with (when applicable.)

(That should also make it “faster”, meaning the user will see the correct state while the page loads already, and not only after the JS is run.)

Upvotes: 1

Related Questions