I have an application which have some images which are half colored on page load and later it changes as per logic...i have a restart button which should take back the application to the state it was when it was loaded for a first time (i.e. the images shuld be half colored )
Can this be done in jQuery mobile???
If the pages are external documents then you can use the reloadPage option of the $.mobile.changePage() method to reload your external document to it's initial state.
Here is an example:
$(document).on("pageinit", "#some-page-id", function () {
$(this).find("a").on("click", function () {
$.mobile.changePage(this.href, { reloadPage : true });
return false;
});
});
reloadPage (boolean, default: false) Forces a reload of a page, even
if it is already in the DOM of the page container. Used only when the
'to' argument of changePage() is a URL.
Source: http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Related
I'm working on a project using the jquery-scroll-pagination plugin to dynamic load additional content when scrolling: https://github.com/andferminiano/jquery-scroll-pagination
The idea is to facilitate the user with different views. This is currently being done by using the jquery load event in a way that when an user clicks a button the content will be loaded.
The problem I'm facing is that the "scrollPagination" functions remains in memory and being active on #content. If an user clicks away the view and switches back, the scrollPagination for #content is loaded a second time. All calls are executed twice then.
Is there a way to prevent the scrollPagination function being active multiple times?
function loadscrollPagination() {
setTimeout(function() {
$('#content').scrollPagination({
nop: 10, // The number of posts per scroll to be loaded
offset: 0, // Initial offset, begins at 0 in this case
error: 'No More Posts!', // When the user reaches the end this is the message that is
delay: 500, // When you scroll down the posts will load after a delayed amount of time.
scroll: true // The main bit, if set to false posts will not load as the user scrolls.
});
}, 100);
}
$("div.detail").click(function() {
$('section').load('detailed-view.php', function() {
loadscrollPagination();
});
});
Perhaps jQuery.one() will do the trick:
#('section').one('load', 'detailed-view.php', function() {...})
See here for more info: http://api.jquery.com/one/
Hey guys I have a javascript function that keeps persisting even when navigating to another page (single page templates not multipage) in Jquery Mobile
<script type="text/javascript">
setInterval("window.location.reload();", 5000);
</script>
How do I ensure that this only occurs on the page from which it is called rather than it calling it on every page I link to with ajax based navigation?
I am using Jquery Mobile 1.2
Bind it to the page where you want it to occur. Replace $('.selector') with pageID, e.g. $('#home'). You could also be more specific $('div[data-role="page"]#PageID').
// Trigger interval
$('.selector').bind('pageinit', function () {
setInterval("window.location.reload();", 5000);
});
// Stop interval when navigating away
$('.selector').bind('pagehide', function () {
clearInterval();
});
How do I ensure that this only occurs on the page from which it is
called rather than it calling it on every page I link to with ajax
based navigation?
Don't call it? Currently your code is set up to always run when it's included on the page. Either don't include it or prevent it from running in some other way (such as an if-statement).
You could clear the interval just before you navigate.
First you need to get a reference to the interval when you create it:
var intervalRef = setInterval("window.location.reload();", 5000);
Then you can clear it like this:
clearInterval(intervalRef);
// Navigate
Just cancel your timeout when the other page loads, or when the current page exits (the other page loads in ajax so the timed interval stays up).
// trigger
myInterval = setInterval("window.location.reload();", 5000);
// stop
clearInterval(myInterval);
I have a small jQuery Mobile site with NavBar at the bottom of every page. The bar has some buttons, which should work across the site.
How to force pagebeforeshow event (on current viewed page) without knowing the page name/id?
Is there a general function to do this, or do I need to get name/id of the page first and them use this to call pagebeforeshow?
UPDATE
The following gets me a current page ID, but the trigger("refresh") does not seams to trigger any action (pagebeforeshow does not execute).
var CurrentPageID = $.mobile.activePage[0].id;
$("#" + CurrentPageID).trigger("refresh");
Any suggestions?
Here's a working example.
This will start page reload while clicking on navbar:
$('div[data-role="navbar"] ul li').bind('click',function(event, ui){
$.mobile.changePage(
'#'+$.mobile.activePage[0].id,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
This code will catch pagebeforeshow:
$('#pageID').live('pagebeforeshow',function(e,data){
alert('Reload');
//Execute AJAX here
});
I assume all the page you are navigating is divs with data-role attr. So you should able to bind event as below;
$('div[data-role="page"]').live( 'pagebeforeshow', showLoadDiv);
function showLoadDiv() {
//Your code here
}
//when you want to call it manually
showLoadDiv();
I'm trying to have a single page that can show the same type of data (lets say fruits). Then I want to load this page anywhere in my website hierarchy but each time with different parameters.
I have my main page like the following with two links to the same page show.html:
<div data-role="navbar" data-iconpos="top" data-theme="a" class="nav-ecommera">
<ul >
<li>
Apples
</li>
<li>
Oranges
</li>
</ul>
</div>
A click on each of the two buttons will create a new instance of the page show.html in the DOM. All of the items in show.html therefore will have duplicate ID's in the DOM.
In my javascript I want to dynamically fill the show.html page:
$('div[id="show"]').live("pagebeforeshow", function(e, data) {
var p = getUrlParameter("p");
show(p);
});
var show = function(p) {
$.ajax({
url:'http://show.com/?p='+p,
success: function(data) {
// Refresh 'show' page with new data
// First time: It's fine.
// Second time: 'show' page is duplicated in the DOM so it's messy.
}
});
}
Now the first time show.html loads everything is fine. However the second time everything in show.html is loaded twice and the DOM includes many duplicate ID's.
Is there a way to remove the first page from DOM before loading the new one?
Or:
Is there a better approach that will do what I'm trying to achieve here?
UPDATE:
I already tried removing previous instances of show pages when loading a new one. It works as far as showing the second page is concerned. But there is a problem when the first page needs to be shown for the second time, after being manually removed.
I think the reason is jQuery mobile seems to think the first page is already loaded, despite the fact that we manually removed it. So it doesn't fully reload the first page when accessed again. I'm talking about this sequence of navigation: Home -> Apples -> Back to home -> Oranges -> Back to home -> Apples (Here you get a defected page).
1) You could change ID`s to classes.
2) You can have wrapper that encloses the show.html and when you try to load it second time find the one you loaded previous and delete it.
Your show.html:
<div class='previous-load'>
... enclosed show.html HTML ...
</div>
JavaScript:
$('div[id="show"]').live("pagebeforeshow", function(e, data) {
var p = getUrlParameter("p");
show(p);
});
var show = function(p) {
$(".previous-load").remove();
$.ajax({
url:'http://show.com/?p='+p,
success: function(data) {
// Refresh 'show' page with new data
// First time: It's fine.
// Second time: 'show' page is duplicated in the DOM so it's messy.
}
});
}
You can load the show.php page via $.mobile.changePage() which has the reloadPage option:
//bind to all links that have an HREF attribute that starts with "show.html"
$('a[href^="show.html"]').bind('click', function () {
//set a default query-string for the page-load
var query = '';
//if this link's HREF attribute has a query-string, use it
if (this.href.indexOf('?') > -1) {
query = this.href.split('?')[1];
}
//forward the user to the page, telling jQuery Mobile to reload the page
//which will use the new query-string sent
$.mobile.changePage('show.html', { reloadPage : true, data : query });
//prevent the default behavior of the click
return false;
});
reloadPage (boolean, default: false)
Forces a reload of a page, even if it is already in the DOM of the
page container. Used only when the 'to' argument of changePage() is a
URL. Here is the documentation for $.mobile.changePage():
Source: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
When jQuery Mobile loads the same page twice it's because the URL in the HREF attribute does not match the data-url attribute on the pseudo-page elements. For debugging this issue, make sure to check what data-url attribute is being added to your show.html page as it's inserted in to the DOM. If it doesn't seem to match-up, then you can set a data-url attribute on the element like:
<div data-url="/show.html" data-role="page" id="show-page">
...
</div>
Then you would always link to the page using the URL: /show.html
I have a scenario to refresh the browser after the page is loaded for first time or one time.
Because the data is not showing properly when the pages is loaded,and when i refresh the browser it is showing.I don't know the reason.
Many Thanks
So you only want the browser to refresh once? Do something like this.
window.onload = function(){
if(!document.location.hash){
window.location = "#loaded";
}
}
or jquery
$(document).ready(function(){
if(document.location.hash){
window.location = "#loaded";
}
});
But in all honesty this is just a temporary solution. As much as you try to cover it up with quick fixes. I guarantee it will come back to haunt you. Well written and structured code will last a lifetime and can always be reused on future projects.
Invariably, you're going to have to use some JavaScript. What you want is for your refresh code to run when the page is completely loaded. You could use the HTML onload event, but there are problems with this (e.g. it will fire before any images are loaded). I would suggest using JQuery's ready() event, if you want to be sure it fires after the entire page is loaded.
Example:
// NOTE: This will only work with JQuery loaded.
$(document).ready(function(){
location.reload(true);
});
Making this only fire on the first page load is a bit more tricky. You could add an anchor suffix to the URL to keep track of whether you've refreshed the page yet or not, and then only refresh if it is not present in the URL:
$(document).ready(function(){
if(location.hash != "#")
{
// Set the URL to whatever it was plus "#".
// (The page will NOT automatically reload.)
location = "#";
// Reload the page.
location.reload(true);
}
});
Alternatively, you could use the query string, since this will automatically refresh the page when changed:
$(document).ready(function(){
var marker = 'r'; // 'r' is for "refreshed"
if(location.search != "?"+marker)
{
// Set the URL to whatever it was plus "?r".
// (This will automatically force a page reload.)
location = "?"+marker;
}
});
Caveat: With either of these samples, if your user bookmarks the page after the "#" or "?r" tag has been added to the URL, the page won't refresh when they revisit the page. If you want it to be bulletproof, you might have to use a cookie instead.