How to find error in script running in IE? - javascript

This is my JSP Page , where i am using the below JS Files
<link rel="stylesheet" type="text/css" href="/html/js/graph/finance.css"/>
<link rel="stylesheet" type="text/css" href="/html/js/graph/excanvas.js"/>
<script type="text/javascript" src="/html/js/graph/canvastext.js"></script>
<script type="text/javascript" src="/html/js/graph/prototype.js"></script>
<script type="text/javascript" src="/html/js/graph/scriptaculous.js"></script>
<script type="text/javascript" src="/html/js/graph/flotr.js"></script>
<script type="text/javascript" src="/html/js/graph/HumbleFinanceReal.js"></script>
<script type="text/javascript" src="/html/js/graph/canvas2image.js"></script>
The Page works fine under Mozilla , but when i run the same page under IE , it shows
A Runtime Error has Occured
Line 629
The JSP is of only 10 Lines of code .
Hw can i know where is the Error in IE ??

Have you tried F12 developers tools (just press F12)?

Right click on page and select view source, then you will be able to see 629th line.
The line number displayed in error considers all included js and dynamically
generated code so it's showing error on line 625 though your jsp is of 10 line only.

I suggest you try the IE Developer Tools (F12). This might give some more information. You could also try to remove all your JS scripts and add one at a time to see what triggers the error.

Related

How to use marker area learn

Right now I'm working with Three.js , Aframe and AR.js .
I'm following Jerome's example :
https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/multi-markers/examples/player.html
I've included his library in my project sample and I'm trying to figure out why this happens :
When I'm on the player.html page , everything's working , the console doesn't display any error , just a warning :
stop profile.trackingBackend() obsolete function. use .trackingMethod instead
(But I don't think this is causing the problem)
And then , when I click to scan the markers , the button works , the function behind executes , I get redirected to the learner.html webpage , but all import scripts are getting 400 error code and aren't loaded on the website so nothing's working.
What I did : I've checked the scripts via online tools , line by line , copy paste try.They're the same , when I say the same I mean the learner.html page has 3 less scripts imported than the player.html , the common scripts syntax is the same on both pages.
What I noticed : If I try to access the webpage without the options in the URL the page is perfectly working ... well , the page is giving me some output about the missins options but the scripts are loaded , but I need the options :(
The problem with the scripts imports I think it's caused by that object included in the URL webpage , weird thing because it has some other things added in the player webpage as well and it's working.
I'm using NodeJS v4.2.6 & NPM v3.5.2 & Express v4.16.4
This is the way how I handle the requests for these 2 page in NodeJS:
app.get('/multiMarkers4', function (req, res) {
res.render( pathView + 'player.ejs', { pageName:"player", errorMsg:"" });
});
app.get('/learner', function (req, res) {
res.render( pathView + 'learner.ejs', { pageName:"learner", errorMsg:"" });
});
Yes, I've changed the files from html to ejs and moved them into the /views ( only these 2 learner.ejs and player.ejs )
For scripts I've created some specific paths in Node :
app.use('/three', express.static(__dirname + '/three.js'));
The learner.ejs and player.ejs webpages have pretty much the same code as they have in the Jerome's GitHub repository , the only modified thing are the import scripts :
This is in player.ejs and it's working
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
<script src='/three/examples/multi-markers/examples/threex-screenasportal/threex-screenasportal.js'></script>
<script>THREEx.ScreenAsPortal.baseURL = 'threex-screenasportal/';</script>
When I'm on player.ejs page the URL is :
https://x.y.z/multiMarkers4#%7B"trackingBackend"%3A"artoolkit"%7D
When I'm on player.ejs page the console log in devTools is :
THREE.WebGLRenderer 86
threex-artoolkitprofile.js:145 stop profile.trackingBackend() obsolete function. use .trackingMethod instead
ARjs.Profile.trackingBackend # threex-artoolkitprofile.js:145(This is that warning,the rest of the output is just simple output)
artoolkit.min.js:1 Allocated videoFrameSize 1228800
artoolkit.min.js:1 Pattern detection mode set to 1.
artoolkit.min.js:1 Pattern ratio size set to 0.500000.
This is in learner.ejs and it's working WITHOUT THE OPTIONS IN URL :
<!-- three.js library -->
<script src='/three/examples/vendor/three.js/build/three.js'></script>
<script src='/three/examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='/three/vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- aruco -->
<script src='/three/vendor/js-aruco/src/svd.js'></script>
<script src='/three/vendor/js-aruco/src/posit1.js'></script>
<script src='/three/vendor/js-aruco/src/cv.js'></script>
<script src='/three/vendor/js-aruco/src/aruco.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='/three/src/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include threex.artoolkit -->
<script src='/three/src/threex/threex-artoolkitsource.js'></script>
<script src='/three/src/threex/threex-artoolkitcontext.js'></script>
<script src='/three/src/threex/threex-artoolkitprofile.js'></script>
<script src='/three/src/threex/threex-arbasecontrols.js'></script>
<script src='/three/src/threex/threex-armarkercontrols.js'></script>
<script src='/three/src/threex/threex-armarkerhelper.js'></script>
<script src='/three/src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '';</script>
<script src='/three/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='/three/examples/multi-markers/threex-armultimarkerlearning.js'></script>
When I'm on learner.ejs page the URL is :
https://x.y.z/learner?%7B"backURL"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4%23%257B%2522trackingBackend%2522%253A%2522artoolkit%2522%257D"%2C"trackingBackend"%3A"artoolkit"%2C"markersControlsParameters"%3A%5B%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fhiro.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fkanji.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fa.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fb.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Fc.patt"%7D%2C%7B"type"%3A"pattern"%2C"patternUrl"%3A"https%3A%2F%2Fx.y.z%2FmultiMarkers4patts%2Ff.patt"%7D%5D%7D
As I said , for https://x.y.z/learner the scripts are included but I don't have the options and I need them
When I'm on learner.ejs page the console log in devTools has the 400 response from server for all scripts :
Failed to load resource: the server responded with a status of 400 (Bad Request)
How can I import these scripts and keep the options so I will be able to learn the marker area?
Ok, I'll put here the answer to my question.
After posting this question, I've tried to change back from EJS to HTML and see if there's any difference, still the same results.
So I chose the hard way: I've made some changes in the library, to sum it up:
I've kept the way how I access the file e.g: via /learner & without any parameters in the URL, But I need them, so I've moved them on the web localStorage and just used them from there on the website part and that worked.

toastr Notification not showing up

I've included toaster.css, toaster.js and jquery like that:
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/toaster.js"></script>
<link rel="stylesheet" type="text/css" href="QtApp/Notifications/toaster.css" />
and i am sure that the paths are correct. But when I try to call toaster.pop(..) or toaster.error(..) the respective functions are called and executed but no popup is shown. Any idea why that happens?
The js file you are referencing looks like it has a typo
<script src="Scripts/toaster.js"></script>
should be
<script src="Scripts/toastr.js"></script>
The same with your css.
When you go to the 'sources' tab in the browser dev tools are you able to navigate to the js and css files?

This JQuery website wont work on IE11 f or some reason(Fade in's etc)

I know this code should be working as i've done other websites where it works on both.
http://johslan.tk/
refuses to work in IE 11( The buttons dont do anything)
If you load the page in IE11 and then go to the Console in the F12 developer tools, you see the following Script error:
SCRIPT5009: 'jQuery' is undefined
File: jquery-ui.min.js, Line: 1, Column: 3
Which indicates the page is loading JQuery-UI before it loads JQuery.
Looking at the source on http://projoh.altervista.org/ I see you have the following HTML:
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try switching the two tags and I am guessing it will fix the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
Hope that helps.

jQuery Toggles Plugin (Toggle Buttons)

I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**

Jquery Mobile Button Issue

I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.

Categories