I am getting this error even when all the jquery has been loaded before bootstrap and also have used the version 1.9.1
tried using jquery version 1.9.1 and it still dint solve
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/respond.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-year-calendar.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-year-calendar.min.css">
I have had this issue previously when I have referenced two different versions of jquery or Bootstrap, you have done both here. You have three versions of JQuery in this code:
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
You are also loading bootstrap and the bootstrap min js files which will interfere with each other.
Try simplifying your code and only use 1 version of each library/framework.
So one version of JQuery loaded before Bootstrap stuff. One version of bootstrap. So make sure you have your JQuery script src THEN your Bootstrap one.
If you try to add more than one version of bootstrap this error comes. Order of bootstrap and jquery also matters. Try including this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
try including this
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Related
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1
I have a Android app built with JQuery Mobile 1.4.2 and PhoneGap 3.3
In about 1 in 3 loads, when I click a button it pops out of place and looks terrible. Is there some type of onDeviceReady function I should be using to avoid this issue? Thanks!Here is a screenshot:
My scripts in header in case this is helpful:
<link href="js/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/index.js"></script>
<link rel="apple-touch-icon" href="img/HomeScreenIcon.png" />
<link rel="apple-touch-startup-image" href="img/SplashSceen.jpg"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"type="text/javascript"></script>
<script src="js/jquerymobile10.3.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/categories.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:700' rel='stylesheet' type='text/css'>
<link href="css/overwrite.css" rel="stylesheet" type="text/css">
i use Yii 1.1.13 and Yii Booster 1.0.6
On one page i need to use TbButtonGroup with checkbox toggle and jQRangeSlider (http://ghusse.github.io/jQRangeSlider/)
To use slider, i need to include jQuery UI lib, BUT when i include it, the checkbox mode of buttonGroup does not works.
With some versions of UI it just does not work, with with the latest it writes in console on TbButtonGroup click:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'
The full list of sources is
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/jquery-ui-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-notify.css" />
<link rel="stylesheet" type="text/css" href="/jqslider/iThing-min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.notify.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places&language=en"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqslider/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/jqslider/jQAllRangeSliders-min.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
If i delete the jquery ui, where is no slider, but all works fine. Help me please, where is the bug?
maybe you need to manually include your whatever scripts you need, using Yii::app()->clientScript
its safe becuz Yii wont load duplicate scipts
<link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery_v_1.4.js"></script>
<script type="text/javascript" src="js/jquery_notification_v.1.js"></script>
<link rel=stylesheet href="css/mootime.css" type="text/css" media=screen>
<script src="js/mootools1.2.js" type="text/javascript"></script>
<script src="js/mootime.js" type="text/javascript"></script>
Only one of the following javascript is working.... Please tell me a solution
You could use $.noConflict which allows you to use jQuery with other frameworks.
You should use jQueury.noConflict().
More docs here
This should be a simple one but I cant get the syntax quite right.
I also cant find any examples of externally linked files, All search results I've found seem to solve their problems by storing a local copy of the file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
This is a simple external script tag in my .erb file but rails is not picking up anything that isnt using
<%= javascript_include_tag 'whatever.js' %>
How do I externally link up a JS to my rails app.
I cannot store the Jquery.js locally due to technical requirements (I don't understand it either)
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' %>
Perhaps the problem wasnt me not referencing the file correctly. It seems to be generated in the html.erb file fine but in the firebug console, I'm getting Jquery not defined.
jQuery is not defined
[Break On This Error] remText=remText.replace(/\%n/g,charsRe...al:true,allowExceed:false};})(jQuery);
jquery...9702940 (line 17)
jQuery is not defined
[Break On This Error] })(jQuery);
protot...0469242 (line 5653)
The generated HTML links.
I have no idea why the standard src = tag wont find it.
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery.inputlimiter.1.2.2.min.js?1299702940" type="text/javascript"></script>
<script src="/javascripts/globalviewFunctions.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/editInPlace.js?1312468960" type="text/javascript"></script>
<script src="/javascripts/errorDisplay.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/journeyViewFunctions.js?1312541017" type="text/javascript"></script>
<script src="/javascripts/pageviewFunctions.js?1312449379" type="text/javascript"></script>
<script src="/javascripts/shaneShowHide.js?1312387899" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/Legacy.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/editInPlace.js?1312468960" type="text/javascript"></script>
<script src="/javascripts/errorDisplay.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/globalviewFunctions.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/journeyViewFunctions.js?1312541017" type="text/javascript"></script>
<script src="/javascripts/jquery.inputlimiter.1.2.2.min.js?1299702940" type="text/javascript"></script>
<script src="/javascripts/jquery.min.js?1312544046" type="text/javascript"></script>
<script src="/javascripts/pageviewFunctions.js?1312449379" type="text/javascript"></script>
<script src="/javascripts/shaneShowHide.js?1312387899" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
In one of my applications I also use the javascript_include_tag to include javascripts. Only difference is that I feed it an array (which gets dynamically filled). It works somethin like this:
def add_javascript(url)
#javascript_urls ||= []
#javascript_urls << url unless #javascript_urls.include?(url)
end
def create_javascript_urls()
javascript_include_tag(#javascript_urls) + "\n" unless #javascript_urls.blank?
end
To add the jQuery javascript I use:
add_javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js')
It all seems similar to me compared to your question examples, but maybe it helps you in finding the answer...