Bootstrap Popover Repeats An Action/ Event Twice?

Why Bootstrap's popover repeats an action twice? For instance, I want to submit a form inside the popover's data-content via ajax. It repeats all the form data twice and the posts

Solution 1:

This happens because popover.content checks if the tooltip is empty or not.

A simple fix would be to add a title attribute to popover.

$('.bootstrap-popover-method').popover({
    placement: 'bottom',
    container: 'body',
    html:true,
    title: "New Title",
    content: function () {
        var p = $(this);
        var data = $('#popover-content').html();
        $('#popover-content').remove();
        p.attr("data-content", data);
        p.popover('show');
    }
});

https://github.com/twbs/bootstrap/issues/12563#issuecomment-56813015

Solution 2:

I think you need to prevent the default event of the submit button

$(".btn-submit").click(function(e){
    e.preventDefault();
    console.log($(this).closest("form").attr("action")); // I get twice of '1.php'var form = $(this).closest("form");
    console.log(form.serialize()); // I get twice of 'username=hello+world!'

    $.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'type: "POST",
        url: form.attr("action"),
        data: $(this).serialize(), // serializes the form's elements.success: function(data){
            //alert(data); // show response from the php script.
        }
    });

    returnfalse;
});

Solution 3:

This might be an old post, but i'm gonna leave here my work around.

I'm using bootstrap 3.3.5.

So the buggy behavior is that on every execution of "popover('show')", Bootstrap calls the rendering function twice, and only the second call is the one that actually renders the popup.

My fix is to return a short html string for the first call, and for the second call i let run the whole rendering function:

jQuery('.bootstrap-popover-method').popover({
    html: true,
    trigger: 'manual',
    content: function(){//This is our rendering function for the popup's contentvar __G_bs_popover_shown= jQuery.data(jQuery('body')[0], '__G_bs_popover_shown');

        //Create a global variable, attached to the body element, to keep track of the repeating calls.
        __G_bs_popover_shown= (typeof __G_bs_popover_shown == 'undefined') ? 1 : (__G_bs_popover_shown + 1) % 2;
        //Update the global var
        jQuery.data(jQuery('body')[0], '__G_bs_popover_shown', __G_bs_popover_shown);
        //return a short string on every first call (this will not be rendered, anyway)if(__G_bs_popover_shown == 1) return'<div>BLANK</div>';//==>this should not be an empty string!//PLACE YOUR CODE HERE, E.G. AJAX CALLS, ETC..//DON'T FORGET TO RETURN THE HTML FOR THE POPUP'S CONTENT!
    }
  });

Solution 4:

$('.bootstrap-popover-method').off('shown.bs.popover')
                                      .on('shown.bs.popover', function (e) {
      e.preventDefault();
    }

// unbind your submit button click

$(".btn-submit").off('click').on('click',function(){

        console.log($(this).closest("form").attr("action")); // I get twice of '1.php'var form = $(this).closest("form");
        console.log(form.serialize()); // I get twice of 'username=hello+world!'

        $.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'type: "POST",
            url: form.attr("action"),
            data: $(this).serialize(), // serializes the form's elements.success: function(data){
                //alert(data); // show response from the php script.
            }
          });

        returnfalse;
    });