Phonegap : losing data on first page after navigating back to first page - javascript

Phonegap, writing app for Android. Here is what my app supposed to do :
1) onDeviceReady, read xml ( item names and corresponding hyperlink for each item - so kind of Table of contents) and show them on index.html
onDeviceReady: function () {
app.receivedEvent('deviceready');
var readStatus = sessionStorage["readComplete"];
alert("readComplete = " + readStatus);
if (readStatus != "true") {
app.readxml();
sessionStorage["readComplete"] = "true";
}
},
In app.readxml() I read all items + links in my datafile(XML) and add them to a ordered list in a div of Index.html page.
onDeviceReady seems to be getting called each time page loads ( like navigating back). Reading same page for each page load and rebuilding seems redundant since once we read, the page should remember how it was built and controls have their old data in them.So, I store the reading xml status in sessionStorage so that i dont readxml and rebuild page each time.
2) when user clicks on a link in the list, navigate them to a page1.xml
3) when clicks back button, bring them back to Index.html
Problem at #3 --> when user comes back to first page ( index.html), at that time readStatus == true, the Index.html is showing blank.
Question --> how can I maintain state of index.html ( with data populated from reading xml) so that I dont have to rebuild page on each navigation back.
Any help is appreciated.

Whenever you open a new link (page.html) in Cordova, the previous page (index.html) will be destroyed, this behaviour depends on the system, iOS will sometimes cache previous pages and Android seems to always clear data right away.
If you want to avoid reloading the XML data, you can save it into the sessionStorage or localStorage (JSON is a good format). But the DOM has to be re-built whenever you go back to index.html, there will be a minor delay still.
A quick workaround to your problem could be creating an iframe within index.html to load page.html. Or a floating DIV layer on top of index.html using Ajax to load page.html. Both approach will work fine, assuming your index.html and page.html isn't too resource consuming.

data-dom-cache="true"
use this in your html tag. for more infromation follow this...http://demos.jquerymobile.com/1.2.0/docs/pages/page-cache.html

Related

Dynamically updating content (eg. clicking button updates div) and update url on website without refresh, then stay on the same page on manual refresh

So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!

Reloading the home page on TVML app

I have a TVML app with a menu bar and 4 sections. The home page (first in the menu bar) is built from a remote TVML with remote JSON file for data. Once the JSON file and TVML files are loaded I use Mustache to render the template. Every time the user navigates to a different page and then uses the menu to return to the home page, we want the latest TVML and JSON to be loaded and displayed. However this never happens. The home page remains the same no matter what changes I make to either remote file. From my debugging I see that the remote files are actually loaded and rendered, so I do manage to get the latest template and data. However, when it comes to displaying this on the screen, the following doesn't refresh the page:
presentMenuBarItem(doc, menuItem) {
var feature = menuItem.parentNode.getFeature("MenuBarDocument");
if (feature) {
var currentDoc = feature.getDocument(menuItem);
if (!currentDoc) {
feature.setDocument(doc, menuItem);
}
}
}
I have verified through debugging that the doc passed into this function is the updated version. However the old one is shown every time.
If I reload the app I get the new version but only in the simulator. In the actual Apple TV, even if I restart I still get old data.
I also tried making it work upon resume by clearing the stack and reloading the menu and home screen, but again, even though it works on the simulator, it doesn't on the apple TV, the data remains the same, as well as the template and old images.
App.onResume = function(options) {
navigationDocument.clear();
pushLoadingDoc();
resourceLoader.getNavigation();
}
How can I make that function render the updated screen? Our home page tvml and json files are constantly being updated and we need the latest displayed to our users.
Thank you.
You can just refresh the whole page like so:
refreshMainPageWith(newDoc) {
const oldMain = navigationDocument.documents[0];
navigationDocument.replaceDocument(newDoc, oldMain);
}

jQuery Mobile navigation not working

I'm currently working on a web project with jQuery mobile but navigation just won't work.
When i hit a page from the menu (eg. "customers") the url displays correctly (www.aaa.bb/#customers) and the page is loaded without any problems. When i hit another page the url is also correct and the page loads but when i then try to go back using the browser's back button the page doesn't change even though the url changes correctly..
I have seperate files for my different pages. Could this cause the problem?
If so, why does the url change correctly then?
Thank you!
Edit: Ajax is enabled on my page
If you are using AJAX to navigate throughout your site it is necessary to update the history yourself using history.pushState, since your HTTP (ajax) call will otherwise not be logged and stored in the history.
There are various ways you can manipulate the history, or change how you AJAX calls get fired, here is a solid doc on how to manipulate browser history, follow this up by creating a function that checks onpopstate event that is fired and update your page.
After hours of reading docs and testing different attempts I wrote this solution:
$(window).on("navigate", function(){
var file="/";
if(typeof history.state.pageUrl != 'undefined') {
file += history.state.pageUrl + ".php";
}
else{
file += "index.php";
}
$(":mobile-pagecontainer").pagecontainer( "change", root + file, {"reverse": true} );
});
This solution only works for my specific problem and may not work for others.
Known limitations:
all your jQuery Mobile pages have to be in the root directory of you website
the filenames of your pages have to be equal to their data-url attribute
all your pages have to have the same file extension (.php)
Dialogs will probably cause trouble too. I am also facing a strange issue when navigating to my index.php file.
I will improve my solution over time and post it again.

How do I refresh a page in single html5 jquery mobile app

I am developing an app using jquery mobile 1.4. I have this problem that when I edit an item using an edit form, the changes is saved in the localStorage but when I visit the list view page it does not reflect unless I manually refresh the page.
My save event of the form is like this
//After the selected employees has been edited
localStorage.setItem("employees", JSON.stringify(employees)); //set the update values to localstorage
alert('Employee Updated Successfully');
$('#employees_list').listview('refresh');
$.mobile.changePage("#home_page");
So I don't refresh it manually I added
history.go(0);
The problem with history.go(0); is that after compiling with phonegap it shows a blank screen and takes quit a while when it reloads which makes it seem as if the app has crashed.
So any suggestion on how to refresh the listview page without having to reload the entire html file?
It is a single html5 page with the listview page
id = '#employee_list_view_page'.
Or alternatively set it to stop (or timeout) after some seconds so the user dont think the app has crashed.
Thanks
I noticed you are saving to the new data to the local storage, but it seems like you are not reloading the list with the new data before the refresh, thats probably why the page doesn't get updated. On top of refreshing the listview you also need to manually call the function you would normally use to load data into the listview. Make sure you call this function before calling refresh. Hope it helps!

Twitter Feed issues with Ember Views

Basically on the home page I have the code snippet generated by Twitter Widget, when I load the page for the first time via url, the feed gets displayed, now I go to other page & come back to home page again, the twitter feed doesnt seem to be displayed.
I dont seem to find the reason behind this, is it something related to a SPA ? because if the load home page via URL it loads but when I navigate back & forth it doesn't display, I just see the a tag Tweets by User
This is the widget code when we create a widget inside Twitter Settings(it's minified, I did format to make it readable)
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
as you can see the if(!d.getElementById(id)) this looks for the existence of the element, if it doesnt exist then it'll insert the feed, In my case this element exists but the widget was not rendering somehow when I navigate to some page & come back, so I removed that if statement and everything works perfectly, Only a single widget on the page.
Not the best solution but in future someone faces this problem this is a possible workaround !

Categories

Resources