<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
$('#blink').toggle();
};
</script>
Throws an error saying
$ is not a function
When using an external JavaScript file which gets referred after jQuery I can only seem to use jQuery within the ready function. Is there something I should know about using jQuery in this manner?
That error means jquery isn't loaded
jQuery may be conflicting with another definition, the fact that you can use it in the ready function seems to indicate that it is at least loaded. Have you tried using:
<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
jQuery('#blink').toggle();
};
</script>
Sometimes it is cleaner to go direct to the object. If you find that resolves your problem you may wish to switch to noConflict mode which is described in more detail in the docs here:
http://api.jquery.com/jQuery.noConflict/
Hope that helps.
Have you referenced jQuery as the first script in your page? Does the path exist? Try using Google's, just to test:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
It seems that jQuery is conflicting with any existing javascript library.
I hope this link might help.
Related
What is the correct JavaScript way to replacement <body onload="init();">, bearing in mind that we no-longer have need to support very old browsers.
In my case I want to add a onClick event to all tags and would like to keep the Javascript separate to my HTML page.
window.onload = init();
Started off with this but found the global document object is not available inside init(), this seems to be it seems to be a timing issue. Did it work better in older browsers?
document.addEventListener("DOMContentLoaded", init, false);
Seems to be a more modern reliable way but is this supported by all modern browsers?
Then there is the suggestion to just put the init() at the bottom of the page but that is obviously getting back to having the Javascript direct in the HTML.
<script type="text/javascript">init();</script>
Is there a definitive way I should be running my init code?
I think what you want is $(function(){}), or $(document).ready(...), as Marc B mentioned. That seems to accomplish what you're asking for, unless I'm misunderstanding your question. The jQuery API backs this up.
The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.
Most simple method is adding a script tag at the end of body with a self invoking anonymous function:
<body>
<!-- content here -->
<script type="text/javascript">
(function() {
//Run init code here
})();
</script>
</body>
For external js files:
<body>
<!-- content here -->
<script src="main.js" type="text/javascript"></script>
</body>
main.js file:
(function() {
//Run init code here
})();
Now that the problem of the extra brackets has been solved the final solution which I am just about to test is:
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init);
} else {
window.onload = init;
}
I know JQuery can do this with it's .ready event but some of these pages are very small pages of Ajax content and I would prefer to avoid the overhead of JQuery if it is not necessary.
On my site http://tsawebmaster1.hhstsa.com/drones/index.html, I have a background video that is supposed to show using the bigvideo.js plugin. For some reason it is not showing. How can this be solved?
I believe this has something to do with multiple jquery files overriding each other. Is this possible and the issue?
Open up your console. You can see the following error:
document.getElementByTagName is not a function
You are missing an 's'
the correct method is:
var elements = document.getElementsByTagName(name);
Pic
Yes, you can use Jquery No Conflict as follow:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I need to create code which can be used as snipped for every site.
When I copy paste this code to any html in the world this should work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript"> my_jQuery = $.noConflict(true);</script>
<script type="text/jscript">
my_jQuery(document).ready(function () {
my_jQuery("#myDiv").html("Hello world");
});
</script>
<div id="myDiv">
</div>
Of Course in real world logic will be more complex but principle is same.
So this must work even if site already have JQuery, if have same version of JQuery,if have different version of JQuery, or even if does not have JQuery at all.
I want be sure that client does not use some old version of JQuery, so I want always use my JQuery.
What do you think, will this work or there is something that I have not consider?
I think that this question should be faced in an architectural way, knowing what libraries/frameworks are available is a design concern... Basically, you shouldn't need to check dependencies at runtime... if you write jQuery, you must be sure that jQuery exists!
By the way, there are some cases where you can't do it, for example, if you are writing a public/api (a snippet that runs in heterogeneous environments). In these cases, you can do:
mark jQuery as peer-dependencies
Check at runtime.
There is an example of runtime checking:
<script>
(function($) {
var jQueryUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
$ || (document.writeln('<script src="'+ jQueryUrl +'"></script>'));
})(window.jQuery);
</script>
In order to avoid conflicts, finally, you don't need to use jQuery.noConflict, you need to work with javascript scopes (closures)... basically, never try to access the global jQuery alias $ (never use global vars), simple pass it as function param:
(function($) { console.log('$', $); })(window.jQuery)
window.jQuery(document).ready(function($) { console.log('$', $); });
The first thing we need to do is check if jQuery is present on the website. jQuery is the global variable so it should be in window object if it is loaded. We can check it like this: if (window.jQuery) {}
If the jQuery not present we can dynamically load it adding script tag with desired jQuery version. So the snippet answering for checking if jQuery is loaded and loading if it's not would be like:
if (!window.jQuery) {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.src = 'http://code.jquery.com/jquery-1.12.1.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);
}
That would work for
So this must work even if site already have JQuery,
if have same version of JQuery,
if have different version of JQuery,
or even if does not have JQuery at all.
As you can see as per your code, that would work fine for all three situations but 4th one. For this case you have to have a check to find if window has jQuery object. That can be done with:
if(window.jQuery){
var my_jQuery = $.noConflict(true);
my_jQuery(document).ready(function () {
my_jQuery("#myDiv").html("Hello world");
});
}
Note:
<script type="text/jscript">
would not work in the browsers other than IE.
Im trying to run the below script to understand the Javascript object and inheritance but don't see anything being displayed.
<html>
<head>
<script>
$(document).ready(
function Person(){
alert('New Person Created');
}
Person.prototype.sayHello = new function(){
alert('Hello');
};
var x = new Person();
x.sayHello();
var newfunction = x.sayHello;
newfunction.call(Person);
);
</script>
</head>
<body>
</body>
</html>
$ is defined in jQuery, you need to include jQuery library before using the $
you can include jquery library using cdn like this,
<script src ="//code.jquery.com/jquery-1.10.2.min.js"></script>
The first line of your script is jQuery. If you want to use jQuery you should include it first (based on what you have written I strongly suspect you don't need or want it just yet).
Alternatively, just drop the $(document).ready part and its {}s and that should get you going.
Also, take a look at your developer tools menu and get your JavaScript console open. It will have told you about this error.
When you use a construct like $(document), you are calling a function $, which is defined as jQuery. You need a <script> tag in your document to load the correct version of jQuery. Also, check your browser console. You will see an error there about $
The only thing I can see wrong is that you are trying to use the jQuery library, but you've never actually included it.
I have a script src for a deprecated version of JQuery which I cannot control (controlled externally via a CMS, not cross-domain, just no access to changing it) and I'd like to change the script src to a newer version of Jquery.
Old code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Replace with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Once an external script has loaded, it can't be removed as it's already loaded into memory, so changing the source would just load another version of jQuery without removing the first version, so you'd have two versions of jQuery, creating a conflict, and in many cases nothing will work.
There is a workaround if you absolutely have to:
$(function() {
$j_142 = $.noConflict(true);
$j_142.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
$j_191 = $.noConflict(true);
});
});
FIDDLE
now you have two versions of jQuery mapped, and to use them you'd do:
$j_191('#selector')
of course, this would cause issues with code already written, but you could probably get away with just mapping the second script to a new variable or something ?
EDIT:
You could use a closure to map one of those values back to the dollarsign within the closure:
(function($) { //anonymous self invoking function
// now you could use the dollarsign as normal
$(function() { // document ready function
});
})($j_191);
You can use
var oldJquery = document.querySelectorAll('script[src="js/jquery-1.4.2.min.js"]');
oldJquery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
Once you do this, it will automotically will download coz it is live dom element. All changes should be reflected immediately.
But I would suggest that long term this is not good idea. what if CDN from google is down.
You might be in trouble. Just take precaution while doing this changes.
That easy, this is your code:
$("script[src='js/jquery-1.4.2.min.js']").attr('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js');
This is example http://jsfiddle.net/rebeen/KwLM3/