I have a problem with the bootstrap modal function.
I try to open a modal when clicking on a button. In Bootply everything works fine, but in my document it's not working and I can't see why.
I try to use the modal in the portfolio section of this page
Here is my code snippet on bootply which is perfectly working...
Any Ideas???
If you take a look in for example Chrome's DevTools console you'll notice an error message like:
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
this either means that jQuery isn't loaded or that Bootstrap's JavaScript is loaded before jQuery.
If you take a look in your head section you'll see that the latter is the case. Make sure that js/jquery-1.11.1.min.js occurs before js/bootstrap.min.js.
P.S. it might be that the modal still doesn't work after these changes, but you need to fix this first.
Related
I realise this question has been asked a few times but none of the solutions in previous questions have resolved my issue.
I am trying to hide a modal using:
$('#modal').modal('hide')
but am getting:
$(...).modal is not a function
in the console.
However if I go into the developer console and enter:
$('#modal').modal('hide')
it works perfectly
I am getting jQuery/bootstrap via a CDN in the index.html and have checked the order of the imports and checked for multiple imports of jQuery.
EDIT: My jQuery/bootstrap scripts are being loaded at the top of the index.html and the JS module is included at the bottom of the page so the order seems correct. $('#modal').modal('hide') is being called on a $(window).on('resize') event
If you enter in developer console and it works means, problem with document ready issue or javascript placement issue.
just try this to confirm.
$(function(){
$('#modal').modal('hide');
});
If this working, then document ready issue.
another one is you should use this $('#modal').modal('hide'); after jquery-ui.js.
Please provide your code sample for further investigation.
I'm generating a bootstrap modal using the following plugin which loads a form into a modal dynamically.
https://nakupanda.github.io/bootstrap3-dialog/
BootstrapDialog.show({
message: $('<div></div>').load('remote.html')
});
This page then loads another modal which is google reCaptcha control. This control has a button which becomes unresponsive.
I've figured that I need to override a function that natively comes in bootstrap as mentioned in this link Problems with new Google reCAPTCHA in IE when inside modal or dialog
This single line of code should do the overriding.
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
It shouldn't be that difficult but I have spent almost 2 hours trying to figure out why my function isn't overriding the original BS function?
Also, if I put the above line of code in bootstrap.js file, then the override works. Anywhere else, it doesn't.
The code works in Firefox and Chrome, but fails in IE which is out of context but the fix is for IE.
Any help is much appreciated.
I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).
All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.
Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.
I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/
If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.
I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s
Need to include the following external js files.
Thanks to #Sebsemillia for the help
owl.autorefresh.js
owl.autoplay.js
I am trying to have a left sidebar in my rails application that uses bootstrap affix. I have set up this bootply to share my approach:
http://www.bootply.com/mwg1ZEM8zh
It works just like wanted with Chrome, but with Firefox affix stops working everytime I follow a link (the sidebar is in every page of my app). If I refresh the page affix starts working again. I have used data attributes to add the affix behavior, no javascript at all. Should I use javascript? Am I doing something else wrong?
I am using bootstrap 2.3.2.
I ended up using javascript as well and now it works with Firefox as well.
<script>
$('.sidebar').affix();
</script>
Working on a carousel lightbox tooltip demo and as far I can see in the jsfiddle created, the 'carouFredSel-script' isn't loaded. Error message in firebug:
$("#foo").carouFredSel is not a function
I don't see the problem. Can someone help?
You loaded http://members.chello.nl/j.bemmel2/carousel/assets/js/tooltip/jquery.js after jquery.carouFredSel-5.5.0-packed.js was loaded, which creates a fresh jQuery object again under window global object, and removed the one with caroured support.
Remove http://members.chello.nl/j.bemmel2/carousel/assets/js/tooltip/jquery.js should work.
You were loading jQuery twice and you were loading the carusel in the wrong place i think http://jsfiddle.net/s39Kd/4/