Firebase.database is not a function in JavaScript - javascript

I am making a simple login page with JavaScript and Firebase except I keep coming across this error
Untaught TypeError: Firebase.database is not a function
After searching the internet and trying everything, I still have no results. The problem persists on the signUp page when signing up for an account.
I have got to the point where the account will be made and can be seen, but in my real-time database in Firebase console nothing shows up where I am trying to write in the database that I want the inputted ‘firstName’ there.
I have attached the code below:
—Login
https://jsfiddle.net/jLf5q34o/
—SignUp
https://jsfiddle.net/dq8o1tLv/
—I also have the full project online at:
https://inputgeo.com/experiment/
I would appreciate any help from anyone. If I haven’t explained this very well please let me know and I will try to explain this again.

Checking the script requests, you haven't imported firebase-database
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>

Related

webRTC video chat using Firestore

The code lab explaining webRTC and firestore is not clear enough to me.
https://webrtc.org/getting-started/firebase-rtc-codelab
I am having trouble with the final collectICECandidates step. Where should I be calling this function inside the code and how will I get the local and remote parameters required for the function?
I also needed help setting this up. The remotevideo was blank, and I got the 'Got room' in the console when I tried to connect.
To solve this, I found this on the Github's Solution branch:
https://github.com/webrtc/FirebaseRTC/blob/solution/public/app.js
You can find a corrected description in the following fork:
https://github.com/meldaravaniel/FirebaseRTC
And also there's a solution branch, were you can download the whole file from.

Uncaught Failed to get parent origin from URL hash

I am trying to setup google sign in for my web app. Currently, it is In the development state and running on http://localhost:8080/auth. I am using default Sign-In button provided by Google for user sign in. Whenever a new iFrame opens for user authentication, it hangs infinitely. When I checked a console, the following error message was shown there:
Uncaught Failed to get parent origin from URL hash!
Don't know what is the problem. I searched on various platforms but didn't find the solution anywhere, not even a thread discussing the issue. Similar questions are available on SO (1 and 2) but they are unanswered. This is how my simple HTML code looks like:
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="client-id-prefix.apps.googleusercontent.com">
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
Can somebody please help? It will help me and probably other 2 guys who had asked this question today itself.
I found the mistake. I had not registered my domain under Credential -> My OAuth Client ID -> Authorized JavaScript origins. By adding, it started working.
Here are your credentials: https://console.developers.google.com/apis/credentials

ReferenceError:gapi is not defined

I am seeing ReferenceError:gapi is not defined error when accessing the Google+ APIs from my HTML code.
My code is very simple, but not sure what is wrong with it.
Any inputs would be highly appreciated.
Please see my code below:
<html>
<head>
<title> Some title here </title>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function handleClientLoad(){
gapi.client.setApiKey('MY API KEY HERE')};
</script>
<script src="https://apis.google.com/js/client.js? onload=handleClientLoad"></script>
</head>
<body>
</body>
</html>
Error is
Execution failed: ReferenceError: "gapi" is not defined
I'm not sure if this is the answer, but I notice that there is a space between "client.js?" and "onload=". This might not be in your original code, but it does cause the client.js request to return different code.
I was able to fix the issue. I should have added more details to the question but didnt thought that the issue could be somewhere else. Sorry for the same.
When we create a Web App project in Google Drive, the javascript code which runs on the server and the code which runs on the client(a browser) should be specified in different files. These files are Code.gs and JavaScript.html respectively. "gapi" is a client code (defined in client.js) and I was referencing to it in the server file. Since server code is running in the Google servers, it has no clue about our client.js and platform.js libraries. Hence the error. When I moved the error causing code to JavaScript.html, it worked fine.
Thanks.,

Uncaught TypeError when using Google API JavaScript Client

I am developing a simple Tic Tac Toe on Google App engine using cloud endpoints. My API name is tictactoe2D.
I have only 1 endpoint method by the name tictactoe2D.compute2DMove() in my API which I have tested in the APIs explorer, and is working absolutely fine.
Now I am working to create the front end of the game, and using Google APIs JavaScript Client library to communicate with my endpoint method. I have followed exactly the same procedure as shown in the Getting Started page, which is a complete tutorial on using the library.
Here is code snippet from board.html, which loads the Javascript library-
<head>
<title>Tic Tac Toe 3D</title>
<meta http-equiv="content-type" charset="utf-8" content="text/html"/>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onLoadCallback"></script>
<script type="text/javascript">
function onLoadCallback() {
gapi.client.setApiKey('AIzaSyB7p7mH_vZGgtrbF4ntmKN2nBcsRyRFY1w');
gapi.client.load('tictactoe2D', 'v1');
}
</script>
<script type="text/javascript" src="js/render.js"></script>
</head>
And here is the code from render.js, which add the functionality to deal with click event of all squares, and also communicates with my endpoint method-
$(document).ready(function() {
$("#board td").click(function() {
$(this).html("X");
var boardString = [];
var buttons = document.querySelectorAll('td');
for (var i=0; i<buttons.length; i++) {
boardString.push(buttons[i].innerHTML);
}
boardString.join('');
gapi.client.tictactoe2D.compute2DMove({'state': boardString}).execute(function(resp) {
document.write(resp.result.state);
});
});
});
Here is the JSFiddle for the whole code.
Problem occurs when I try to click one of the squares on the game board. Unexpectedly, nothing happens.
I opened up the JavaScript console in Chrome, and found out that the console showed the following error whenever I click on a square-
Uncaught TypeError: Cannot read property 'compute2DMove' of undefined
I have not been able to figure out why is this happening, and how can I fix it. Can anybody please help me out?
Thankyou very much in advance.
I ended up fixing the bug myself after I observing a new error on the JS console- The error was-
Failed to load resource: The server responded with a status of 403 (Forbidden)
I checked the JSON object that the server returned, and the object was something like this-
{"error":{"errors":[{"domain":"global","reason":"sslRequired","message":"SSL is required to perform this operation."}],"code":403,"message":"SSL is required to perform this operation."}}
After seeing this, I guessed that a secure connection(HTTPS) was not used to connect to the app, and that is why server was not loading the required data. To fix this, I needed to mandate that a secure connection be used every time the app is loaded. For this, I added the following tag to web.xml-
<security-constraint>
<user-data-constraint>
<transport-guarantee>CONFIDENTIAL</transport-guarantee>
</user-data-constraint>
</security-constraint>
I updated my app on appspot, and checked the JS console. There was no error there, and my endpoint method executed too. I hope this information if helpful to anyone who faces a similar issue.
Also, I found out that the gapi library had some stability issues in the past, and the best way to safeguard your API calls against any possible flaws is to construct a REST request using gapi.client.request(), instead on making JSON-RPC requests. (see, Constructing REST requests using gapi.client.request). Constructing REST requests might be lengthy and cumbersome, but is safe too.

Error in console: uncaught error history.js adapter has already been loaded

I'm creating an small module for activeCollab composed by some webpages. I'm using PHP and Javascript/jQuery/AJAX. When I enter into the main page of the module I'm creating everything is working fine, but if later I try to go to other modules my web application is crashing. Is not showing any information. The only way for reviving it is refreshing the navigator.
If I check the error console of my navigator, I see that when I'm exiting from my custom webpage it says
`Uncaught Error: History.js Adapter has already been loaded...`
The header of my HTML file has this information:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
And this code is making my Javascript functions work properly.
What can be happening? I googled and I didn't found much information about this issue. Every help would be appreciated.
Finally I solved it, the problem was that my application is loading by default its own jQuery file and there was a conflict between this one and the ones I was trying to import. The solution was easy: I only had to delete the lines I wrote inside the "head" tag.
Thanks for your help!

Categories

Resources