Invoke service during before load event to avoid population of page while visible for user

This forum contains topics that were moved from Get Satisfaction
Chris N
Posts: 0
Joined: Thu Mar 19, 2015 5:18 pm

Invoke service during before load event to avoid population of page while visible for user

Post 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?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Invoke service during before load event to avoid population of page while visible for user

Post by Yurii Orishchuk »

Hi Chris,

Some things to clarify:

  1. You can invoke datasource(not service).

  2. datasource - is an instance of the service assigned to certain page.

  3. 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:

  4. Create new JS asset.

  5. 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.

Pete Gombert
Posts: 0
Joined: Tue Mar 18, 2014 2:42 pm

Invoke service during before load event to avoid population of page while visible for user

Post 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?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Invoke service during before load event to avoid population of page while visible for user

Post 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.

David wyatt
Posts: 0
Joined: Mon Sep 15, 2014 7:12 pm

Invoke service during before load event to avoid population of page while visible for user

Post 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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Invoke service during before load event to avoid population of page while visible for user

Post by Yurii Orishchuk »

Hi David,

Yes this solution could be applied to wait for iframe load:

Here is a solution:

  1. Create JS asset.
    Details: http://prntscr.com/71a53a/direct

  2. 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:&#47;&#47;upload&#46;wikimedia&#46;org/wikipedia/commons/3/3c/Amur_Tiger_Panthera_tigris_altaica_Cub_Walking_1500px&#46;jpg); background-size: cover; z-index: 1000000"><>');
    page&#46;append(hideElement);
    });

    var iFrameLoad = function(){
    jQuery("&#46;hideElement")&#46;remove();
    };

    var onLoad = function(){
    &#47;&#47; you should use here your jQuery selector to your iframe instead of "#myCustomIframe"&#46;
    var iFrame = jQuery("#myCustomIframe");
    iFrame&#46;bind("load", iFrameLoad);

    console&#46;log(iFrame);
    };

    jQuery(window)&#46;bind("load", onLoad);

    /code/pre

    Note: you need to change in this code:

  3. page name with your actual page name.

  4. selector to your iframe.

    Regards.

David wyatt
Posts: 0
Joined: Mon Sep 15, 2014 7:12 pm

Invoke service during before load event to avoid population of page while visible for user

Post 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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Invoke service during before load event to avoid population of page while visible for user

Post by Evgene Karachevtsev »

Hello David,

Please try to change pagebeforeshow to pagebeforeload in this code.

David wyatt
Posts: 0
Joined: Mon Sep 15, 2014 7:12 pm

Invoke service during before load event to avoid population of page while visible for user

Post by David wyatt »

thank you Evgene, works perfect

Post Reply