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

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!

Related

Reload page dynamically

I create a dashboard to which I added a modal box which proposes to save or to go back. To go back, I need to reload the page (so that the data will return to the initial state). I used javascript and this script works but the problem is that the browser shows that the page is reloaded (I would like to reload the page dynamically). Do you have an idea to reload the page dynamically?
current code:
function cancel() {
close();
document.location.reload();
}
To my knowledge there is no way to do this automatically. You will have to fetch all your values asynchronous and repopulate your Html.
Or perhaps put your entire dashboard inside an iframe and call document.location.reload(); inside that.
That should stop the browser showing the reload animation. I have not tried it though.

Reloading page without browser knowing

I currently am building a website that fetchs data from MySQL with php and then displays it. On one of the pages I use a form to submit data and then I reload the page to display it. It does it's job fine and works exactly as I want the only problem is when a user presses the browser back button it goes through all previously submitted data instead of just going back to the page it came from. Is there a way to reload a page without the browser storing it or is there a way to make the browser go back to the previous page instead of history.
NOTE: I am aware of Ajax and how to use it to not reload the page at all but I wanted to see if there was a way to do it without redesigning my whole page with a seemingly small problem.
You can use history.replaceState in HTML5.
Another possibility appears to be
window.onpopstate = function(event) {
window.history.go(-1);
};
although I have not tried this myself.
See https://developer.mozilla.org/en-US/docs/Web/API/History_API and https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

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

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

refresh other page when changes happened on current page using jquery

Currently, I'm working a project using webview android on inserting quiz question to database. I insert the data to database on page #add. But on the other page #retrieve it doesnt show the result from the database because I havent reload it. The only method that I know is
window.location.reload()
but it only reload for current page. Are there any method to reload other page?

When I click on Refresh button on IE my javascript getting refresh -how to stop it

I developed a website using Javascript and HTML pages
Problem :
When i am clicking on refresh button on Internet Explore, it is going to home page instead of refreshing the current page of my web page. please do the need full
Regards
Santosh
This usually happens when you are using ajax to update parts of the website after loading.
Ex: Say clicking on add button loads a form using ajax.
When you do like this the URL in the browser remains same even after loading the form. Because of this hitting the refresh button will not take you to form again.
Solution:
Really Simple History (RSH) is lightweight JavaScript library for the management of bookmarking and browser history in Ajax/DHTML applications.
Use this library to update the browser URL after the ajax request. Now the refresh should work fine.
Hope this helps.

Categories

Resources