I have a long function that I'm using in multiple places in my code but I've realized my function is not even being called. Copying-pasting would lead to a disaster. Are there any way to call a custom function inside of a Firebase function?
My test:
I call this function at the first line after the trigger but nothing appears on the console logs.
function test()
{
console.log('function executed');
}
Related
I'm a beginner in Ionic and Firebase. To learn using ionic+firebase, I'm writing a RandomQuote app to fetch a random entry from Firebase. A reload() method is called when I click a reload button, and the random quote is displayed as expected.
However, I also want the quote to display when the app is loaded, i.e., before I click the reload button. I call the reload() method in the constructor but it doesn't work. I have tried to search for answers on the web but cannot find anything that I could understand. Not sure if I'm searching the wrong keywords or in the wrong domains.
The following is the reload() method that I put in my FirebaseProvider class and called from my home.ts:
reload(){
this.afd.list('/quoteList/').valueChanges().subscribe(
data => {
this.oneQuote = data[Math.floor(Math.random() * data.length)];
}
)
return this.oneQuote;
}
Can anyone give me some hints? Or any pointer to useful books / materials for beginners will also be highly appreciated. Thank you very much.
Data is loaded from Firebase asynchronously. This means that by the time your return statement runs this.oneQuote doesn't have a value yet.
This is easiest to say by placing a few log statements around your code:
console.log("Before subscribing");
this.afd.list('/quoteList/').valueChanges().subscribe(
data => {
console.log("Got data");
}
)
console.log("After subscribing");
When you run this code, the output is:
Before subscribing
After subscribing
Got data
This is probably not what you expected. But it completely explains why your return statement doesn't return the data: that data hasn't been loaded yet.
So you need to make sure your code that needs the data runs after the data has been loaded. There are two common ways to do this:
By moving the code into the callback
By returning a promise/subscription/observable
Moving the code into the callback is easiest: when the console.log("Got data") statement runs in the code above, the data is guaranteed to be available. So if you move the code that requires the data into that place, it can use the data without problems.
Returning a promise/subscription/observable is a slightly trickier to understand, but nicer way to doing the same. Now instead of moving the code-that-needs-data into the callback, you'll return "something" out of the callback that exposes the data when it is available. In the case of AngularFire the easiest way to do that is to return the actual observable itself:
return this.afd.list('/quoteList/').valueChanges();
Now the code that needs the quotes can just subscribe to the return value and update the UI:
reload().subscribe(data => {
this.oneQuote = data[Math.floor(Math.random() * data.length)];
}
A final note: having a reload() method sounds like an antipattern. The subscription will already be called whenever the data in the quoteList changes. There is no need to call reload() for that.
From what I have seen using a debugger, calling:
require(["menu/main-menu"], function(util) {
Will load the main-menu.js file, but the function is called before the global code in the required .js file is executed? Is this correct?
If so, what is the best way to have all that code executed before my function is called?
The problem I am trying to solve is I want the code in mani-menu.js to all be in a module. But I can't call any method in that module until the global code in there is executed which creates the module.
I can call a global method in there which then creates everything, but that then requires a global init() method in every .js file (each with a unique name).
What's the best way to handle all this?
Update: There's a more basic question here (maybe). In writing javascript (and I use Sencha Ext JS & TypeScript), I need to create my objects. So when I go to create say my main menu, I want to call a method in my main-menu.js file to get that Ext JS derived menu object I created.
I think all the code in main-menu.js should be in a namespace, including the method I call to get the menu object. Is that correct? In addition, the way most Ext JS code is set up is you have several Ext.define() calls as well as other variable instantiations, and then the function that takes all that, builds the full menu, and returns it. But that requires all that code has executed in main-menu.js before I call it.
Am I approaching this correctly? My experience to date is Java & C# and I may be trying to fit that model incorrectly to javascript.
Let's suppose menu/main-menu.js contains this:
define(function () {
// Module factory function
return [... whatever you want to expose...];
});
And your application does this:
require(["menu/main-menu"], function (util) {
// Require callback.
});
What happens is:
The require call loads menu/main-menu.js.
The define in menu/main-menu.js is executed.
The module factory function (the function passed to define) is executed.
The require callback is executed with the symbol util set to
what the factory function in menu/main-menu.js returned.
As for simulating namespaces, there are multiple ways to do it. For
instance, you can do it like this:
define(function () {
return {
foo: function () {},
bar: function () {},
[...]
};
});
This exports an object with two functions in it. You can then use it
like this:
require(["menu/main-menu"], function (util) {
util.foo();
util.bar();
});
RequireJS also supports a CommonJS-style of defining modules:
define(function (require, exports, module) {
exports.foo = function () {};
exports.bar = function () {};
[...]
});
This is functionally equivalent to the first way I defined the module
earlier: you get the same two functions and you use them in the same
way as I've shown above.
Unfortunately, I can't speak about Ext JS specifically because I don't
use it.
Have a look at this:
function doGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
if(//here i need check)
{
Save();
}
}
else
{
positionError(-1);
}
}
So in the inner 'if' i would like to check if the navigator.geolocation.getcurrentposition(); has successfully completed. Any help will highly be appreciated.
Thanks..
getCurrentPosition does its own check on success, and calls a different function depending on the result.
In your function, on success a function called positionSuccess will be called; if the geolocation fails then positionError will be called.
So you need to provide a function called positionSuccess() which can do the saving. You don't need to do your own check.
Bear in mind that getCurrentPosition will take some time. This is handed off to a separate process [this is called asynchronous processing], and your code will continue to the next line. In your current code, execution will reach the "here I need check" test well before the geolocation result has been found. This is why there are other functions to handle success and failure — there is no guarantee when the result will be returned.
I have a list of infowindows lets say numbered 1 to 5.
and they have a form to get directions. When I draw the route the infowindow should colapse. Everything works, I just want the infowindow object available outside the function
infowindow.close() works fine if its in initialize, however the function calcRoute() is outside of the initialize function. I'm trying to return the infowindow from the function but not sure where I am going wrong
here is the jest of what I'm doing
function initialize() {
........
var infowindow3 = new google.maps.InfoWindow({
content: iwindow('marker3','st pete','27.81884967015435','-82.65828121138918','727-822','4011 mlk','Fl','33703','201'),
maxWidth: 300
});
.........
return infowindow3;
}
// I have tried alerting every combination of this, window and even the function name
alert(this.window.infowindow3);
// if it would alert ObjectObject I would have it.
I know I'm close and hopefully someone familiar with the maps can shed some light.
A big thank you in advance. (I have spent days trying to get this one)
This may be a stupid question, but are you saving the return value of initialize? Of course you are not showing your whole code, but that's not clear from what is there. Something like this:
var infowindow3 = initialize();
alert(infowindow3);
Of course, the typical way to call initialize is via the load event, so you wouldn't be able to get the return value that way. So you would set up a (in your example) global variable, and that set that global variable inside of initialize (and not returning anything).
Update:
Ok, after looking through the page you linked to (in your comment) I see that you are calling the alert(infowindow3); before infowindow3 gets defined. You can also see that in the page itself, the alert pops up with "undefined" and the page isn't loaded yet - you can't see any map and consequently initialize() hasn't run yet. Bear in mind that during a page load, any script outside of a function (or a function's code if the function call is in that "open space") will get executed the moment the browser reads it. This alert is an example of that. You need to put that alert (or any code that uses this variable) in a function that does not get called until it is defined by initialize(). Examples of this are functions that get called with onclick. In fact, initialize itself is an example of that (it gets called with onload).
I have implemented AJAX for calling server side function using client side function call i.e Calling server side function using javascript tag by using PageMethod in javascript.
I have few question regarding the same implementation.
function OnBlurCall()
{
chk(ControlId, SpanMsgId, FunctionName)// where all these parameters are obtained from programmer.
}
function chk(ControlId,SpanMsgId, FunctionName)
{
PageMethods.FunctionName(ControlId.value,onSuccess,onFail,SpanMsgId); // I want to replace actual value of FunctionName i.e Something given below
PageMethods.CheckUserNameAvailability(ControlId.value,onSuccess,onFail,SpanMsgId);
}
function onSuccess(result,MsgId,methodname)
{
MsgId.innerHTML=result;
}
function onFail(error,MsgId,methodname)
{
MsgId.innerHTML=error;
}
Ques 1. How many parameters can i add to this function. Is it there some limit that i can send only 3 parameters. Please give some details how it is working.
Ques 2. I want to make above code reusabe in javascript such that I add all the 3 functions in master page. But the problem is that i can add two functions into javascript at this time. But for adding 3rd function i have to send function name also as a parameter.
PageMethods.FunctionName(ControlId.value,onSuccess,onFail,SpanMsgId);
This FunctionName will be the name of server side function that a developer want to call.
Can i do this. ?
You can generically check for arguments; while in the function method, the arguments array has a list of all the arguments for that method. Check this out: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/Arguments
To invoke dynamically, you could consider using the WebServiceProxy: http://www.asp.net/ajax/documentation/live/clientreference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx