This site is currently read-only as we are migrating to Oracle Forums for an improved community experience. You will not be able to initiate activity until January 31st, when you will be able to use this site as normal.

    Forum Stats

  • 3,890,899 Users
  • 2,269,649 Discussions
  • 7,916,821 Comments

Discussions

display processing page on ui untl data is not fetched

3676818
3676818 Member Posts: 12
edited Mar 5, 2019 3:05AM in Oracle JET

I am using ajax call to retrieve data from server, it takes few seconds for data to come at front end and get populated, as the data is getting retrieved i want to display a processing page. I was going through cookbook - https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pullToRefresh&demo=basicPullToRefresh, but at the top it is mentioned that it only works for touch enabled devices and it is using oj collections and i am not doing so. I have also taken a look at https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=progress&demo=loading and this also doesn't seem to meet the need. Is there any other way. Does ojet provide us with the functionality to display a process page or some sort of loading gesture on whole page as data is getting retrieved?

Or i am wrong somewhere and using above listed links we can achieve the needed?

Tagged:
Wrushasen Dakhane

Answers

  • Duncan Mills-Oracle
    Duncan Mills-Oracle Member Posts: 4,079 Employee
    edited Mar 5, 2019 3:05AM

    The standard technique for handling this is very simple.

    1. You create a flag observable that is initially false and which you will set to true when your AJAX call returns

    2. In the UI you use a couple of <oj-bind-if> statements to either display a loading image or the results depending on the state of that variable.  Because the UI will be automatically be refreshed when the flag variable changes this would initially show the loading view and then switch to display the data as soon as it's ready.

    So for example you might have something like this:

    <oj-bind-if test="[[dataLoaded()===false]]">

       <img src="/images/spinner.gif">

    </oj-bind-if>

    <oj-bind-if test="[[dataLoaded()===true]]">

       <oj-table ....>

       </oj-table>

    </oj-bind-if>