jquery causes dygraph to crash - javascript

Already searched the whole web for a solution. First i used jqplot for the visualization of a mysqldatabase, but with growing arrays i'm trying to switch to dygraph, moreover its optimiesed for timedate, the problem is i cannot get it to work on ie explorer <9 especially with regard to the document modus. also tested ietester....
the page of dygraph itself works with the graphs, copied the important parts from it but still cannot get it working, maybe someone can show me my mistake or is it better not to use dygraph?anyone makes use of this and gets it working for internetexplorer 6-8?
The problem is the jquery document.ready function without it everything works fine...
<!DOCTYPE html>
<html>
<head>
<!-- Framework,Diagramm-Klasse,Jqplot,Jqplot Plugin -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurationstool</title>
<script type="text/javascript" src="jquery-test.js"></script>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80], [3,50,60], [4,70,80]]
);
});
</script>
<div id="diagrammpreview" style="height:500px;width:500px;"></div>
</body>
</html>
thanks in advance

What does the debug console in IE say the problem is? It's probably either a race condition or a conflict with the $ variable. You can try to use a pure javascript alternative the ready/load function such as:
window.onload=function() {
g = new Dygraph(document.getElementById("diagrammpreview"), [[1,10,100], [2,20,80[3,50,60], [4,70,80]]);
});

I had the same problem in IE and FF.
$(window).load(function) {
instead of
$(document).ready(function) {
helped, together with including the jquery library directly into the html file (although it was included in my CMS)

Related

Calling javascript script from html

I have a simple javascript file like so:
$(document).ready(function () {
alert("my controller");
});
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/js/generateLineupController.js"></script>
</body>
</html>
for the love of all things holy why in the world would the alert not show? I get a 200 on GET for the javascript file, so it's loading.
Several problems here.
You're trying to load the script twice for some reason. Don't do that. Load it in <head>, or at the end of <body>, but not both.
You're trying to use jQuery syntax ($(...)), but you haven't loaded the jQuery library. You'll need that.
The $(document).ready(...) indicates that you are trying to use jQuery, but you aren't loading jQuery in your page. Check your console log; you will see the errors there.
Also, there's no need to load the script twice with two <script> tags; just load it once.

Javascript Runtime error: $ is undefined

I have added script in my Default.aspx page. I am getting following error.
$ is defined by jQuery, which you probably haven't referenced. A simple way to get it is to add one of the CDN urls to your template HTML:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
You need to include jQuery: http://learn.jquery.com/about-jquery/how-jquery-works/
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
**<script src="jquery.js"></script>**
</head>
<body>
...
</body>
</html>
I had the same problem, but did have a correct reference to jQuery.
I solved it by referencing jQuery before any other scripts. In your case, it would look like this:
<script src= "scripts/jquery-ui.js" />
<script src= "scripts/JavaScript_scroll.js" />
Hope this helps anyone else with a similar issue.
I had the Same Problem as that $ is Unidentified, After a long struggle, I come to know that there is some thing HTML coder error in Master Page, So it worked fine when i include the Jquery files directly in Content page
(For others who may face the same problem as OP's)
I had the same problem, but the reason was that I was trying to load my jQuery script before loading the jQuery library itself. In other words, make sure that you first add this line:
<script src="Scripts/jquery-{version}.min.js"></script>
before adding
<script src="Scripts/JavaSript_scroll.js"></script>

Get selected text on IPad 2 with Javascript

I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>

css not being applied to document.write text

I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.

Why does this javascript code prevent my browser from ever loading?

I'm learning javascript and jquery and have written a very basic script inside my file. I'm experiencing two problems...
The browser never finishes loading the document, it just sits there with the loading icon animating in the tab. Any ideas?
I can't seem to debug this using firebug. When I set a breakpoint anywhere in the document load function, it never hits. Any ideas?
Here's my code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link media="screen" type="text/css" href="default.css" rel="stylesheet">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var strMarkup = "";
var strXMLFile = "";
//Parse XML and generate accordion elements
var arrayAccordianElements = ParseXML(strXMLFile);
});
function ParseXML(strPath)
{
var arrayEvents = new Array();
arrayEvents[0] = "test1";
arrayEvents[1] = "test2";
arrayEvents[2] = "test3";
//Return the accordian elements
return arrayEvents;
}
</script>
</head>
<body>
hello
</body>
</html>
As you experts can see, my webpage should simply display "hello" after processing some javascript that creates an array inside of a function. Do you see any problems? I apologize if they're obvious problems, I'm a noob :)
Thanks in advance for all your help!
Runs fine for me in Safari 4.0.3. Make sure your path to jQuery is correct? If it is incorrect and there's something misconfigured and jQuery fails to load, that will hang indefinitely.
Code-wise I don't see anything that would cause an infinite loop at all. However, knowing firefox etc, there may be a variety of things out of your control. Start with restarting the browser. Profile the script with Firebug (Console > Profile > Reload the page > Press profile again), and see what part takes most time.
One thing, probably unrelated, close your link tag. is sufficient.

Categories