This one has me absolutely at wits end. For my site I am using ajax to replace the content of a DIV. Every other page will work fine in all browsers, however there are some links under my Portfolio tab that are not. They are "photography", "interactive", "print", and "traditional". When I try to click on those using IE8, they returned a "Permission Denied" in my jquery.js file on line 2, character 3238. The jQuery file has been updated to the latest version available. The only special attribute with these four pages is they have a pagination script and a shadowbox.js script. If I load those pages alone outside of AJAX, the code works fine. From my testing, the scripts work fine in everything else, minus slow speeds on the images but I will fix that later. If anyone has any solutions at all, it would be greatly appreciated. I tried answers from a few things around here but none of them have fixed this.
My site is located at http://codyshawdesign.com
As I can quicky see, it is not relative to JQuery, but to the way you do your async requests.
This URL renders errors on IE: http://codyshawdesign.com/#traditional,
<script id=__ie_ondomload defer=true src=//:></script>
First of all, correct your AJAX request.
Do not return a full HTML document to insert it in your page. Only the content you need !
And because it is the same page, directly include your scripts and CSS in your index document.
All this shouldn't be part of your AJAX response!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Traditional</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
counterType: 'skip',
}
[......]
});
</script>
</head>
<body>
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've got a page I'm adding as a Web Resource in a dynamics CRM form. I've developed the code outside the iframe and it works standalone in IE (9+) and Firefox navigating directly to the resource URL. (edited)
Coming back to testing the code embedded in CRM after a days standalone development and now; none of the scripts run when loaded as part of the CRM form. I've tested this by adding small alert scripts at every stage of the javascript load (as follows), now these work in all browsers as far back as IE5, but not when loaded within an IFrame on the CRM form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
alert("1");
</script>
<!-- etc.. -->
I've also tried creating a local page to load my page in an iframe which also works as expected:
<!DOCTYPE html>
<html>
<head>
<title>Iframe test</title>
</head>
<body style="background: Red;">
<h1>Hello, World!</h1>
<iframe width="500" height="500" src="http://server:5555/...">
</iframe>
</body>
</html>
as this issue only occurs in an IFrame I've run out of ideas for how to debug it. My best guess would be the issue is a conflict with code in the parent page but even then I'd expect my alert at the entry point of the html file would run.
I'm not sure at what point yesterday the code stopped working and don't have a backup unfortunately. I'd appreciate any speculation on why scripts would be abandoned within an IFrame, tips on any extra debugging steps I could try... or a solution =p.
Turned off "Restrict Cross-frame scripting" in the properties for the web-resource on the form which solved the issue.
Thanks for all the help though!
Have you tried adding it as a web resource rather than an iframe? There could be some xss security kicking in. Web Resource should get over that. The Web Resource also has other advantages (dependency aware etc).
A website I wish to tweak is using window.location in order to redirect specific users to a blocking page. That website is doing it in plain <script> tag, so it is impossible to bypass it by overriding the onload event using document.body.setAttribute('onload','');.
Is there another way to inject my code to the page without using Firefox extensions such as NoScript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
if (1) window.location="http://example.net"
</script>
</head>
<body></body>
</html>
This question is tagged "Greasemonkey", but GM cannot/will-not run your script before the redirect script fires. You'd have to write a firefox add-on to do that. Might poke around https://addons.mozilla.org/en-US/firefox/ first.
Sometimes you can use adblock to stop the load of the offending script.
NoScript might be the most cost-effective way, if the site's usable without javascript (although GM javascript will still run -- so you could replace lost functionality with GM code, maybe).
This question appears to be related to this one.
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.
I am trying to make my pages work correctly with IE 8, I found out from here: http://www.masykur.web.id/post/How-to-Make-Our-Website-to-be-Ready-for-IE8.aspx
that, my page has to be XHTML 1.0 compliant and atleast CSS 2.1 compliant, I made my page and CSS compliant with only few warnings, but still window.onload() is not firing. Does anybody encountered this problem?
here is the code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<title>Testing</title>
<link rel="stylesheet" href="test.css" type="text/css"></link>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
window.onload = function()
{
// Not coming here at all on first shot
}
</script>
</head>
<body>
.
.
.
However refreshing the page seems to make it work.
Am I missing something here?
UPDATE:
One of the IE addons created this problem, after disabling its working fine. Thanks for your time and answers :)
For IE try:
window.onload = new function() { alert('hello');};
This is a pretty old thread but I found a solution that might help others.
I was adding a function to window.onload via a dynamically injected script (really to mimic an external script load for reasons which are not important in this context). As stated in this post, on the first load within IE8, the window.onload would not fire, but all subsequent calls would.
I found out that if I put this in the HTML file as an internal script, it would work everytime:
var windowOnload = window.onload || function() {};
window.onload = function() { windowOnload(); };
All the above code does is "initializes" IE8's window.onload unobtrusively. I suspect that IE8 fails to trigger window.onload the first time if it is called from an external script as the onload event isn't attached yet to window (or in tech terms, its typeof is undefined). It seems that the first time that's what IE8 is doing: attaching onload to window without executing it properly.
The above code then becomes quite obvious: We are merely forcing IE8 to recognize the onload event. We don't care what gets executed, or what doesn't, so we simply make sure to pipe on through any existing window.onload code that is already defined (just as a precaution).
It is important to have this as an internal script to the HTML (at least from my testing).
Your HTML would thus look something like this (the relevant parts):
<script type="text/javascript">
var windowOnload=window.onload||function(){};window.onload=function(){windowOnload();};
</script>
<script type="text/javascript" src="script.js">
</script>
From my testing, after clearing cache, and reloading the page, I have gotten window.onload to successfully trigger each time.
I hope this helps.
You could have an error in your JavaScript's, if that happens, any JavaScript after that will not function correctly.
Try to remove the reference to login.js and common.js and try an alert within your problematic function.
I don't have IE8 to personally test, but what does this test do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test IE 8</title>
<script type="text/javascript">
/* <![CDATA[ */
window.onload = function(){alert('Good morning!');}
/* ]]> */
</script>
</head>
<body>
<h1>Hello</h1>
<body>
</html>
If this test works as expected, try the CDATA bit around your internal JavaScript block.
And then, if that does not work as expected, there is probably something in the external JavaScript above it that prevents your onload from firing. The previous poster mentioned this. At that point, try your error console or debugger to point the way.
onload fires after ALL your content has loaded (including external images etc). It's possible those resources are taking a long time to load on the first go (before they are cached). Another possibility is an error in your code that only affects IE as is stopping your scripts (but only the first time is odd).
If you are getting different results using Apache vs. another web server (IIS?) and comparing the end result using IE8, then the differrence must be in the content type header being sent. Get the wget utility for your platform and see the headers that are produced. If you are on Windows, then the Portable Apps version of the GUI wget is pretty nice.
The following code works for me. When I load the page in Firefox I see the alert instantly. When I first load the page in IE 8 it warns me about active content. If I allow the blocked content it asks me to confirm, which I do. Then the alert appears as expected. If this does not work for you, try IE 8 on a different computer or start eliminating code in your page to check for errors. You could do a binary search: comment out the first half of the page and see if the alert appears; if it still does not, then uncomment out the first half and comment out the second half. Repeat as needed until you've narrowed it down to the offending code. Incidentally you don't need XHTML for IE8 compliance. HTML works fine and actually has some advantages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function() { alert('hello');};
</script>
</head>
<body>
</body>
</html>
I know this is kinda old question, but I just faced the same thing.
window.onload=function() { alert('hello');};
is treated differently than
window.onload= new function() { alert('hello');};
The keyword here is new.
My JS was terminating whenever it reaches (onload=) part until I added the word'new' before 'function'. Even though it worked fine without 'new' in my localhost, but once I put it online, it doesn't work until I add 'new'.
Old question but I had the same issue but it turned out to be another problem. My problem was that I did <script type="application/javascript"> which <IE9 does not understand or try to run even. For it to work for older browsers you still have to use text/javascript even though this isn't technically the correct type...