CODEWITHSUNDEEP
ajaxtwitter-bootstrappopover
Vesper Bled
Vesper Bled

Reputation: 165

Ajax Bootstrap Popover: Object #<Object> has no method 'popover'

I'm trying to build an Ajax Bootstrap Popover to display a page that contains a rating star system.

The javascript here work nice the first time. Then I have this error:

Uncaught TypeError: Object # has no method 'popover'

I'm not really good in jQuery, but I guess it seems to be due to the ajax call, but I can't find where the problem is.

$(".myRate")
        .popover({
            offset: 10,
            trigger: 'manual',
            animate: false,
            html: true,
            placement: 'top',
            template: '<div class="popover" onmouseover="$(this).mouseleave(function()  {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

        });
$('.myRate').mouseenter(popoverDisplay);

popoverDisplay = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
     type: 'GET',
     url: 'notes.php',
     data: _data,
     cache: false,
     dataType: 'html',
     success: function(data) {
        el.attr('data-content', data);
        el.popover('show');
     }
  });
}

I don't get what I am doing wrong... Any idea ?

EDIT:

After searching, it seems that, it's the loaded pages which causes this error.

Exactly this part:

It seems that loading jquery-1.7.2.js make the bug because if I remove it, the error disapear. Problem: I can't delete it because without it jRating doesn't work anymore :/

Upvotes: 10

Views: 10899

Answers (6)

epsilones
epsilones

Reputation: 11609

I guess you're using rails, so it might come that assets/vendor/jquery is loaded after assets/vendor/bootstrap, because the load order is alphabetical. So you might rename the bootstrap file to fit the right loading order. I experienced that problem and it did the trick

Upvotes: 0

Tomas Gonzalez
Tomas Gonzalez

Reputation: 1175

I had the same problem. I was loading jQuery.js twice... Narf...

Upvotes: 2

Zubin
Zubin

Reputation: 9712

I had this problem after running the rails twitter bootstrap generator, then switching to bootstrap-sass.

It was caused by a filename collision because boostrap-sass references bootstrap.js instead of twitter/bootstrap, which clashes with the generated file.

Just rename the generated app/assets/javascripts/bootstrap.js.coffee to something else, eg app/assets/javascripts/bootstrap_and_overrides.js.coffee, and you're good to go.

Upvotes: 23

user1542
user1542

Reputation: 49

i had the same problem . you might be loading jquery AFTER loading bootstrap.js . for some reason the sequence is important

</footer>
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/jquery-1.7.1.min.js" ;?>"></script>   
<script src="<?php echo "http://".$_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI']."assets/bootstrap/js/bootstrap.js" ;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
    create_project_form=$('form#create_project_form');
    $('button#create_project_button').popover({title:'New Project',content:create_project_form});
});
</script>
</body>
</html>

loading jquery before bootstrap did the job for me . hope that helps

Upvotes: 2

Hayk Saakian
Hayk Saakian

Reputation: 2036

I had this problem because i was trying to use the jQuery from bootstrap while also importing jQuery from googleapis (like it says in http://railscasts.com/episodes/205-unobtrusive-javascript) if you're using bootstrap, you'll have jquery

Upvotes: 7

baptme
baptme

Reputation: 10092

You can either use boostrap.js or (bootstrap-popover.js and bootstrap-tooltip.js)

But not both because if you use both. You get Uncaught TypeError: Object # has no method 'popover'

Upvotes: 0

Related Questions