How do you use JQuery to load HTML fragment from another file? - javascript

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.

Related

jcors-loader.js not working in IE7

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?)

head.js and jQuery issues in Chrome / Firefox 5

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.

My first dig at jQuery

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.

JQUERY won't work on local machine

I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>

Replacing a document body on the iPhone

I need to be able to replace the entire document content with a response obtained from an ajax request.
I have tried assigning to document.body.innerHTML and also tried using document.write().
While both of these are functional on desktop Safari, I need a solution for the iPhone/iPod Touch. Attempting to modify document.body.innerHTML produces exception 7 and the document.write() function is undefined on mobile safari.
I am essentially displaying an activity indicator while waiting for a form post to complete. I do not want safari to begin rendering the response until it completes in it's entirety as it could take some time to complete.
I just tested on my 3G iphone and it worked fine by setting document.body.innerHTML. I did use jQuery in my test to make sure the body was loaded before running the js:
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
document.body.innerHTML = 'it worked';
});
</script>
</head>
<body>
This is a test
</body>
</html>

Categories

Resources