I want to set a specific time out before the function navigates to another tab.
somefunc: function() {
PageFrame.goToTab('test', function(item) {
if(!item.search){
return false;
}
//else do some stuff
}, this);
}
The issue is when the PageFrame.goToTab is called to redirect to the "#test" page, the test page hasnt completely loaded then, hence I get a undefined on item.search, though it loads after the error has been thrown. Hence I want to add a timeout for the function to wait until the page loads and then check for this condition: if(!item.search){}
How can I achieve this?
As Jaromand X said you should use an event that will tell you when the page has fully loaded instead just setting a timeout. From MDN Documentation "The onload property of the GlobalEventHandlers mixin is an event handler for the load event of a Window, XMLHttpRequest, element, etc., which fires when the resource has loaded."
That means that once the content of the window has finished loading the onload event will be fired.
To use such event you will have to assing and 'event handler' this is a function that runs whe the event fires.
In your case you should do this:
function somefunc() {
PageFrame.goToTab('test', function(item) {
if(!item.search){
return false;
}
//else do some stuff
}, this);
}
window.onload = somefunc;
So you 'somefunc' will run when onload event fires. You don't write window.onload = somefunc(); because what you assign as event handler is a pointer to your function.
somefunc: function() {
setTimeout(function() {
PageFrame.goToTab('test', function(item) {
if(!item.search){
return false;
}
//else do some stuff
}, this);
}, 5000);
}
Related
I have a function in my controller that targets a button, then attaches an event listener, which should call a function on the click event but it is calling it automatically when the page loads.
How do I change this to only call the function when I click on goBtn?
onAfterRendering: function() {
var goBtn = document.getElementById('__xmlview1--smartFilterId-btnGo');
console.log("goBtn = ", goBtn);
goBtn.addEventListener("click", this._onGoClick(event), false);
},
_onGoClick: function(event) {
console.log("Event attaaaaached!!! = ", event);
// do something else
},
The problem is that you are already evaluating your event handler. This calls the _onGoClick method immediately (as soon as this line is reached).
goBtn.addEventListener("click", this._onGoClick(event), false);
What you want to do is pass a function to addEventListener that gets called later.
goBtn.addEventListener("click", this._onGoClick, false);
On a different note your code is meant to break in the near future. The id __xmlview1--smartFilterId-btnGo is dynamically created and can change as soon as you launch the app in a different context.
Since I've upgraded from jQuery 1.x / jQuery 2.x to jQuery 3.x, my existing code will not be executed correctly anymore. Everything works fine, but the load event listener gets not triggered anymore or just sometimes:
$(function() {
$(window).on("load", function() {
// this line will never/occasionally be executed
console.log("window is loaded!");
});
});
The problem can be occur when using/switching to jQuery 3. It's because all ready states in the new jQuery 3 are now fully asynchron. This means, that there is no given order for your code to be executed.
Because of this, it could happen, that load is been triggered before your ready state has been executed. When your ready function now finally gets triggered, your load listener is too late and will not be executed.
jQuery Usage:
To change this behavior, just remove the ready state around your load event listener initialization. There is no need to encapsulate this with a ready function. You can initialize them without.
// $(function() {
$(window).on("load", function() {
// this line will now be executed again
console.log("window is loaded!");
});
// });
If you need or want to register both events, you can register the load event by yourself and decide inside the ready state what to do next.
// track the loading state by yourself
var windowLoaded = false;
$(window).on("load", function() {
windowLoaded = true;
});
$(function() {
function afterLoad() {
console.log("loaded");
}
// decide inside your ready state what to do
if( !windowLoaded ) {
$(window).on("load", afterLoad);
}
else {
afterLoad();
}
});
jQuery Plugins:
Another case would be jQuery plugins, that uses the load event too. For example:
(function($, window) {
$.fn.myPlugin = function() {
$(window).on("load", start);
function start() {
console.log("plugin initialized and window loaded");
}
};
})(jQuery, window);
If a developer/user now wraps the plugin initialization in a ready state the problem could happen again, just like explained before:
$(function() {
$("#element").myPlugin();
});
A solution would be to track the load event in your plugin on your own, to break out the ready state.
(function($, window) {
// track the loading state beside the plugin initialization
var windowLoaded = false;
$(window).on("load", function() {
windowLoaded = true;
});
$.fn.myPlugin = function() {
// decide inside your plugin how to start
if( !windowLoaded ) {
$(window).on("load", start);
}
else {
start();
}
function start() {
console.log("plugin initialized and window loaded");
}
};
})(jQuery, window);
Conclusion:
Even when this problem not happens to you, in your tests, you should change those code immediately, when using jQuery 3, because other users/different browser can run into this trouble. Others may got the problem, because it is asynchron, you could never know when/if your code gets executed ...
Let's say there is a function that registers event handler for page load:
function onLoad(pageLoadedHandler) {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler)
}
As it turned out, if page is already loaded pageLoadedHandler will not be called. I want onLoad function to call passed event handler if page is already loaded, so how can we check this?
We can go with some ugly way like this:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded( function () {
window.pageIsAlreadyLoaded = true;
} );
function onLoad(pageLoadedHandler) {
if(window.pageIsAlreadyLoaded){
pageLoadedHandler();
} else {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
}
It will only require putting this code to the early loaded JS file. But there should be a nice way to do this checking.
I have a jquery code that I have to trigger after the page is loaded, I am doing it in postRender function call of the view, but postRender and window load event are totally async, so, the window load event might happen before I am in postRender adding the listener for the load event, is there any replacement for the function in this case, or am I missing something?
thanks for the help
You could use a flag to keep track of the window.load event in the global scope and choose an execution path in postRender() based on the status of the flag.
// define this in the global scope
var windowHasLoaded = false;
$(window).on('load', function(){
windowHasLoaded = true;
});
Then in view.postRender():
// window has already loaded, just run now
if(windowHasLoaded) {
doStuff();
}
// run on window load event
else {
$(window).on('load', doStuff);
}
var doStuff = function() {
// the stuff to do
}
how do I call a function once after all cookies.onChange events fire, I kown
chrome.cookies.onChange.addListener
but it call event handler everytime after every cookies get changed, I want to call event handler only once after all events fired.
How I can do that?
Thank you!
var hasBeenCalled = false;
function doSomethingOnce() {
if (!called) {
console.log("I haven't been called before");
// do fancy stuff.
hasBeenCalled = true;
} else {
// do nothing, function already called.
};
};
chrome.cookies.onChange.addListener(doSomethingOnce);
Or better yet, you can probably find a chrome.cookies.onChange.removeListener(doSomethingOnce);,
in which case inside your doSomethingOnce function, after you do whatever you want to do, you call chrome.cookies.onChange.removeListener(doSomethingOnce);