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
}
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.
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);
}
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 ...
I have code that fires on window load, scroll and resize:
jQuery(window).bind("load scroll resize", function() {
// do stuff on every event
// do something else only once
});
However I want one part of the code to only fire once. How can this be done?
UPDATE - I have a variable already defined in the code that re-fires that ideally id like to use in the code that doenst re-fire.
It seems like this is what you are really looking for:
jQuery(document).ready(function () {
var foo = "bar"; //define on load
jQuery(window).on("scroll resize", function () {
jQuery("body").append(foo); // used on scroll/resize events
})
})
Fiddle (you can resize the fiddle windows to see the event works using the defined variable)
If you also want the scroll/resize event to happen on initial load, you could do something like this:
jQuery(document).ready(function () {
var foo = "bar"; //define on load
var myFunc = function () {
jQuery("body").append(foo); // used on scroll/resize events
}
myFunc();
jQuery(window).on("scroll resize", myFunc)
})
Fiddle
Another example you can test scroll with - epilepsy warning :)
Also I used jQuery() in my example just because you did. Unless you have some kind of conflict most people prefer using the shortcut $().
In case there is any confusion with my sample code, your above code (comments) would look like this:
jQuery(document).ready(function () {
// do something else only once
var myFunc = function () {
// do stuff on every event
}
myFunc(); //remove this if you don't want it called on initial load
jQuery(window).on("scroll resize", myFunc)
})
Basically in the above sample, on the initial load your function and event will get declared, initialized, and called. Then the function will get called every time the scroll and resize events take place.
var some_var = 1;
$(window).on("load scroll resize", function() {
// do stuff on every event
});
$(window).one("load scroll resize", function() {
// do stuff only once
});
That will execute the one part of the code only once, and the other part every time. Since some_var is declared outside of both blocks, it'll be available inside both.
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);