通过jQuery取消选择按钮

Question

I have a button, and I do a popover when a variable exceeds a stock variable:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'manual',
        placement: 'top',
        title: 'Ajouter un billet'
    })
    $('.plus').click(function () {
        var idP = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('ajaxAddOneElemCart', {product_id: idP}),
            success: function (data) {
                var stock = data[2];
                $('.quantite' + idP).text(data[0]);
                if (stock > data[0]) {
                    $('.total').text(data[1]);
                } else {
                    $('.plus').attr('data-content', '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>');
//                    $('[data-toggle="tooltip' + idP + '"]').popover();
                    $(this).tooltip('show');

                }
            }
        });
    });
    $('.moins').click(function () {
        var idP = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: Routing.generate('ajaxMinusElemCart', {product_id: idP}),
            success: function (data) {
                $('[data-toggle="tooltip' + idP + '"]').popover('destroy');
                $('.erreur' + idP).html('');
                $('.quantite' + idP).text(data[0]);
                $('.total').text(data[1]);
            }
        });
    });

});

HTML code:

<button tabindex="0" role="button" id="{{article[0].id}}" class="btn btn-succes plus"  data-toggle="tooltip">+</button>
<button type="button" id="{{article[0].id}}" class="btn btn-danger moins" title="Soustraire un billet">-</button>

$('[data-toggle="tooltip'+idP+'"]').popover() must be actioned when the data[0] is little as the variable stok. It works but:

If I click a various times over the + , it's stop at 50, but I haven't the popover. If I click in another part of the screen and then click another time over the + , it opens the popover.

Have I to deselect the button? How?

Thanks Best regards

Answer 1

I can see your problem. The $('[data-toggle="tooltip'+idP+'"]').popover() line simply activates the popover. The default trigger for popovers is a click so on, for example, the 50th click, the popover is activated but opens on the next click. You also seem to be using a combination of tooltips and popovers, which are actually separate things. For your application of this code, I think popovers would be best. To fix this:

1. Firstly, the plus and minus buttons will end up having the same ID, which is not valid. For my code, the buttons do not need specific ids so you could either remove them all together or, if you need them for other code, then make sure that you do not have two ids the same on one page.

2. For the button's HTML, remove all the the data- attributes. I suggest defining these through JS instead, which is much neater. Keep in mind that the title attribute of the plus button will become the title of the popover.

3. To show the popover, replace all the code in the else section of the plus success function with this.

    $(this).popover({ trigger: 'manual', placement: 'top', html: true, content: '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>' }); $(this).popover('show'); 

   This initialises the plus button's popover with manual(JS only) trigger, placed above the element it's attached to with HTML enabled and your original content. It then shows the popover.

4. To hide the popover, put $(this).prev().popover('hide'); instead of the first line of your success function for the minus button. This will hide the popover of the previous element in the DOM, so ensure the plus button is immediately before the minus button in your HTML.

In the end that means your HTML is:

<button tabindex="0" role="button" class="btn btn-succes plus" title="Ajouter un billet">+</button>
<button type="button" class="btn btn-danger moins" title="Soustraire un billet">-</button>

...and your JS is:

$('.plus').click(function () {
    var idP = $(this).attr('id');
    $.ajax({
        type: 'GET',
        url: Routing.generate('ajaxAddOneElemCart', {
            product_id: idP
        }),
        success: function (data) {
            var stock = data[2];
            $('.quantite' + idP).text(data[0]);
            if (stock > data[0]) {
                $('.total').text(data[1]);
            } else {
                $(this).popover({
                    trigger: 'manual',
                    placement: 'top',
                    html: true,
                    content: '<font color="red">ATTENTION: Il ne reste que ' + stock + ' billets disponibles. Vous ne pouvez pas en commander plus.</font>'
                });
                $(this).popover('show');

            }
        }
    });
});

$('.moins').click(function () {
    var idP = $(this).attr('id');
    $.ajax({
        type: 'GET',
        url: Routing.generate('ajaxMinusElemCart', {
            product_id: idP
        }),
        success: function (data) {
            $(this).prev().popover('hide');
            $('.erreur' + idP).html('');
            $('.quantite' + idP).text(data[0]);
            $('.total').text(data[1]);
        }
    });
});

Hope this works,

Tugzrida.