Twitter Bootstrap Question posted in

2nd time popover is not working after model popup once called – Twitter bootstrap

In one html page i am using both bootstrap model and bootstrap popover for different purposes. I am using BS Model for Video Play purpose and Popover for Share those video . But i am facing an issue with Popover and Bootstrap model is working fine. & also popover works fine before Bootstrap Model call after closing the model popover fails to open and in browsers console shows an error… which are ..
Uncaught TypeError: $(…).popover is not a function(…) &
Uncaught TypeError: Cannot read property ‘tip’ of undefined(…)
I don’t get the solution related, i tried to solve with jQuery.noconflict(), var $ = jQuery.noconflict() & also with
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton but same issue coming

if any one face this same issue… and got the solution over same… then help me out to resolve same… Thanks in Advance

Error:

Uncaught TypeError: Cannot read property 'tip' of undefined(…)
Uncaught TypeError: $(...).popover is not a function(…)

jQuery & bootstrap files in my project.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the MIT license
*/
<script type="text/javascript" src="js/libs/bootstrap.js"></script>

Html 

<a href="#"><img src="images/new_icons/sharing(22x22).png" height="40" width="40" class="share text-center" title="Share"></a>

jquery popover

$(".share").popover({
                html: true,
                title: 'Share this with... <img width="20" height="20" title="close" data-toggle="clickover"  src="/static/img/new_icons/close(32x32).png" onclick="$(&quot;#share_popover&quot;).popover(&quot;hide&quot;);" id="close_skigit" class="close-skigit">',
                placement: 'auto bottom',
                trigger: 'manual',
                cache:true,
                content: $("#shareContent").html(),
            }).click(function(e){
                $(this).popover('toggle');
                e.preventDefault()   
            });
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was resolved the actual problem was in popover function there is a trigger manual and on click event of popover toggles & most important is popover plugin initialize once at the time of page load so after bootstrap model call which is also on same page and after closing a model again i am try to open a popover so on click of popover its try's to reinitialize again. and throws an error message $(...).popover is not a function. which was once already initialize so next time because of page is not refreshed its was not initialize again. simple solution i found that is i remove the manual trigger

    $(".share").popover({
                html: true,
                title: 'Share this with... <img width="20" height="20" title="close" data-toggle="clickover"  src="/static/img/new_icons/close(32x32).png" onclick="$(&quot;#share_popover&quot;).popover(&quot;hide&quot;);" id="close_skigit" class="close-skigit">',
                placement: 'auto bottom',
                cache:true,
                content: $("#shareContent").html(),
            })

  2. 0

    You need to initialize the popover for the a element, not the img element (with the tabindex and role attributes).

    Additionally, popovers automatically close on click by default. So, there is no need for the manual trigger or any click event handler, and, as far as I know, there is no cache option for the popover.

    You can also use the data- attributes to accomplish the task without Javascript code. For instance, you can use:

    <a tabindex="0" role="button" data-toggle="popover" title="Share this with..." data-html="true" data-placement="auto bottom" 
  data-content="function() { return $('#shareContent').html(); }">
  <img src="images/new_icons/sharing(22x22).png" height="40" width="40" class="text-center" title="Share">
</a>
    Login or Signup to reply.
  3. 0

    I got same problem when I was dealing with bootstrap popover. Then I got rid of the this simply by commenting out “jquery.min.js” import script.

    There must be a clash between popover and “jquery.min.js”. Please try once again by commenting “jquery.min.js” out.

    <!-- <script type="text/javascript" src="./scripts/jquery.min.js"></script> -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search