<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
Related
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>
Here's the codepen: http://codepen.io/jjmartucci/pen/DlCmy
I'm using Brackets. I copied and pasted the CSS into my style.css, the JS into my init.js, and the HTML part into the body of my index.html...
I also modified the head of my HTML document to say:
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.js"></script>
</head>
and I'm still struggling to get it going. The CSS seems to be working, but the functionality is messed up. Is there any obvious step I'm missing?
You're loading way too many instances of the same scripts. And your init.js needs to come after your 3rd party libraries.
Try this:
<head>
<!-- style -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!-- libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<!-- app -->
<script src="js/init.js"></script>
</head>
While copying javascript from codepen, it may be adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code own code. Hopefully this solves the javascript problems.
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 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
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...