call function when a page/sub-page is loaded and displayed

[Alex_Hang]

Hello,

Ia am building an app using Framework 7 and I want to call a function when a page or sub-page of my app is loaded and displayed ( not the index.html page, but one of the pages created using App designer's new page button ) . I tried to use deviceready, but it triggers only when the app starts, not when a certain page is loaded.

Another thing I tried was to use the onLoad event, but that did'n worked either.

Here is an example of what I tried, but it's not working.

<div class="upage vertical-col left hidden view" id="page1" onload="example()">
                <div class="pages">

                    <div class="page">
                        <div class="page-content upage-content content-area" id="page_91_48">

Except the onload="example()" command, everything else in the above code is auto-generated by Intel XDK.

Can somebody help me please? I will be very grateful.

[PaulF_IntelCorp]

What you probably want to do is monitor changes to the <div> element. For example, when the class attribute changes to remove or add the "hidden" style rule name (I don't know for sure, but I'm guessing there is a corresponding "visible" style rule that replaces the "hidden" style rule when a <div> is made visible -- you should be able to check the CSS rules that App Designer creates to be sure).

See http://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change and https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver for some help with ways to monitor such a change.

[Alex_Hang]

Thank you very much for the answer sir .

[Diego_Calp]

Hello Alex,

How are you calling the sub-page?

What I usually do is add the code before the line

activate_subpage("#my_subpage");

Regards

Diego

[Alex_Hang]

Hello Diego,

What Framework are you using?

There is an older topic on Intel Developer Zone, about how to activate a page/sub-page https://software.intel.com/en-us/forums/app-framework/topic/543890

I am now using Framework 7, but as far as I know, it will be retired soon, so you have to find a solution for App Framework 3, and as far as I can see in that topic, there is a jQuery code sample that works with App Framework 3 : 

$.afui.loadContent(page,false,false,"up");

If you want to do something even more simple than that, you can simply use the Interactivity section in app designer ( right part of the screen) from where you can select which page or sub-page you want every button to activate..

I hope this post helps you !

[Diego_Calp]

Hi Alex,

I use Boostrap, my post was with the intention to give you an option.

Besides the selected framework, XDK generates automatically the code to open pages and subpages in two functions, activate_page and activate_subpage. This code is generated the first time you link a widget with the action to open a page using the Interactivity pane. For example a button to open a page.

After  that, you may use activate_page and activate_subpage in your own code, and also make changes to the page to be displayed before it is visible.

Regards,

Diego

[Alex_Hang]

Thank you very much sir !