Chrome - jquery headache

**codecat** · January 5th, 2014, 03:14 PM

Hi all,
I am new to programming and have a predicament, my document.ready function is working in firefox and safari, but not in chrome, I have tried changing the function to window.load function and still nothing .
please help

thanks

**the_cat** · January 6th, 2014, 05:21 AM

You mention jQuery in the title - why not put your code inside the jQuery document ready function?

Code:

$(function(){
// your code goes here
});

**codecat** · January 6th, 2014, 05:40 AM

Originally Posted by the_cat

You mention jQuery in the title - why not put your code inside the jQuery document ready function?

Code:

$(function(){
// your code goes here
});

I have the code within the jquery document.ready function, the problem is it will not categorically work in chrome, its not syntax, its not window.load its not the version of jquery or chrome itself (all up to date). The only other possible issue it could be is allow access all files and trying to repair or fix that on a mac is impossible so all in all a headache

**the_cat** · January 6th, 2014, 05:59 AM

I have tested it with the latest version of Chrome on Windows 7 and it seems to be working fine. Maybe the problem lies elsewhere?
Here's the full listing of my test file and it duly pops up an alert on IE11, FF26, and Chrome (31.0.1650.63 m):

Code:

<!DOCTYPE html>
<html>
<head>
<title>Test document.ready</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
	alert('document ready');
});
</script>
</head>
<body>
Testing document.ready function
</body>
</html>

**codecat** · January 6th, 2014, 06:09 AM

Yes the alert fucntion document.ready works great however, I am trying to display an external html file within an html file using document.ready, the reason for this is, I am developing a website with a nav bar as expected however, I want the said nav bar to stay at the top of the page and the pages to change as clicked underneath

**codecat** · January 6th, 2014, 06:16 AM

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#test").load ("#header.html");

});
});
</script>
</head>

<body>
<div id="test"></div>
</body>
</html>

heres the source code

**the_cat** · January 6th, 2014, 06:20 AM

You shouldn't have the hash in front of "header.html".
The other thing to note (see the documentation: http://api.jquery.com/load/ ) is the same origin policy: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol"

**codecat** · January 6th, 2014, 06:24 AM

ive tried it without the # and no luck as to the same origin policy how do I fix it?

**the_cat** · January 6th, 2014, 06:56 AM

Run it from a web server. It appears to be a Chrome bug to do with CORS (cross origin sharing) : http://code.google.com/p/chromium/is...etail?id=67743
If you're running it from localhost then the AJAX call won't work in Chrome.
If you open the developers console in Chrome (F12 on Windows) then you get the error "XMLHttpRequest cannot load" (header.html) "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

**codecat** · January 6th, 2014, 07:06 AM

ok so running it on a web server is the answer? if I 'publish' the website and launch in chrome should that do it? that XMLHttPRequest message is exactly what I get on the mac

**the_cat** · January 6th, 2014, 07:59 AM

Try it - it should work! Assuming that the webserver supports the Access-Control-Allow-Origin header which it probably does (or can be made to).

**codecat** · January 6th, 2014, 08:04 AM

right but how do I repair the access control allow origins bug because having to publish before testing seems a bit of a stretch just for checking? also is their a javascript function that I can use to do the same thing? im sure there has to be a quicker easier way of having the same menu appear on multiple pages? can I also just say thank you ever so much for all your help its been really great

**the_cat** · January 6th, 2014, 08:18 AM

I can't help with the first part of your query I'm afraid. If you Google the problem there is mention of starting Chrome from the command line with security disabled: http://babbeg.com/2012/02/06/disable...n-with-chrome/ - maybe that will help?
In terms of having the same content on multiple pages, it will depend on your web server. If it supports ASP then you can #INCLUDE the same file on multiple pages: http://www.w3schools.com/asp/asp_incfiles.asp
PHP supports this too: http://www.w3schools.com/PHP/php_includes.asp (in fact this example is exactly for having the same menu on multiple pages).

**codecat** · January 6th, 2014, 08:49 AM

IVE PUBLISHED AND IT WORKS ON CHROME!!!!!

Thanks ever so much you are a life saver!!!!

**the_cat** · January 6th, 2014, 08:51 AM

You're welcome - glad it worked!

Thread: Chrome - jquery headache

Thread Tools

Display

Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Re: Chrome - jquery headache

Posting Permissions