This is the code I use to show a message on my webpage.
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-migrate-1.0.0.js"></script>
<script>
$(document).ready(function(e) {
alert('success');
});
</script>
However, after the page loads it shows me nothing.
try loading the jquery files from a cdn, unless you're already hosting it-
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
edit:
you say it's already apart of your server, I personally prefer making absolute paths to files..
e.g.
<script src="http://your.server.com/path/to/the/files/jquery.1.9.js"
obviously you'll need to get the actual path, and make sure it's got the correct permissions
Related
I have a page where I have something like this at the end of the page:
<script src="jquery.js"></script>
<script src="onload-test.js"></script>
</body>
</html>
In my network tab it shows everything being loaded using h2 (http/2) and onload-test.js is loaded before jquery.js causing an error
"Uncaught ReferenceError: $ is not defined"
as I am using $(document).ready() in my script. The network tab shows jquery.js being queued for ~200ms.
Under what circumstances can this happen? and how can it be prevented?
use asycn while loading
<script async src="jquery.js"></script>
<script async src="onload-test.js"></script>
You can add jquery reference inside "<head></head>" section for best practice.
Body must contain only body specific js references.
jquery is a kind of global library which should be loaded in the <head></head> section.
You can refer: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
I have a website using twitter bootstrap. When developing sometimes the internet is not working so jquery won't be loaded and my site will not work. This is why I have a local copy of jquery in my js folder. I edited bootstrap files so if jquery is not detected the browser will change the location of jquery from cdn to my local file. I tried to do that but it is not working:Here is my code:
if (!window.jQuery) {
document.getElementById('jq').src='../../js/jquery.js';
console.log("You are using a backup file of jquery provided by our website");
}
else{
console.log("jQuery has been succesfully loaded by kounelios13");
}
html:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" id="jq"></script>
<script src="../../js/bootstrap.js" type="text/javascript"></script>
<script src="../../js/prefixfree.js" type="text/javascript"></script>
<script src="../../js/apps/rgba.js" type="text/javascript"></script>
This is placed inside bootstrap's js file.
Any ideas???
Imaging that CDN file is not available. Then browser starts loading next script file (bootstrap.js), parser enters bootstrap.js, where you placed your check for jQuery. Your code detects that jQuery is not loaded and the script then changes src of the jq tag. It works fine and jQuery starts loading, however browser doesn't wait until jQuery is downloaded and carry on to the Bootstrap stuff, which fails immediately, because it requires jQuery. Hence the error.
You can try this version for backup jQuery library instead which should be reliable:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" id="jq"></script>
<script>
if (!window.jQuery) {
document.write("<script src='../../js/jquery.js'>\x3C/script>");
}
</script>
<script src="../../js/bootstrap.js" type="text/javascript"></script>
<script src="../../js/prefixfree.js" type="text/javascript"></script>
<script src="../../js/apps/rgba.js" type="text/javascript"></script>
With jquery I don't thinks bootstrap script work so you need that.
If you have internet problem then you can copy jquery link and make file of that and attached.
ID must unique for the Document, you have another Element that uses the id jq or none.
How do I use .load if my file is in different folder?
I have tried:
$("#messageWindow").load("http://localhost/MainFolder/Messanging/index.php");
$("#messageWindow").load("Messanging/index.php");
$("#messageWindow").load("../Messanging/index.php");
nothing works, I have read topic about different folders when using URL but I can't seem to make their answers work.
Thanks.
Okay, I have Fixed the problem The 1st and 2nd URL above WORKS but I have another problem. The index.php have tons of URLs.
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script src="../plugins/ui/jquery.ui.core.js"></script>
<script src="../plugins/ui/jquery.ui.widget.js"></script>
<script src="../plugins/ui/jquery.ui.datepicker.js"></script>
<script src="../plugins/timezone/jstz.min.js"></script>
<script type="text/javascript" src="file_js/index.js"></script>
but now those URls are not working anymore, and the solution i took was to add the whole URL.
<script type="text/javascript" src="http://localhost/MainFolder/js/jquery-1.7.2.min.js"></script>
<script src="http://localhost/MainFolder/plugins/ui/jquery.ui.core.js"></script>
<script src="http://localhost/MainFolder/plugins/ui/jquery.ui.widget.js"></script>
<script src="http://localhost/MainFolder/plugins/ui/jquery.ui.datepicker.js"></script>
<script src="http://localhost/MainFolder/plugins/timezone/jstz.min.js"></script>
<script type="text/javascript" src="http://localhost/MainFolder/Messanging/file_js/index.js"></script>
this is a hustle if I uploade the file to my web host. I think using relative pathing would do the trick but I don't know how that works.
For jQuery load() you can include the relative path from the current page or an absolute path. If you run the command below in the JS console or firebug you should see this same question twice in your browser.
$("#header").load("/questions/10643503/jquery-load-url-from-different-folder");
Content also needs to come from the same origin as the original page (you can only load content from the same domain).
so, I have this webpage here [ http://saikonet.org ] and it's not loading the tipsy script. If you go into the source, it's on line 11. Now, the strange part is all the other scripts are loading fine, and if you click on the tipsy script link, it's loads fine in browser, so syntax and filepath are both fine. even stranger is that is was working completely fine last time I checked.. it just stopped working all the sudden. I'm not sure how to proceed..
(and btw, the way I checked whether it's loading or not was via the script tab in chromium's 'inspect element')
It looks like the tipsy script is being loaded before the jquery file where the former is dependent on the latter.
Change:
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
You need to load the jQuery file before you load the tipsy JS file.
In your head section, change this:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
To This:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
On my Chrome it looks like the tipsy script jquery.tipsy.js is being downloaded.
At any rate, I think you may need to put your tipsy script after your jQuery script.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>