Hi there,
In my app, I have four distinct html pages (A, B, C, D) that contain survey questions spread across multiple tab pages (called ‘modules’ which are dynamically loaded from my server). This works great on PhoneGap preview (web browsers) and iOS (thanks to Framework7, the app is in the App Store).
Strangely, on Android phones each time on of these four html pages loads, the page and/or tabs and survey questions are loaded +1 (visible because of some flickering). Thus, the first time on of these pages loads (either A, B, C, or D), the survey tabs are rendered correctly. The second time, on of these four pages is loaded (either A, B, C, or D) the page loads twice, the third time on of these four pages is loaded (either A, B, C, or D) the page loads three times, and so forth.
My first thought was that this behavior was caused my the event handler attached to buttons to start the survey, but this seems not to be the cause (an additional alert(“hello”) in the event handler pops up only once every time on of the survey pages comes into view).
Now I think that it has something to with my Router function, but I do not know why. The router function is as follows and is called when the ‘start survey button’ is pushed using (as stated above) an event handler.
app.views.main.router.navigate('/module'+module+'/');
I remember, in a previous version of my app which I tested on iOS, the tab pages (or the questions only?) were also added +1 each time each of the four survey html pages were loaded, which I solved for iOS by emptying the html page each time the survey came into view (Looking back, this is a bad work around I admit). (Note. the ‘empty’ function (javascript) is still present in the app, but why is it sufficient in Web browsers and iOS, I don’t know).
Any hints are welcome, also if you think I am thinking in the wrong direction. If you need more explanation, I am happy to share.
Thanks