Index.html
<html>
<head>
<script type="text/javascript" src="/js/jcors-loader.js"></script>
<script>
JcorsLoader.load(
"js/jquery-1.8.0.js",
"/js/alertme.js",
function() {
$("#result").text("TEST OK");
}
);
</script>
</head>
<body>
<h1 id="result"></h1>
</body>
</html>
alertme.js
alert("Loaded");
This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.
I wrote that library, remember these three tips to use it.
Not invoke a script add the inline content.
Put the script tag after the .
IE7 works but blocks onload.
First thing to check is that you're not using console.log anywhere in your javascript as this can cause funny issues with IE.
The next thing to do is check the documentation on the library you're using as it may not be compatible with IE 9 and below (have you tried it with IE 10?)
Related
EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.
Please anybody helps me.
I made a JS(target.js as below) which makes iframe like below.
I'm not sure with the cause, but onload function doesn't work on IE 9,8.
When I deleted the script tag, the onload function works and window scrolled to anchor.
<body onload="location.hash='#hashparam';">
HTML
<!-- Target part -->
<script params="parameters" src="target.js"></script>
<iframe src="target.html?parameters">
<html>
<head>
</head>
<body>
<script src="target-inner.js"></script>
many iframes which are made by the script tags
</body>
</html>
HTML
</body>
Does anyone know the cause?
If you know about it, please teach me.
// target-inner.js
isIE = /MSIE/.test(window.navigator.userAgent);
isIE10 = /MSIE 10/.text(window.navigator.userAgent);
if (isIE10 || !isIE) {
doc.clear();
doc.open;
}
doc.write("<html><head></head><body>");
doc.write(text);
doc.write("</body></html>");
if (isIE10 || !isIE) {
return doc.close();
} else {
return;
}
I found the cause.
On IE9, iframe blocks body onload function.
And then, in my script there no document.close() with IE9.
onload function is blocked forever because of it.
But, in my script if I add document.close() after document.write with IE9, IE9 is crushed.
So I change the way to implement, I added the main function to body onload part.
It works.
Thank you fmodos for your kindness.
I tried using the method described at w3 schools but it seems to only work in FireFox
http://www.w3schools.com/jquery/jquery_ajax.asp
I used the example provided on the Try It
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").load('test1.txt');
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
</body>
</html>
I just set it to run onload instead on after clicking. It did work there but when I make my own page it only works in FireFox.
Edit: Chrome just has security to prevent local file access it works on a server.
If anyone knows how this would work in older IE versions it would be a help
Your example works in the Chrome 18.
You can try this way:
$(document).ready(function(){
$.get('test1.txt', function(response) {
$('div').html(response);
})
});
I recommend to take a look at jQuery AJAX function. It can use cache and it's better then using the "sub-alias" $.get.
So the page is rendered like this:
<!DOCTYPE html>
<html>
<head>
<script>
head.js("js/jquery.js",
"js/jquery.autocomplete.js");
</script>
</head>
<body>
...
stuff here
...
<script>
jQuery(document).ready(function($){ // fail...
$('body').removeClass('no-jquery');
// ...
});
</script>
</body>
</html>
The scripts seem to load and all in Opera, but in Firefox 5 and Chrome (don't know the version because it changes every day) I get a error:
jQuery is not defined
[Break On This Error] jQuery(document).ready(function($){
So I guess jquery is not really loaded by head.js in these browsers? Or I'm doing something wrong?
jsfiddle: http://jsfiddle.net/LDUUd/
Try switching to head.ready() instead of jQuery.ready().
Here is an example of it working - is this what you have?
You're calling head.js() without
<!-- assuming it's in the same directory as the page -->
<script src="head.min.js"></script>
first.
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.