I use with framework7 initialize property that called : domCache: true.
the loading page is work fine:
mainView.router.load({ pageName: dataPageName });
but the back page remove the page from the DOM. and this is not fit to the cached dialog .
mainView.router.back({ pageName: dataPageName });
how do i prevent the back to remove my page from DOM ?
Try uniqueHistory and pushState true while initializing myApp object.
uniqueHistory: true,
pushState: true
Related
On loading, my web page has the following url :
http://mywebsite.com?param1=test¶m2=test2
I use the following code during startup to remove from url the parameters once the web page is loaded:
if (window.history && window.history.replaceState) {
window.history.replaceState(null, null, window.location.pathname);
}
Thus, my url becomes :
http://mywebsite.com
The problem is that the user refresh the page in the browser, i need to add again the parameters previously removed. How can i do that when the user refresh the page ?
$(window).unload(function() {
// Add again parameters before reloading ..
});
You can store the paramaters in localStorage and then check for their presence when the page is reloaded.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I have a webview template which loads data from a link. So, if I have to load a separate webview I use the same template and controller and change the link. It works fine for most cases. However, if I try to load a different webview from the current one it does not work. The reason is that the controller is not triggered again as we are loading the same view. I tried navigating a different page and then moving to webview template, however the result is the same the controller is not initialised. How can I trigger the controller or have the controller reload?
I tried setting cache to false globally and setting reload to true however it still does not reload the controller.
Here is how my code looks
.state('webView', {
url: '/webView',
cache: false,
templateUrl: 'templates/webView.html',
controller: 'WebViewCtrl',
reload: true
});
I have also set
$ionicConfigProvider.views.maxCache(0);
However, my controller still refuses to reload. Any ideas on what am missing?
Finally ended up using state transition mentioned in this link - https://github.com/angular-ui/ui-router/issues/582.
$state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true });
This did the trick for me and reloaded my view and the controller.
For example, I want this change in navigation to reload the state:
#/detail/1
#/detail/2
But I do not want this navigation to reload the state:
#/detail/1?search=blah
#/detail/1?search=huzzah
According to the ui-router documentation, setting reloadOnSearch: false should accomplish this, but try the plunk below. When reloadOnSearch === false, changing the path parameter doesn't reload the state even though the documentation says it should.
Plunkr: http://run.plnkr.co/ZPy9uabYlkMilwdS/#/param
I've created a plunker, demonstrating that ui-router feature reloadOnSearch is working as documented here:
reloadOnSearch:
Boolean (default true). If false will not retrigger the same state just because a search/query parameter has changed. Useful for when you'd like to modify $location.search() without triggering a reload.
So, what this says, that if we do have state like this
.state('index.detail', {
url: '/detail/:id',
reloadOnSearch : false,
...
})
navigating to the
ui-sref="index.detail({id:1})"
will load this state, while navigating to
ui-sref="index.detail({id:any-other-id})"
will do nothing. But! If we would introduce new (e.g. sibling) state defined like this:
.state('index.other', {
url: '/other/:id',
reloadOnSearch : false,
...
})
navigating to below sequence will always re-trigger state reload, not because the param change, but because the state change
<a href="#/index/detail/1" ...
<a href="#/index/other/1" ... // will relaod
<a href="#/index/detail/2" ... // because the state
<a href="#/index/other/2" ... // is changing
See that all in action here...
This is a bug in UI-Router that was fixed in release 0.2.15:
https://github.com/angular-ui/ui-router/releases
Upgrading to the latest will fix the issue
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 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