Oracle Apex Cards Region Rendering time

Question

I have a cards region on page 1 in my application which is paged and is set to show 32 cards on a page. When the user clicks a card, it takes the user to a different page which is page 11. There is a button on page 11 that brings the user back to page 1.

When the user comes back to page 1, I am taking him to the exact position where he was before going to page 11. For example, if he clicked card # 38 to go to page 11, when he comes back to page 1, I am taking him to card # 38.

I am doing it using the following JS API

apex.region("prods").call('gotoPage', $v("P1_CARDS_PAGE"));
$(window).scrollTop(apex.item("P1_SCROLL_POS").getValue());

Where P1_CARDS_PAGE is the number of page of paged cards region. Which will be page 2 in the above example. And P1_SCROLL_POS is the position of the card on that page where the user clicked.

Problem The problem I am having is that my JS code fires before the cards region is fully rendered when the user lands on page 1 where cards are displayed. It sends the user to the relevant page number in the cards region, but does not maintain the card position.

Is there any way of knowing when an Oracle Apex cards region is rendered completely? I want to check that when the oracle apex cards region is rendered completely and then want to fire that javascript code after that.

I have tried to use #TIMING# substitution string but I can only use that to just display how much time the region has taken to complete and can't use that to fetch the value in a page item

Thanks

Answer 1

Create a Dynamic Action that executes 'After Refresh' of the region.

This will execute at a time appropriate for JavaScript to execute after rendering.

Don't forget to check 'Fire on initialisation' if you want it to also execute on page render, not just after manual refresh or a pagination event.

I use it for such things as hiding a region if no data is found.

Answer 2

The best bet would be to use the Universal Theme API if you are using it. Put the following code block to page level attribute Execute when Page Loads.

$(window).on('theme42ready', function() {
    setTimeout(function() {
        apex.region("prods").call('gotoPage', $v("P1_CARDS_PAGE"));
        $(window).scrollTop(apex.item("P1_SCROLL_POS").getValue());
    }, 200);
});

Check the docs.