Working on an iPhone app using the ionic framework(which is great). Currently im am using the $state variable to redirect usings, say 'on a successful login'.
I am writing this like so...
$state.go("app.search");
I have also tried
$state.go("app.search", {}, {reload: true});
Both of which correctly load the /search page but provide me with the back button at the top left with the menu.
Now i want the back button on the other functionality. I'm wondering if I need to call a different method to changes pages or if i can temporarily disable it on some views?
Any pointers would be great!
This might be a little late but in case someone else gets here looking for an answer, you can use the $ionicViewService as described below
function controller($scope, $state, $ionicViewService) {
$ionicViewService.nextViewOptions({disableBack: true});
$state.go("app.search");
}
Related
I have a rails app with a nice navbar that can fold and unfold. The navbar contains links that point to different controllers and actions.
Every time a user clicks on one of the links, the browser goes to the new page and the navbar gets reset to its initial state.
I need to maintain the fold/unfold status of the navbar between calls (that is better user experience).
I'm not sure how to do so.
I thought to add in the javascript that handles the folding a URL parameter so that the next view can dig it and load the menu in the previous state. This parameter would be completely handled in the view, so no changes in the controllers.
I'm not sure this is the best way to approach this.
I've been suggested to use the session object. but I think that this will still require some sort of passing params (still via URL), and would require changing the controllers (there are many, I'm not very happy to change them all and after all this is a purely user interface matter).
Would it be reasonable to use the window.local/session storage for this?
any suggestions?
You could have a boolean in your database that gets updated every time the user clicks a link in the navbar and then redirect to the appropriate view.
The view decides which status of the navbar to show (folded or unfolded) based on the value of the boolean.
In the end I went for using localStorage,
It was rather simple to implement, and it's a purely JS solution, the only side effect is that when the page load there's an extremely fast flicker when the navbar is open (the navbar is loaded closed, then JS opens it).
the code just runs down to these few lines of code:
$('.chevrons .open').click(function(event) {
localStorage.setItem('navbar', 'open')
....
});
$('.chevrons .close').click(function(event) {
localStorage.setItem('navbar', 'closed')
....
});
if (localStorage.getItem('navbar') === 'open') {
$('.chevrons .open').trigger('click')
}
I have written some code that generates a set of buttons when the page loads using a loop, each iteration of the loop increments an ID value to assign to the new button.
I originally wrote it using standard JQuery but because of the way JQuery Mobile works, I am having to rewrite it.
<a id = "<?php echo $button_id_add_to_cookbook ?>"onclick="update_button('<?php echo $button_id_add_to_cookbook ?>')" data-role="button">Send</a>
the function update button is below, at least the test trial version.
function update_button(id)
{
$(id).click(function(){
$(id).toggle();
});
}
I'm having a hard time finding 2 accounts that say how to do this the same way so don't think this is correct.
The goal it to dynamically generate a set of buttons and when a button is clicked, it will call some code to alter a mysql database and on success hide the button that called the function. For this example I just want to hide the button when t was clicked.
Can anyone help me with the correct way to do this, the page should not refresh, just update the button element.
I think it was a spacing issue causing problems, for dynamic id content this seemed to work as a replacement function.
function update_button(id)
{
$('#' + id).closest('.ui-btn').hide();
}
if this will lead to any issues in the long term please let me know!
I've a little problem with a jQuery Mobile app I'm building. I have page where a back button using data-rel="back. It works well except in one case :
These page can be access by a link from an e-mail. So, when you come from the e-mail, the back button will not work.
So, is there a way to test if there is a previous URL or if the user comes from an e-mail ?
Could you check for the data-rel='back' attribute?
$("a:jqmData(rel='back')").length
Example:
http://jsfiddle.net/KHhv4/4/ (loading normally)
http://jsfiddle.net/KHhv4/5/ (Loading page2 first to mimic email)
OK maybe this is a better option.
$(document).ready(function(){
$('a[data-rel="back"]').hide();
})
$('a').on('click', function(){
$('a[data-rel="back"]').show();
});
I am working on a web-app for my employer and I am using some jquery. I am fairly good at PHP, but lost in jquery. My question is as follows:
I have a a working tabs page that loads a monster PHP page when it first loads. I need to make sure that this particular tab only loads when the page is called (the first time only). I have the initial tab cached, and if you click on another tab everything is fine. The problem is that when you click a link from within the tab it reloads the monster PHP page. Here is the code:
$(document).ready(function() {
$("#frame").hide();
$("ASA").tabs({ cache: true });
$("#tabs").tabs();
});
function CH(ids){
$("#tabs").tabs("select" , "#CH");
$('#CH').load('test.php?id='+ids);
cache : true
}
function onIFrameLoad() {
$("#loader").hide('slow');
$('#frame').slideDown('slow');
}
Function CH is where I am having trouble (I guess). I have cache:true in there, but it was a shot in the dark. The only tab I want cached (at this point) is the main tab (ASA).
Thanks for the help.
The correct syntax for using cache is
$( ".selector" ).tabs({ cache: true });
However, this would work only if each tab is loaded remotely (ie. ajax). There's no reason to do this if you use the original HTML structure given by the documentation, because all of the contents for all tabs are loaded all initially. You also cannot (as far as I can tell) turn caching on for individual tabs.
What we really need to see is what HTML structure you've got for this. Also, the selector $("ASA").tabs({ cache: true }); probably won't work, as ASA isn't a valid HTML element.
Ok... so it is a complete hack/workaround, but I have a solution. I would love to hear the RIGHT way to do it if someone can direct me, but here is what I did:
In each tab I pre-load a blank iframe.
My links all now point to iframes instead of functions.
Each iframe calls a function to "select" its tab from the parent.
Result is that after load the tab is shown and the main tab is never refreshed.
Again, I know it is a hack, if you have a better way please let me know.
I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.
After the user clicked the category I want to change the browser's address bar url from
www.mysite.com/products
to something like
www.mysite.com/products/{selectedCat}
without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?
With HTML5 you can modify the url without reloading:
If you want to make a new post in the browser's history (i.e. back button will work)
window.history.pushState('Object', 'Title', '/new-url');
If you just want to change the url without being able to go back
window.history.replaceState('Object', 'Title', '/another-new-url');
The object can be used for ajax navigation:
window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');
window.onpopstate = function (e) {
var id = e.state.id;
load_item(id);
};
Read more here: http://www.w3.org/TR/html5-author/history.html
A fallback sollution: https://github.com/browserstate/history.js
To add to what the guys have already said edit the window.location.hash property to match the URL you want in your onclick function.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
I believe directly manipulating the address bar to a completely different url without moving to that url isn't allowed for security reasons, if you are happy with it being
www.mysite.com/products/#{selectedCat}
i.e. an anchor style link within the same page then look into the various history/"back button" scripts that are now present in most javascript libraries.
The mention of update panel leads me to guess you are using asp.net, in that case the asp.net ajax history control is a good place to start
I don't think this is possible (at least changing to a totally different address), as it would be an unintuitive misuse of the address bar, and could promote phishing attacks.
This cannot be done the way you're saying it. The method suggested by somej.net is the closest you can get. It's actually very common practice in the AJAX age. Even Gmail uses this.
"window.location.hash"
as suggested by sanchothefat should be the one and only way of doing it. Because all the places that I have seen this feature, it's all the time after the # in URL.