Navigation to other pages

Navigation to other pages


I am having trouble changing pages in the application (Intel App Framework, Cordova in the newest XDK). I have tried 3 approaches:

document.location.href = "#id_of_page_i_want_to_change_to";
window.location.href =  "#id_of_page_i_want_to_change_to";
activate_page( "#id_of_page_i_want_to_change_to");

Tried it with/without the ".href" in the left side; on the right side: with/without hash, with/without index.html before id, and by the class name.

It either doesn't work or navigate to wrong (how?) page...

What I am trying to achieve is to initialise leaflet map (cannot move that part to the document.ready()) and pass some data before displaying another subpage.

So, my question is: is it common behaviour? Am I doing something wrong? If so, how do we change pages by javascript code?


8 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.



No this is not normal behavior as the activate_page("#yourpage") or activate_subpage("#yourpage") should actually work.

I am also having the same issue and it seems to be when code for plugin's and some others are added in; a friend of mine was also trying to help me out on this and he found that there where some older post's like this and it was something that was fixed but appears to be back.

There are a couple of ways around this in the meantime (Intel Admins please advise of timeframe of fix - I can provide sample projects if needed)

1) If you are just trying to go to a page you can edit the index.html; in this find your button class "search for the ID name" and add in href="#yourpage"    This will the execute the move for you.

2) If you need to to do some pre process like check IF statements and only go if information is filled out like in a form you can add another button with the action set to go to the page you want (This will create the href in the index) and create a custom style with

.thenameyouwanttocallit {
display: none;

this will then hide the control and prevent it from taking up space, next in index_user_scripts under the original button codeset where the page change is not moving add in the below code "or create a function to call it"

        var btn = $("#hiddenbutton"); ;


A complete view would look like

    $(document).on("click", "#yourbutton", function(evt)


        var btn = $("#hiddenbutton"); ;



Current work on App Framework is concentrated on App Framework 3, which is a significant departure from AF2 with a simpler structure and utilizes standard jQuery. So bug fixes, etc. are in AF3. You can find the repo here: and the docs here: and here:

I'm having the same problem using App Framework 3.  Neither of these work:

document.location.href = "#id_of_page_i_want_to_change_to";

window.location.href =  "#id_of_page_i_want_to_change_to";

activate_page( "#id_of_page_i_want_to_change_to");


Is this still a bug in App Framework 3?  Is there no straightforward way of moving between pages using Javascript?  This would seem like a huge limitation...


Where are you calling activate_page? It is working OK for me in latest XDK and AF3.



What worked for me is the following:



I got Uncaught TypeError: Cannot read property 'loadContent' of undefined 

whern using loadContent. Is it something wrong ?

Now is ok. I was wrong put two codes.


    <div id="splashscreen" class='ui-loader heavy'>
        App Framework - Tab View
        <span class='ui-icon ui-icon-loading spin'></span>
        <h1>Starting app</h1>

Leave a Comment

Please sign in to add a comment. Not a member? Join today