We Keep Coding

Include .tpl after page load

Hello its posible to load TPL file after page load?
some like:
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
console.log("OK");
{include file="modules/widgets/akj-select-menu/akj-select-menu.tpl" assign=akj_menu_content}
});
ITS not work couse i cant inster include smarty like this but i just wont to show what i need. If its possible in Smarty + JS

If your idea is not related with request optimization for fast page load (example menu.tpl is generate very long time and you want to load it later) - then: the simplest way would be to do like this:
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
console.log("OK");
document.getElementById("akj_menu_content").style.display = "block";
});
<div id="akj_menu_content" style="display:none;">
{include file="modules/widgets/akj-select-menu/akj-select-menu.tpl" assign=akj_menu_content}
</div>
But.. if it is related with request optimization then docReady() you should make an ajax request for example www.example.com/my/menu/generator where you generate this menu in php (by fetch modules/widgets/akj-select-menu/akj-select-menu.tpl in Smarty and return it as HTML so JS can insert it to <div id="akj_menu_content")

JavaScript and localStorage problems

Here is a quick example that should (but it doesn't work for some reason).
function clearSave()
{
var c = confirm("Are you sure you want to reset the current game?");
if (c==true)
{
localStorage.setItem("saved","false");
location.reload();
}
}
function save()
{
localStorage.setItem("saved","true");
setTimeout(save,1000);
}
function load()
{
if (localStorage.getItem("saved") == "true")
{
alert("Game Loaded");
}
else {
save();
}
}
When the page loads the load function is called. And when the user clicks a button to reset stuff the clearSave function is called.
But after the page is reloaded after the clearSave function is called the alert shows, meaning that the "saved" item is set to "true" somehow.
Any clues?

setTimeout(save,1000);
The above code is causing the error, you need to use some other strategy based on your needs
function save()
{
localStorage.setItem("saved","true");
//Below line needs to be updated
setTimeout(save,1000);
}

How check if pages still not full loading after 12 second, using javascript

I want this code top.location.href= 'http://myweb.com/super-minimal-page.html'; only target devices that take a long time to load my page (maybe more than 12 second still not full loading my page).

document.readyState will return "complete" when the page has finished loading. You can set a timeout and check if the value of readyState isn't "complete" after 12 seconds.
setTimeout(function () {
// Not complete. Document hasn't finished loading.
if (document.readyState !== 'complete') {
top.location.href = 'http://myweb.com/super-minimal-page.html';
}
}, 12000);

Make Boolean variable is loaded with false value on the top of your script
then create setTimeout function for 12 secound that refare to function you need to fire in case of the page is not loaded
in the document.load function set the Boolean variable to true and check for the variable in your pageNotLoaded function as below
<script type="text/javascript">
var pageIsLoaded = false;
setTimeout(PageNotLoaded, 12000);
$(function(){
pageIsLoaded = true;
});
function PageNotLoaded()
{
if(!pageIsLoaded)
{
// do your code here
}
}
</script>

Autosave using javascript issue

The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>

jQuery Window Load not firing when called from within function

Using jQuery the following would log that the app had loaded once the DOM and all assets had been downloaded by the browser:
$(window).load(function() {
console.log('app loaded');
});
However I don't want this check to happen until after some other things have run.
So for example:
function checkLoaded()
{
$(window).load(function() {
console.log('app loaded');
});
}
So let's say I call this function after a bunch of other functions.
The problem is, because $(window).load(function() is an event listener, when I call the checkLoaded() function the event won't ALWAYS run (because it MAY have already been fired because everything has downloaded BEFORE the checkLoaded() function has run).
Any ideas on how I can do this?
I tried this:
function checkLoaded()
{
if(loaded)
{
console.log('app loaded');
}
else
{
checkLoaded(); // keep checking until the loaded becomes true
}
}
$(window).load(function(){
loaded = true;
});
But the problem here is that the checkLoaded function COULD get called hundreds of times in a few seconds and isn't a nice way of handling this.
UPDATE: The function is called using checkLoaded(); Just so everyone knows I am calling the function!
UPDATE 2:
The plan is essentially this:
function init() {
start();
}();
function start() {
// Show Preloader... and other stuff
/// Once all logic has finished call checkLoaded
checkLoaded();
}
function checkLoaded() {
if(loaded) {
show();
}
}
function show() {
... // show app
}
So I should be able to know if the status of loaded is true, but keep checking until it becomes true as it may be true or false when I get to the checking stage.

You run it either on window load or if it's already done using such kind of code:
function onLoad(loading, loaded) {
if (document.readyState === 'complete') {
return loaded();
}
loading();
if (window.addEventListener) {
window.addEventListener('load', loaded, false);
} else if (window.attachEvent) {
window.attachEvent('onload', loaded);
}
}
onLoad(function() {
console.log('I am waiting for the page to be loaded');
}, function() {
console.log('The page is loaded');
});

var loaded=false;
$(window).load(function() {
loaded=true;
});
function checkLoaded()
{
// do something if loaded===true
}

Try this
function checkLoaded()
{
$(window).load(function() {
console.log('app loaded');
});
}
checkLoaded();

you want to make checkLoaded block and thats a bad idea:
javascript has no threads and blocking like that will just burn CPU while potentially blocking the whole script.
don't wait like you do for loaded to be to true. use the eventhandler as it is meant to be used.
maybe give checkLoaded a parameter to a function you want called:
function checkLoaded(continueWhenLoaded) {
$(window).load(function() {
continueWhenLoaded();
});
}

Have you looked into a solution involving jQuery's .promise() and .done()? Look at some of the examples in the documentation, it might be what you are looking for.