Load data from service before showing page

[AricCaley]

I want to load the data from a REST service before showing the page, but I can't figure out how to do this? Right now, the page loads and shows with an empty form (the first time) or the data from the last time it showed. A moment later, the new data is loaded. This looks ugly.

How can I fix this?

[Illya Stepanov]

Hi -

Please provide more information on how you are calling REST service on your page now.

It's better to catch service event before show page event and if it successful (Success event receives full data) make some condition after.
:: http://docs.appery.io/documentation/r...

[Carlota]

Hi!
Is the event "before show" listed on
http://devcenter.appery.io/documentat...
a valid solution for such an issue?

I cannot test it, since I do not find it on the events configuration screen (please see the screenshot)

Thank you in advance!
Carlota F:

[Evgene Karachevtsev]

Hello Carlota,

I'm afraid this won't help. The request for the service is asynchronous. i.e. the data will be filled only after the service will return the result.

[Carlota]

Evgene
Sorry for my poor explanation. I was thinking on invoking the service by linking it to "before show" event; however as I mentioned I do not find this event on the configuration screen although it is described on Appery.io docs.
But as you mentioned, since request is asynchronous, even if such proposal could be tested, the "show" event could be triggered even if service execution is not completed, right?
Thank you for your feedback!
Carlota F:

[Yurii Orishchuk]

Hi Carlota,

Here is solution for you:

1. Create new JS asset.

2. 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 "list/query/read" service that's populates your page "Success" event handler. And populate it with following code: http://prntscr.com/4lzyxs/direct

   pre

   jQuery(".hideElement").hide();

   /pre

   That's all.

   Regards.

[Carlota]

Thank you for your reply, Yurii!
In such scenario, shall I keep the service invokation linked to Page Load/Page Show events? Or can I also invoke it from the JS executed on "pagebeforeshow" event?
Carlota F.

[Yurii Orishchuk]

Hi Carlota,

You should start your list/query service on "page show" event handler.

"pagebeforeshow" uses only for display some progress bar until page not shown.

Please use following code instead of given before (because of some problems with escaping).

pre

//Note: you should replace "test" with your page name.
$(document).on('pagebeforeshow', 'div[data-role="page"][id="test"]', function (e, ui) {

Code: Select all

 var page = jQuery(this); 

var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #fff; z-index: 1000000"<');

Code: Select all

page.append(hideElement); 

});

/pre

Regards.

[Carlota]

Yurii
Your explanation is awesome! I will look into that and get you back. Thanks again!
Carlota F.

[Carlota]

Yeah! It works exactly as you explained!
Thanks again, Yurii!
Carlota F.