Issue with dojo dijit.form.ValidationTextBox - javascript

The following XHTML code is not working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/dojotoolkit/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="/dojotoolkit/dojo/resources/dojo.css" />
<script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad: true" />
<script type="text/javascript">
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dojo.parser");
</script>
</head>
<body class="nihilo">
<input type="text" dojoType="dijit.form.ValidationTextBox" size="30" />
</body>
</html>
In Firebug I get the following error message:
[Exception... "Component returned failure code: 0x80004003
(NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement.innerHTML]" nsresult:
"0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame ::
http://localhost:21000/dojotoolkit/dojo/dojo.js :: anonymous :: line
319" data: no] http://localhost:21000/dojotoolkit/dojo/dojo.js Line
319
Any idea what is wrong?

The problem seams to be the ending of the file...
If I name the file test2.html everything works.
If I name the file test2.xhtml I get the error message.
The diverence between the two seams to be the Content-Type in the response header from apache.
For .html it is Content-Type text/html; charset=ISO-8859-1
For .xhtml it is Content-Type application/xhtml+xml

Where you import dojo.js:
<script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad: true"/>
It should be:
<script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
Have fun with dojo, it's can do some cool stuff.
Brian Gianforcaro

The problem is that innerHTML is an unofficial property that is not part of the W3C specifications, and thus may or may not work depending upon the browser, especially when the page is being rendered as a XHTML file rather than a HTML file. See here and here.

Well, what is dojo.js doing at line 319?

Are you sure your pointing to the right path in the script tags?
I put it up on the web, check it out.
The left is Dojo parsed input, the right is an regular old input.
Link
I'm on OS X, using firefox 3.0.1 I get no errors under firebug.

There are some similar tickets on the dojo trac page:
http://trac.dojotoolkit.org/search?q=xhtml+ns_error&noquickjump=1&ticket=on
Probably you are facing a bug and you will need to fill a new ticket.

Related

External JS file not working in XHTML

I have a file named Reservation.xhtml and in it, I have the script tag in which the external js file is called.The Reservation.xhtml contains a form that i have downloaded from a website and also its javascript which i saved into "validate.js"
<script src="validate.js" type="text/javascript"></script>
When using Reservation.xhtml, the functions in the validate.js are not being called but when i change the extension of Reservation.xhtml to Reservation.html..The form works fine..So can anybody tell me why the validate.js works in the Reservation.html and not in the Reservation.xhtml.. Please suggest me how to make it work in Reservation.xhtml
According to my tests, there is nothing wrong with the thing you're doing.
I created such file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Strict document</title>
</head>
<body>
<p>This is a strict XHTML document.</p>
<div id="validate" style="color:red"><tt>validate.js</tt> has not been called!</div>
<script src="validate.js" type="text/javascript"></script>
</body>
</html>
Linked script would alter the innerHTML and style of the div - and it worked in Firefox.
Now while it seems that the file extension and doctype do not matter, there are things that do.
Specifically, tagName which is a HTMLElement property, is different in HTML and XHTML:
In XHTML (or any other XML format), "span" would be alerted. In HTML, "SPAN" would be alerted instead. - MDN
This might cause your script not to perform some operations.

Dygraph is not working

I was trying to use Dygraphs in web application. Please see below simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyHtml.html</title>
<!--[if IE]>
<script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/rgbcolor.js"></script>
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph.js"></script>
<script type="text/javascript" src="/js/CanvasRenderingContext2D.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"), "Date,Temperature\n" + "2008-05-07,75\n" + "2008-05-08,70\n" + "2008-05-09,80\n");
</script>
</body>
</html>
If i include the line
type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"
with the scripts it works fine in firefox and chrome and it wont work in IE, it gives error like 'CanvasRenderingContext2D' is undefined. If i download the dygraph-combined.js and include it in my web application and access it by giving path, it wont work in all three browsers, it gives an error message Dygraph not defined. Please help me. I want to know why this is happening.
You should only need to include dygraph-combined.js, whether from your website or your own site. Did you include excanvas.js on your site? This could explain why it's not working in IE8.
The problem might be that scripts which are in /js/... are not accessible for any of your browser.
It explains why in the case you refer to remote dygraph-combined.js, only IE doesn't work - it needs excanvas.js referenced from /js/...
In the case you downloaded dygraph-combined.js and replace the remote reference to /js/... then no browser works as they can't access the /js/dygraph-combined.js
Check accessibility of /js/dygraph-combined.js and /js/excanvas.js. Should there be the reference without leading slash e.g.: js/dygraph-combined.js?
And as previously mentioned, remove all other script references (except dygraph-combined and excanvas.js). Dygraph-combined already contains everything in one file and excanvas is needed for IE.

ColorBox error in IE "Object doesn't support this property or method"

I am trying to add a jquery colorbox to my webpage using the code below:
<!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>
<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function ()
{
$(".popup")
.colorbox({iframe:true, innerWidth:695, innerHeight:340, overlayClose:false });
})
</script>
<a class='popup' href='http://www.bbc.co.uk'>bbc.co.uk</a>
</body>
It works for both firefox and chrome. But when I run it in IE7 I get the following error:
Object doesn't support this property or method
Any help would be amazing.
More than likely you have a <script> tag that is invalid or that contains a type attribute set to something other than text/javascript.
Without seeing that part of the code, we can't figure out exactly what is wrong.
More information
Script tags must have a closing </script>. <script /> will not work in all browsers.
Additionally, the type attribute must either be text/javascript or not present. If it is application/javascript some versions of IE will not execute it.

Include JavaScript file in HTML won't work as <script .... />

I'd like to include a javascript file on every page of a site. I can do this with:
<script type="text/javascript" src="myFile.js" ></script>
This works fine - however as there's nothing between the two tags, I wanted to change it to:
<script type="text/javascript" src="myFile.js" />
If I do this, it doesn't work - nothing after that line loads on the page.
Any ideas why? Thanks
Unfortunately, the HTML specs for REQUIRE a closing tag...
HTML Standard, section 18.2.1
18.2.1 The SCRIPT element
Start tag: required, End tag: required
This is not a bug, it's standard behavior.
Also, empty HTML elements are often not rendered:
<div style="background:red"></div> displays, <div style="background:red" /> doesn't
HTML doesn't support self closing tags. If you want to use them you need to use an xml based doctype AND serve the file as xml.
XHTML or the xml serialisation of html5 would both work.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML5 Template</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js" />
</head>
<body>
</body>
</html>
Save this in a file with a .xhtml extension and open it in a modern browser and the self closing tag will work.

"Permission denied" with Internet Explorer and jQuery

I try to do an AJAX call with jQuery and $.post in Internet Explorer, but all I get is an error saying "Permission denied". The problem is kinda weird since it occurs only when I access a page after I was on any other page.
For instance I type the URL in the adress line and let IE load the page. Then I click on a button so the script should start loading JSON data. (The script providing the data lies on the same server and I access it with a relative URL, so using a different domain is not the problem here. Even tried to use a absolute URL with the same host part.)
But when I refresh the page then and try it again it works! Same thing when I come to that page from another page. At first nothing works, but when I click "refresh" everything is fine.
IE gives me the error message "Permission denied" while in every other browser I don't notice this behaviour. Since I have tried many things and still cannot imagine where the problem lies I'd like to ask you what you think the problem might be?
edit:
A small example:
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<script type="text/javascript" src="/ietest/jquery.js"></script>
<script type="text/javascript" src="/ietest/test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Test
</body>
</html>
ajax.html
It works!
test.js
$(document).ready(function(){
$( 'a' ).click(function(){
$.post( '/ietest/ajax.html', function( data ) {
alert( data );
});
});
});
Try it here: http://t1318.greatnet.de/ietest/test.html
From the post on jquerys forum here, you have to have the content type meta as the first item in your head tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/ietest/jquery.js"></script>
<script type="text/javascript" src="/ietest/test.js"></script>
</head>
<body>
Test
</body>
</html>
If its local (localhost), then for security reasons you have to have the full path.
In my case, changing the jquery version worked. Instead of using version 1.9.1, now I'm using 1.12.4 and it works.

Categories

Resources