I'm still learning Angular and Google Map API, and I'm having a sort of road block. I'm trying to fetch the map language using angular variable, like this way
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
When the page finish loading, I can see that the &language=xx is printed fine on the script source, though the map is still in English :(
I think google map loads, just before the language parameter get's printed. Is there any other way to solve this?
Additional: All of my script files are located at the bottom of my page
<body>
.
..
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language={{language}}&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootbox.min.js"></script>
<script type="text/javascript" src="localize.js"></script>
<script type="text/javascript" src="route-planner-widget.js"></script>
</body>
I have thought that maybe, I should call the google map script after my angular script (route-planner-widget.js) finish loading first, but it seems, it's not working either.
Related
Problem
I have the following problem that I can't fully understand what is happening and why.
One specific page is attempting to use $.fn.ajaxQueue .
When I load this page on my locally (using localhost:8080) I get the error:
TypeError: $.fn.ajaxQueue is not a function[Learn More]
When I load the deployed page (same code), I don't get the error but I get a warning:
jquery-1.7.1.min.js:4 Synchronous XMLHttpRequest on the main thread
is deprecated because of its detrimental effects to the end user's
experience. For more help, check https://xhr.spec.whatwg.org/.
Series of Imports
The series of <script> statements is the same on both local and deployed.
I am noticing that the JQuery <script> tag is not firstt. Shouldn't JQuery be the first thing that is imported???
<link href='scripts/jquery/src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/utils/jquery.tablednd.js"></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
<script src='scripts/jquery/jquery/jqueryBeforeTooltip.js' type='text/javascript'></script>
<script src='scripts/jquery/jquery/jqueryAfterTooltip.js' type='text/javascript'></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery/src/jquery.dynatree.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.css"/>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
Questions
Why would the error/warnings be different depending on if the server
is localhost or another domain? Is there a logical reason or is it a
configuration difference?
Is the list of imports correct? Shouldn't JQuery be first?
Can I add a try/catch to the statement trying to use $.fn.ajaxQueue and if it is undefined, dynamically load it and try again?
It turns out, that there were javascript imports on a specific page that was breaking the page. After we deleted the duplicate imports, everything worked fine:
<script src='js/jqueryFileupload/jquery.ui.widget.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.iframe-transport.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.fileupload.js'
type='text/javascript'></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
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>
I came across a "Ext is not defined" issue in ExtJS 4.
I am actually testing the example here to starting learning ExtJS 4.
I have my example script file included:
<script type="text/javascript" src="orderRead.js"></script>
<script type="text/javascript" src="order.js"></script>
as well as these ExtJS script files:
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
but the problem is still there. Attached is the error message from Firebug:
Put the script tags for the Ext library before the script tags for your example files, so that they are loaded when your code runs.
You should include the ext-base.js and ext-all.js files in following order.
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
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.
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>