Consider the following script (Also at http://jsbin.com/yegike/1/). If I try to create variable map before including the google maps link, I get a ReferenceError: google is not defined error. Without moving the link before the script, is it possible to eliminate this error? Even if the answer is "no", I would appreciate an explanation on what is happening.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> -->
<script>
(function($){
var map = new google.maps.LatLng(47.64864, -122.348927);
}(jQuery));
</script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</body>
</html>
You're trying to call a method named maps within the google namespace which is defined in your commented out script. The solution for this is to use the jQuery.ready method to execute your code when the page has been loaded (including your script include at the bottom of the page). Wrap your function within this and you should be good to go:
$( document ).ready(function() {
var map = new google.maps.LatLng(47.64864, -122.348927);
});
For more information about ready you can check out the always useful jQuery API:
http://api.jquery.com/ready/
Perhaps try this which waits until the page is loaded and if it takes google a while to load, then it will try again:
var map;
function makeMap() {
if (google && google.maps) { // google loaded?
map = new google.maps.LatLng(47.64864, -122.348927);
return;
}
setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
makeMap();
});
Related
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
</body>
</html>
When run this page localy from desktop in Chrome - it works (russian words after page page load translate to english). So it works well in snippet here!
But when put page to website and run like normal site from web - it DONT WORK (russian words dont translate). Webpage here: http://www.shram.kiev.ua/bak/1.shtml
Error: Uncaught TypeError: google.translate.TranslateService is not a constructor
I really dont know js but i trully need fix. Help pls. And pls give fix to my topic, because i read all topics about "is not a constructor" but dont understand :(
You need to load the translate library before you try to use it. On an HTML page, <script> tags are loaded in the order they appear, so you need to move the script tag loading Google translate above the script tag where you are trying to use it.
I have this very simple html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/exampleView.js"></script>
</body>
</html>
And the javascript files that are included in the bottom are:
app.js:
$(function() {
var model = new DinnerModel();
var exampleView = new ExampleView($("#exampleView"));
});
dinnermodel.js:
var DinnerModel = function(){
// some js stuff
}
exampleView.js:
var ExampleView = function () {
// more js stuff
}
This runs fine for me, and my question is: why? When app.js is included in its script tag, dinnermodel.js and exampleView.js have clearly not been loaded yet, so I should get an error in app.js saying that DinnerModel is not declared, right?
Because $(function() {}) waits until dom is ready and that means the other scripts have loaded before the code inside it gets executed
Great question.
It works because you're waiting for the document to be ready, please refer to this website. https://learn.jquery.com/using-jquery-core/document-ready/
Doing $( document ).ready(function() { or $(function() { is the exact same thing.
By the time the page executes the function inside $() the whole content was loaded and ready to use.
I am new at JS and never tried Handlebars before. I'm trying a very bare-bones example from a tutorial. I have downloaded handlebars-v4.0.5.js from the Handlebars website and included it in my page, as follows, along with a template I precompiled, name-table.js. I'm trying my god damned hardest to complete this tutorial but I can't, because when I run the following code, I get ReferenceError: Handlebars is not defined which I can't for the life of me understand, if the file I downloaded from Handebars' own site is in any way valid.
<html>
<head>
<meta charset='UTF-8'>
<title>Test Page!</title>
<script type='text/javascript'>
function init() {
document.getElementById('button').addEventListener('click', buttonClick, false);
}
function buttonClick() {
var injection = Handlebars.templates['name-table'];
document.getElementById('button').innerHTML = injection;
console.log('hello, world.');
}
window.addEventListener('load', init, false);
</script>
</head>
<body>
<button id='button'>Button</button>
<div id='content'></div>
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
</body>
</html>
Edit:
The answer I marked solved the problem. Another error appears in this code, and I want to let anyone reading this know that var injection as defined in this code is a function, not a string as I had thought. This code will work if rel is changed to src as in the answer given, and if we use document.getElementById('button').innerHTML = injection(); (note the parens).
You are not loading in Handlebars (or your name-table script). You currently have the following markup:
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
You should be using the src attribute instead of the rel attribute for script tags.
<script type='text/javascript' src='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' src='js/name-table.js'></script>
The Mozilla documentation does not specify the rel attribute as a valid script tag attribute.
Include this line:
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
You are done.
Thanks.
Trying to get an mp3 sound to play with a javascript class but not working. I am not familiar with javascript so I thought it would not be vary different from Java or C. however i do not know why this is not working. this is for an Android app that has built in wikitude. Wikitude uses javascript for adding any functionality to its use of the Android camera class.
trying to use the sound class and nothing i have tried seems to work.
http://www.wikitude.com/external/doc/alr/Sound.html
Here is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function(){sound.play();},
onError : function(){
},
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>
<title></title>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="../ade.js"></script>
<script src="js/marker.js"></script>
<script src="../ade.js"></script>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<script src="js/multiplepois.js"></script>
</body>
</html>
You can't use something before it's defined, which in your case, is AR. Assuming AR is defined in your architect.js file, you need to move the inline script to somewhere after the library is loaded.
<script type="text/javascript" src="architect.js"></script>
<script type="text/javascript">
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function() {
sound.play();
},
onError : function() {}
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>
Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>