Graphael pie chart error? - javascript

I'm adding these headers corresponding to my local system path
<script language="javascript" src="/js/graphael/raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.pie.js" type="text/javascript"></script>
But I'm getting JavaScript error like:
Raphael is not defined in g.raphael.js file

latest version of g.raphael and raphael are not compatible with each other. They changed their API and never really bothered to document it properly

Are you sure the paths to the files are correct? You can inspect them using firebug, or add an alert statement to each of the files and verify that they are run.

Related

index.HTML does not recognize script in folder (chrome)

I am creating a browser based game with phaser, which involves linking to an external javascript file with my own code in it. For some reason when I use either
<script type="text/javascript" src="/js/main.js"></script> or
<script type="text/javascript" src="js/main.js"></script>
to link the javascript to the HTML, no 404 is thrown but the script does not run. However, if I move main.js to the root directory and put
<script type="text/javascript" src="main.js"></script>
in the exact same spot, the script runs fine. Any theories as to why this is? I am using chrome version 57.0.2987.133. Thanks in advance!
It should be:
<script src="./js/main.js"></script>
You had a simple scoping error and forgot the script's src.

Twitter bootstrap not working from local files

When I include my script like this - loading bootstrap.min.js from a local file on disk, it does not execute my browser code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" </script>
I know it can find the file, because if I introduce a misspelling in the file name, Chrome complains, but otherwise not. Same behavior from IE-Edge by the way.
However if I include from the cdn network like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Everything works fine. The setup was suggested in a Coursera course on bootstrap and seems to work for most people, but not all. I am kind of puzzled. Is there a browser/internet setting that is preventing me from executing bootstrap from the disk or something that I am missing?
just change
<script src="js/bootstrap.min.js" </body>
To
<script src="js/bootstrap.min.js"></script>
You probably have not closed your code
Here
<script src="js/bootstrap.min.js" </body>
should be
<script src="js/bootstrap.min.js"></script>

Javascript files not working when linked, but work internally?

I've never had a problem until recently, but for some reason when I link my JS files, they won't execute at all. jQuery works, but any files that require jQuery such as easing, and other concept files, they refuse to run in any browser on my machine.
But, here's the odd part. If I wrap all my code in 'script' tags within the HTML document, everything works fine; no issues, bugs, anything. (jquery.js is still linked to the document too).
I'm using Dreamweaver, which tells me they are correctly linked. I'm totally lost by this, I can't work it out.
Here's the HTML: http://jsbin.com/iyagub/1
I don't understand what could cause the JS files to not work.
I'm running it locally, but not on localhost, instead via Windows Explorer. I'm on Windows 8 64-bit. I'm not sure if this is a security issue, but I can't see how as I've said; it all worked fine before like any other project I've worked on.
Remember, if I paste any of the code from the linked JS files in to the HTML document directly with script tags, it works flawlessly.
Does anyone have any idea what it could be?
In your JSBin example:
<script src="js/script.js" type="text/javascript"></script>
<script src="js/totop.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
Change the order to:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/totop.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
Your problem arises from jquery not being loaded into the document before other scripts try and use it.
If you open your URL in a browser with an opened console: e.g. Firefox + firebug
you will notice some of your scripts are failed to loading.
For example :
http://jsbin.com/iyagub/js/easing.js
is not found.
This could be due to many reason:
Wrong paths?
Wrong server configurations?
A misplaced .htacces with bad Rewritecond -s ?

webpage not loading javascript script

so, I have this webpage here [ http://saikonet.org ] and it's not loading the tipsy script. If you go into the source, it's on line 11. Now, the strange part is all the other scripts are loading fine, and if you click on the tipsy script link, it's loads fine in browser, so syntax and filepath are both fine. even stranger is that is was working completely fine last time I checked.. it just stopped working all the sudden. I'm not sure how to proceed..
(and btw, the way I checked whether it's loading or not was via the script tab in chromium's 'inspect element')
It looks like the tipsy script is being loaded before the jquery file where the former is dependent on the latter.
Change:
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
You need to load the jQuery file before you load the tipsy JS file.
In your head section, change this:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
To This:
<script src="/js/modernizr-1.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>
On my Chrome it looks like the tipsy script jquery.tipsy.js is being downloaded.
At any rate, I think you may need to put your tipsy script after your jQuery script.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/js/jquery.tipsy.js"></script>

Jquery/Javascript conflicts?

I just implemented a multi-language mod onto my website.
Problem is that there seems to be a conflict between the javascript files from the language mod and the javascript files that already were on the page.
<!-- language files here -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/translationEngine.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.translate-1.3.9.min.js"></script>
<script>var browserlang = 'en';</script>
<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="js/jquery.flow.1.2.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/concept.js"></script>
js/jquery-1.3.2.min.js is what makes the 3 image slider on the homepage work, but... it seems to also be interfering with the functions of the translator.
If u remove js/jquery-1.3.2.min.js from the page, the translator works fine, but the slider no longer works.
removing js/jquery-1.4.2.min.js from the page doesnt make the translator work either, in fact it seems to cause more errors in the back.
Can someone guide me in the right direction that would allow me to make the language translator and image slider both work?
http://filefx.com
Thanks :)
The short version is to remove this:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
And update your plugins, there are likely 1.4.x versions out there for each of them. By including jQuery a second time, like you are currently, it'll wipe out plugins and cause all sorts of issues...the first step is removing the second (hopefully the older) instance.
Edit: Here's an updated version of jFlow called jFlow plus that works with 1.4.2.
Check out the jQuery noConflict function. This function tells jQuery to relinquish it's control over the $ variable. This way, other libraries can use it.
The online docs give a pretty good guide as to how to use this function. It saved me a few times.
Example from the online docs:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Basically, once you call noConflict, you can still use jQuery, just use it using the jQuery variable name instead of $.
Hope this helps!
I have alway solved conflicts between two versions of jquery e.g. jQuery 1.3.2 and jQuery 1.4.2 on the same page using iframes but i recently found out that you can use version jquery-1.5.1.js alone and everything works fine.
I change all the .js file on the page used from below code:
<script>
var K = jQuery.noConflict();
alert(K);
jQuery(document).ready(function () {
alert("Bye");
});
</script>
It works fine now.
I ended up just changing the order in which the libraries loaded.
I let all the jquery libraries load first, from newest to oldest. Then i called for the javascript files that rely on jquery.
It works fine now.

Categories

Resources