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.
Related
This is the index.html with angular-alpha35:
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>APP Ang2</title>
<script src="scripts/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<app>Loading...</app>
<script>System.import('app').catch(console.log.bind(console));</script>
</body>
</html>
And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:
<script src="scripts/system#0.16.11.js"></script>
then nothing works until I put rx.js in the root folder and put this line at the end of the file:
<script src="scripts/es6-module-loader#0.16.6.js"></script>
</body>
</html>
then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.
How to make all this work locally without node.js and without internet connection?
You should include the sfx version of angular 2 like this:
<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>
Note that it's a self contained js file you can download locally.
Check this sample project I made in github:
https://github.com/alfonso-presa/angular2-es5-sample
Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js
Thanks to Arnaud Boeglin's idea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):
<script src="scripts/traceur-runtime.js"></script>
<script src="scripts/es6-module-loader.js"></script>
<script src="scripts/system#0.16.11.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
The es6-module-loader has to be before the systemjs in <head> tag.
Okay I have a js file in htdocs and when I include it in my php page it doesn't work however when I load it from online it works I don't know what is wrong with it.
I have:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test</title>
</head>
I am putting the js file at the bottom of the page and this doesn't work,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/boostrap.js"></script>
<script type="text/javascript" src="js/wpts_slider_multiple.js"></script>
This works,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/boostrap.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/wpts_slider_multiple.js"></script>
try this: src="/js/boostrap.js"> instead of src="js/boostrap.js">
the / is your root path
you can use this absolute path /js/boostrap.js in php, js, css files, and it works fine.
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
You should give full path of your jquery files like
http://example.com/js/boostrap.js
Code
<script src="http://example.com/js/boostrap.js"></script>
<script src="http://example.com/js/wpts_slider_multiple.js"></script>
Either of the following is happening.
Incorrect path - Please check the file paths.
No Read permission for the JS files - If you are sure that the path for the local JS files are correct, check their read permissions.
File does not exist - Simple reason as it states. I believe that it's not the case.
Let me know what you found.
try giving the paths like
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
src='/js/boostrap.js'
Assuming your root is http://localhost then the above link should always resolve to http://localhost/ProjectName/js/boostrap.js whether it's called from
http://localhost/ProjectName/index.php or http://localhost/ProjectName/subdir/index.php
Make sure the js files are present within your folder structures
Always try to give relative paths to your files so that they can be easily found.
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.
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.
I have this code:
<body onLoad="subcatSelection();">
The function is inside a .js file which is included with this code:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
The function contains an alert('hello'); just for testing purposes to see if it gets called, but it doesn't.
The "Page error" or whatever its called on the bottom left corner of Explorer 6 is displayed and when double clicking it it assumes there is an error on LINE x ROW y, which is the body-onload event.
Anybody has an ide?
If you need more input let me know... Thanks
UPDATE:
Some html before the onload event...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" src="bincgi/jsfunctions.js"></script>
<script type="text/javascript" src="bincgi/calendar_eu.js"></script>
<link href="bincgi/main_styles.css" rel="stylesheet" type="text/css">
<link href="bincgi/calendar.css" rel="stylesheet" type="text/css">
<!--[if lt IE 8]>
<link href="bincgi/main_styles_ie_lt7.css" rel="stylesheet" type="text/css">
<![endif]-->
<style type="text/css">
body {
background-color: #fffec7;
background-image: url(Graphics/test_bgr.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body onLoad="subcatSelection();">
If [Juriy] answer didn't work, then try calling your function in your page:
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript" >
alert("first test");
subcatSelection();
</script>
If that doesn't work, it has to be a trivial problem (e.g., file in wrong location, need to re-start browser, clean cache, etc.)) that is giving you troube.
As far as I see from the comments, the problem might be in the other line of search_lists.js (that might be before subcatSelection definition). IE just stops parsing it and doesn't load the function correctly. Try to leave a single function definition in that file and see what happens:
function subcatSelection() {
alert ("Hello");
}
It may be possible that there's a syntax error that it is avoiding the correct definition of the function. Make that function the only function in your .js file, put your test alert("hello!), and try again.
Check the permissions, you are running inside a cgi bin folder which operates a bit different
I would also suggest not mixing your js files with your CGI (who uses cgi anymore)
Because you have the problem on IE6 only from what I understand, I would try to first use Fiddler to determine if your file is downloaded correctly, if it is then I would modify the content of search_list.js to be:
alert('Before def');
function subcatSelection() {
alert('In subcatSelection');
}
alert('After def');
Then create a page like this to see if you get the alerts in that order: 'Before def', 'After def', 'Before Call', 'In subcatSelection', 'After Call'.
At that point, you should know for sure where is the problem if it's still there. If you don't have the error, then start plugging back the pieces one by one (move the call in body onload then try, re-add the code in search_list.js then try, re-add the other JS includes then try, etc.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bincgi/search_lists.js"></script>
<script type="text/javascript">
alert("Before Call");
subcatSelection();
alert("After Call");
</script>
</head>
<body>test</body></html>