I’m just starting with jQuery, and having trouble doing something embarrassingly simple: using .load() to insert external HTML into a main page.
Here’s the main page:
<html>
<head>
<script src="js/jquery-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".log").ajaxError(function() {
$(this).text('Ajax error.');
});
$('.result').load('external.html', function() {
$('.log').text('Loaded.')
});
});
</script>
</head>
<body>
<div class="log">
</div>
<div class="result">
</div>
</body>
</html>
And here’s external.html:
<p>Some external content!</p>
When I open this page in my browser, “Loaded.” is inserted into the .log div, but the external HTML is not inserted into the .result div. Also, even if I delete external.html or rename the file, it still says “Loaded.” If the file can’t be found, shouldn’t that be an Ajax error? It doesn’t seem .load() is grabbing the data.
Edit: Based on chrissr’s suggestion, I changed the code:
$(".result").load("external.html", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$(".log").html(msg + xhr.status + " " + xhr.statusText);
} else {
var msg = "Everything worked fine!";
$(".log").html(msg);
}
});
When I run this, it inserts “Everything worked fine!” into the .log div.
Edit 2: Just tried it out in Firefox, and it works! (I was using Chrome before). I thought that jQuery works with Chrome, right?
Edit 3: Problem solved! I was opening the file locally (as in file://). I think this was causing security issues or something. Anyway, now I know I just have to throw it on my web server first if I want to test in in chrome.
Problem solved! I was opening the file locally (as in file://). I think this was causing security issues or something. Anyway, now I know I just have to throw it on my web server first if I want to test in in chrome.