I created an application using Firebase-CLI and I wrote a code to redirect when the user logged in to another location also when he did not. But when I try the serve it's not working
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>JTM Check</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- update the version number as needed -->
<script defer src="/__/firebase/6.0.2/firebase-app.js"></script>
<script defer src="/__/firebase/6.0.2/firebase-auth.js"></script>
<script defer src="/__/firebase/init.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
</script>
</body>
</html>
and here is the error
(index):15 Uncaught ReferenceError: firebase is not defined
at (index):15
(anonymous) # (index):15
remove defer from your scripts
when present, it specifies that the script is executed when the page has finished parsing. so your script is executing before firebase is loaded
Related
I'm looking to do a simple process using the skypack (https://cdn.skypack.dev/) module in javascript.
I have described the following script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<button id="button" onclick="mybutton">click</button>
<!-- <script type="module" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined -->
<script type="text/javascript" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module
import { METHOD } from "<modulename>";
function mybutton(){
console.log("aaa");
// ... snip ...
}
</script>
</body>
</html>
However, the module does not work in the script tag.
I have tried two things.
import in the script tag.
This gave me the following error.
Uncaught SyntaxError: export declarations may only appear at top level of a module.
It seems that you need to use <script type="module" when importing a module.
do script type="module" .
This gave the following error:
Uncaught ReferenceError: mybutton is not defined.
It seems that the function defined directly below is not found.
What can I do to resolve these?
I will post the code that worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="button">click</button>
<script type="module">
document.getElementById('button').addEventListener('click', mybutton);
import { METHOD } from "https://cdn.skypack.dev/.../<modulename>";
function mybutton(){
console.log("aaa");
// METHOD(arg); ...
// ... snip ...
}
</script>
</body>
</html>
I try to make dynamic page that needs to load math symbol lazily, and so I need to call MathJax after all my math symbol has finished being loaded. I tried to read MathJax doc and found this: http://docs.mathjax.org/en/latest/advanced/typeset.html but when I did as it told, I get "ReferenceError: MathJax is not defined" error in console. How can I solve this? Here's my html code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div id="main" class="container">
<p>\(A \cup B\)</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function () {
$("#main").append("<p>\\(A \\cup B\\)</p>");
MathJax.typeset();
})
</script>
</body>
</html>
Cause
By specifying async in your <script> tag, you are loading the MathJax-script in an asynchronous way, meaning your browser is downloading the MathJax library in background, while it continues to execute the rest of the page's content.
Chances are that your document is ready, so your browser executes the call MathJax.typeset(); before it finishes loading the library, causing this unknown reference error.
Suggestions
You can remove the async property, to force the browser to load the library first, then execute the rest of the scripts.
Or you can use defer property, to asynchroneously load the scripts and ensure that the scripts are executed in the right order (they rely on each other).
Related topics you might be interested in:
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-async
Script Tag - async & defer
Async and document ready
async="async" attribute of a <script> tag in html, What does it mean?
I am working to create an Angular 6 application. Locally everything works great. I hosted the site. I had a friend check on their end if the application works, and it does. No error or anything. On my end I am getting errors in bootstrap, polyfills.js, vendor.js, and main.js.
bootstrap(141,1) error:
Object doesn't support property or method 'bind'
vendor.js(258,13) and polyfills.js(7442,5) all have the error:
Expected identifier, string or number
main.js(1151,6):
Expected identifier
But I believe all issues are rooted with main.js
The code snippet from the error main.js
if (_environments_environment__WEBPACK_IMPORTED_MODULE_3__["environment"].production) {
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["enableProdMode"])();
}
Object(_angular_platform_browser_dynamic__WEBPACK_IMPORTED_MODULE_1__["platformBrowserDynamic"])().bootstrapModule(_app_app_module__WEBPACK_IMPORTED_MODULE_2__["AppModule"])
.catch(function (err) { return console.error(err); });
/***/ }),
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IdmStatus</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
The error is pointing at the .catch line.
I'm not sure what would be causing this. Any help is appreciated
I've made an application with a PouchDB frontend that is stored as a CouchDB attachment.
I have this html page stored at localhost:5984/repository/b/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/repository/b/pouchdb.min.js" type="text/javascript"></script>
<title>practice</title>
<div id="practice">
</div>
</head>
<body>
<div id="app"></div>
<script src="/repository/b/build.js" type="text/javascript"></script>
<script src="/repository/b/store.js" type="text/javascript"></script>
</body>
</html>
Pouchdb.min.js is successfully stored at the src referenced in the head. I try to reference it in store.js:
var db = new PouchDB('http://localhost:5984/repository');
var text;
var b = document.getElementById('practice');
db.info().then(function(info) {
text=info;
}).then(function(){
b.innerHTML=text;
});
I get the error
ReferenceError: PouchDB is not defined
When I look in my debugger, in the application section of chrome, it shows that the pouchdb file contents are loaded. In the network section, all of my resources are showing 304 errors.
Can anyone guess what might be going on here?
I am just learning and trying to test my javascript with Jasmine framework.
My javascript is just setting placeholder attribute of textarea to blank.
function clearPlaceholderTextOnFocus(i) {
i.placeholder = '';
}
I am calling this function on onClick event of textarea.
I wrote below code in Jasmine spec-
describe("Test suite for clearPlaceholderTextOnFocus",function(){
it("Should set placeholder to blank", function(){
var i=affix('textarea[name="message"][placeholder="write your message here..."]');
clearPlaceholderTextOnFocus(i);
var placeholderval = $('i').attr('placeholder');
expect(placeholderval).toHaveValue('');
});
});
When I run this code by double clicking on SpecRunner.html then I am getting below error -
Error: jasmine-fixture requires jQuery to be defined at window.jQuery or window.$
Below is my SpecRunner.html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.5.2</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.5.2/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.5.2/jasmine.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<script src="lib/jasmine-2.5.2/jasmine.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-html.js"></script>
<script src="lib/jasmine-2.5.2/boot.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-jquery.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-fixture.js"></script>
<!-- include source files here... -->
<script src="src/myfirst.js"></script>
<!-- include spec files here... -->
<script src="spec/myfirstSpec.js"></script>
</head>
<body>
</body>
</html>
What is wrong with my spec code? or do i need any other setup to run this?
Update - Including
Did you import Jquery in your SpecRunner.html? Like this
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>