Page 1 of 1
Invoke service during before load event to avoid population of page while visible for user
Posted: Mon Mar 23, 2015 5:18 pm
by Chris N
I have several services which make an API call and then map the results to local storage. I've found that I can't get those service calls to invoke if I use the "Before load" event, they will only call on Load. I'm assuming this is a jquery or html5 limitation?
Ultimately what I want to do is to make a number of calls (including local storage mapping) and have those complete before running mapping to dropdowns and labels on the screen before presenting the finished page for the user - it can be confusing for the page to load, and then populate while visible for the user. Any ideas or suggestions? Is the standard approach to display a spinner before the service calls and then hide it after they finish?
Invoke service during before load event to avoid population of page while visible for user
Posted: Thu Mar 26, 2015 3:24 am
by Yurii Orishchuk
Hi Chris,
Some things to clarify:
You can invoke datasource(not service).
datasource - is an instance of the service assigned to certain page.
before page loaded - there is not page, and thus - there is no any page elements like "page datasources".
So thus - you can not invoke any datasource before this page will be loaded.
I can suggest you following solution:
Create new JS asset.
Populate it with following code:
pre
//Note: you should replace "test" with your page name.
$(document).on('pagebeforeshow', 'div[data-role="page"][id="test"]', function (e, ui) {
var page = jQuery(this);
var hideElement = jQuery('');
page.append(hideElement);
});
/pre
3 Add to your final "list/query/read" service that populates your page "Success/complete" event handler. And populate it with following code: http://prntscr.com/4lzyxs/direct
pre
jQuery(".hideElement").hide();
/pre
Regards.
Invoke service during before load event to avoid population of page while visible for user
Posted: Sun Apr 12, 2015 10:17 pm
by Pete Gombert
I am having the same problem and this sounds like an interesting approach. However, I am unclear as to where you are placing this code and the timing of the events. It appears from reading the code, this is hiding the div until loaded, but I don't see where you are unhiding it?
Invoke service during before load event to avoid population of page while visible for user
Posted: Tue Apr 14, 2015 3:30 am
by Yurii Orishchuk
Hi Pete,
Please read this solution again.
There you can find following things:
1-2: populate code in new JS asset.
3: populate code in JS event handler for needed event. (like some service success event).
Regards.
Invoke service during before load event to avoid population of page while visible for user
Posted: Sun May 03, 2015 1:58 pm
by David wyatt
Hi Yurii,
I have a similar issue and was wondering if this could be applied to it. I have a page with a iframe html component. when the page loads it sets the address and loads it.
What I would like is for the address to load before the page shows.
The result would be when you navigate to the page the iframe is already loaded.
thanks
Dave
Invoke service during before load event to avoid population of page while visible for user
Posted: Mon May 04, 2015 2:15 am
by Yurii Orishchuk
Hi David,
Yes this solution could be applied to wait for iframe load:
Here is a solution:
Create JS asset.
Details: http://prntscr.com/71a53a/direct
Populate it with following JS code:
Details: http://prntscr.com/71a4vl/direct
precode
//Note: you should replace "test" with your page name.
jQuery(document).on('pagebeforeshow', 'div[data-role="page"][id="test"]', function (e, ui) {
var page = jQuery(this);
var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/3c/Amur_Tiger_Panthera_tigris_altaica_Cub_Walking_1500px.jpg); background-size: cover; z-index: 1000000"><>');
page.append(hideElement);
});
var iFrameLoad = function(){
jQuery(".hideElement").remove();
};
var onLoad = function(){
// you should use here your jQuery selector to your iframe instead of "#myCustomIframe".
var iFrame = jQuery("#myCustomIframe");
iFrame.bind("load", iFrameLoad);
console.log(iFrame);
};
jQuery(window).bind("load", onLoad);
/code/pre
Note: you need to change in this code:
page name with your actual page name.
selector to your iframe.
Regards.
Invoke service during before load event to avoid population of page while visible for user
Posted: Mon May 04, 2015 8:59 am
by David wyatt
Hi Yurii,
This works great except for one issue, i only want this to run on the first visit to the page, every visit after I dont refresh the iframe so it doesnt need to load. is there anyway to set it as just a load event and not a pageshow event?
thanks
Invoke service during before load event to avoid population of page while visible for user
Posted: Tue May 05, 2015 6:27 am
by Evgene Karachevtsev
Hello David,
Please try to change pagebeforeshow to pagebeforeload in this code.
Invoke service during before load event to avoid population of page while visible for user
Posted: Tue May 05, 2015 5:07 pm
by David wyatt
thank you Evgene, works perfect