I am trying to get into jquery/ajax and I can't even believe I can't get past this first test. I'm following an example I found at The Jquery API site and I followed it just about to a T.
I created a local folder on the desktop, and added 2 files.
index.html
and
list1.html.
Index.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="stage">
</div>
<script>
$( "#stage" ).load( "list1.html" );
</script>
</body>
</html>
list1.html
<div id="list">
<li>Test</li>
<li>Foo</li>
<li>Bar</li>
</div>
I was trying for like 15 minutes to run index.html in chrome and nothing displayed (like the jquery wasn't loading correctly). Out of pure curiosity I opened it with firefox and it displayed as expected.. something like this
Test
Foo
Bar
So is this a browser issue? Why does Chrome and IE not show this loaded list, but firefox does? I can't figure out if it's my code or the environment which is infuriating when trying to learn.
Try launching chrome / chromium with --allow-file-access-from-files flag set
See How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?
Try
<script>
$(function(){
$("#stage").load("list1.html");
});
</script>
If still not works, check the Network section in the Developer Tools of your browser and see if there are any HTTP or Security errors.
Related
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/
I have a very simple page that is loading 4 scripts.
jquery 2.0.3
jquery ui 1.10.3
knockout 3.0.0
knockout mapping 2.4.1
This only happens in IE. I have tried it in both 10 & 11;
I navigate to the url and the page loads fine. if I refresh the page still OK. If I go to the hit Enter in the address bar expecting it reload, it does but I get SCRIPT70: Permission denied errors, saying permission denied. Any ideas? Is this a local security settings policy with IE?
Here is the markup:
<html>
<head></head>
<body>TEST
<script src="/MyVirtualDir/Scripts/jquery-2.0.3.min.js"></script>
<script src="/MyVirtualDir/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/MyVirtualDir/Scripts/knockout-3.0.0.js"></script>
<script src="/MyVirtualDir/Scripts/knockout.mapping-2.4.1.js"></script>
</body>
</html>
I am not sure if this will help but this worked for me in IE10
Here's something to try:
Make sure that HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_OBJECT_CACHING\iexplore.exe is not set to 0 (it should be 1 or missing)
Reference: http://forum.jquery.com/topic/strange-behaviour-in-ie9
I don't think it has anything to do with jquery/js
Or Try this: Tools>Internet Options>Security tab, click "Reset all zones to default"
I am trying to create a small, simple JS framework for education purposes, but now I've got a problem I'm unable to solve.
Directory structure
/
/framework
jquery.js
init.js
/content
home.html
style.css
index.html
The problem
I'm obviously not pasting the jQuery file and stylesheet here, but here are index.html and init.js:
index.html
<!DOCTYPE html>
<head>
<script src="framework/jquery-1.5.min.js"></script>
<script src="framework/init.js"></script>
<title>My website</title>
</head>
<body>
<div id="content">
</div>
</body>
</html>
init.js
$(document).ready(function(){
if(!window.location.hash) {
$("#content").load("../content/home.html", function() {
alert("Load was performed.");
});
}
});
The home.html file contains some sample text, nothing special. I expect jQuery to load the contents of home.html into the content div, but nothing happens when I load the page. The alert with the message "Load was performed" is fired, however.
This task seems quite trivial to me so the mistake I made is probably quite silly, but any help is nevertheless very much appreciated.
Thank you!
Update:
It works when I use this on my server, but in localhost it fails. I can't use the Firebug trick now, because it shows nothing when I use it locally.. Any ideas?
The load function is broken in jquery 1.5 release. You can find the bug ticket at http://bugs.jquery.com/ticket/8125. This is fixed in version 1.5.1 which is not yet released to google and microsoft cdn. You can find the very latest jquery release with all the latest fixes including load() at http://code.jquery.com/jquery-git.js
I tested and confirmed that your code works in 1.5.1
If you're using Firebug, open the NET tab. It allows you to see the ajax response.
Chances are you should be using: /content/home.html, not ../content/home.html
The path is in context to the page, not where the JS file resides.
The base location for the executing script is the location of index.html, so the relative path to home.html is "content/home.html", and not "../content/home.html".
just try it with ./
$(document).ready(function(){
if(!window.location.hash) {
$("#content").load("./content/home.html", function() {
alert("Load was performed.");
});
}
});
that is working for me at least.
I try to insert JavaScript code to YAHOO.widget.Dialog.setBody(...), bit this does not work in Chrome (I have Ubuntu) (In Firefox the code is working)
The html file (simple example that not working in chrome browser):
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/container/assets/skins/sam/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.2r1/build/container/container-min.js"></script>
</head>
<body class="yui-skin-sam">
<script type="text/javascript">
previewDialog = new YAHOO.widget.Dialog("previewDialog", { width: "600px", visible: true});
previewDialog.setBody('<h2>h2 text h2'+'<script>'+'alert("alert text alert");'+'<'+'/script>'+'</h2>');
previewDialog.render(document.body);
</script>
</body>
</html>
How can be my code fixed for working in chrome?
(In real project I try to insert more complicated javascript code)
I don't have a solution, but I am having the same problem.
I opened up Google Chrome's built in developer console and see several warnings:
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix?core.apexpages.devmode.url=1:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
SkillsMatrix?core.apexpages.devmode.url=1:3
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.….0/build/animation/animation-min.js&2.7.0/build/container/container-min.js.
SkillsMatrix:1
[blocked] The page at https://c.na15.visual.force.com/apex/SkillsMatrix?core.apexpages.devmode.url=1 ran insecure content from http://yui.yahooapis.com/combo?2.7.0/build/container/assets/skins/sam/container.css.
I think the problem (at least for me) is that Chrome is most vigilantly enforcing a "Same Origin Policy" (cf. http://en.wikipedia.org/wiki/Same_origin_policy ).
The Force Times ( http://theforcetimes.wordpress.com/ ) currently writes about using an "AJAX Proxy" which may help to resolve some such issues. (His article is SFDC-centric but perhaps the principle will help if this is the problem you are having and you can establish your own proxy somewhere.)
It requires additional button-min.js and element-min.js with corresponding CSS as well.
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.