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);
}
Related
I am building a small webapp based on framework7 example split-view-panel which has a navigation bar on the left and if you click it loads a url to the right hand pane.
This is a php url. However it seems that each time you click on the left, if the page has previously been loaded, it simply reloads from cache. However I need it to call the php page again as I need to log time data on the php page for when it was clicked and loaded.
Is there a way I can force Framework7 to reload pages it has previoulsy loaded via ajax?
You can have Framework7 ignore certain URLs or even disable caching all together. Refer to the link below (section: Caching) for more details:
http://www.idangero.us/framework7/docs/init-app.html#.VnfJtPlVhHw
You must use pushState!
so where you define framework7 you must include this
var myApp = Framework7({
// Other Parameters if already there
pushState: true
});
What this is doing is enabling a HTML5 feature called the History API which did not exist in HTML4 i think was the last version anyway people used to use a thing called root hashing (Just so you know this back story is off the top of my head but the code it what will make it work) which is basically what the PushState is in the History API just. Just so you know PushState in Framework7 will make your URL'S look like this http://example.com/#!/profile.php?parameters4get=joe but it doesn't affect how Framework7 handles your pages it just enabled the PHP to be reloaded each time.
For Framework7 v4 use
var myApp = Framework7({
view : {
pushState: true
}
});
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.
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!
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
I was on Twitter the other day, and I opened chrome devtools and went into the network console, and then clicked on a link on Twitter (specifically the one on the menubar which said 'Me'), and then, as always, the page didn't really load again, it seemed to be AJAX-ified, but then I looked into the network content, and all I saw was a few images and a few javascript files.
Unless Twitter loads content from the 'Me' page on the loading of the home page (which I highly doubt, since Twitter is pretty fast at loading too), what can make the navigation between Twitter's pages so fast?
Like all JS apps, the pages you see are just "views". You are on the same page, stuff gets loaded via AJAX, and then JS renders the data with the template to form that view.
Here's a scenario: when you open a clean browser and go to Twitter's timeline, everything loads. This also includes all scripts that are needed to render the succeeding pages.
Now, when you go to another page, like the "Me", Twitter does not have the resources of the page just yet. So, it loads via AJAX the needed resources to render the "Me" page like all data, and the template for it. After loading, it renders the data and with the template to form the "Me" page.
Now when you go back to the timeline, Twitter never discarded the timeline data but cached it (localstorage at best). Thus going back to the timeline (or any visited page for that matter) is just a matter of reading cached data, cached templates and rerendering the view onto the page. No network requests needed at all.
As you also notice, new data is retrieved incrementally, by just querying from the server new tweets rather than getting them all back. Only when the page determines that it needs a fresh set of data will it query a bunch of them.
Also, JSON data is a million times (to exaggerate) lighter than loading a normal page.