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')
}
Related
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");
}
I've been searching for a way to remove the initial page container after jQuery mobile loaded the next page content via $.mobile.changePage(...)
What I'm experiencing is that this initial DIV element, created when the page is first shown will always remain on the page - and will only be hidden after calling $.mobile.changePage(...)
I need this initial page container to be removed instead, since some old data reside there that should be reset on first page change.
Anyone has a solution? Been searching the web for it but to no avail.
I have also tried to do $('#first-page').remove() after I called $.mobile.changePage(...), but that will remove the initial page and make the new loaded page hidden!
EDIT: solved by clearing up the initial DIV using .html("")
You could just make next page load without ajax, this should remove the initial page.
data-ajax="false"
Hope this helps!
I take it that you are dynamically creating these pages. There is a hidden method in the API, but you can apply it to any page and then upon that page's exit, it will be removed.
$.mobile._bindPageRemove
So, it might look like this
newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );
NOTE: Since this is a hidden method, it is part of the hidden API and could be subject to change without notice upon upgrade. Test carefully upon upgrade if you use this.
I did:
$.mobile.changePage('login.html', {changeHash:false});
changeHash (default: true) Type: Boolean Decides if the hash in the
location bar should be updated. This has the effect of creating a new
browser history entry. It also means that, if set to false, the
incoming page will replace the current page in the browser history, so
the page from which the user is navigating away will not be reachable
via the browser's "Back" button.
We're having a problem with our app allowing people to sign up multiple times with the same account information (email, specifically).
Our user model validates the uniqueness of the email parameter, and we are also using some javascript to make sure that once the "sign up" button is clicked, it becomes unusable unless the sign up fails (theoretically ensuring only a single click).
It appears that the problem stems from users double-clicking the signup button before the javascript on the page finishes loading.
Is there a way from the Rails side that we can prevent this? Maybe something that creates a request stack, and then iterates through them? I ask because we can't be the only site that has this issue.
Thanks
Dumb question: Why don't you set the field in the database itself to unique?
If that is not possible, do what Steve Bourne suggested and use something like this:
var clicked = false;
$('#submit_button').click( function() {
$(this).preventDefault();
if(!clicked) {
clicked = true;
$('#submit_button').attr('disabled','disabled');
$('#form').submit();
}
Now, I didn't test that so setting clicked = true may be overkill ;)
Set the text field to Nothing right after the insert.
Not entirely convinced that's what's happening, but another option would be to only enable the submit button in jQuery's ready function, and start off with it hidden or disabled. Are you running a large amount of JS outside of the ready function?
If the problem is that users submit the form before your javascript is finished loading, why not make that impossible? (i.e. the submit button action doesn't submit the form, but your javascript submits on the click event?)
There are a few ways to then prevent dupes in JS; sounds like you've got that covered already.
I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.
I have a tabTemplate set as follows on the initial addition of the tabs.
tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"
And the add tab functionality is done via
$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)
If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.
Next time that specific tab is visited the link should actually be 'http://thanksforyourhelp/greatly/appreciated/ID' where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for "ID."
I've looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?
The tab looks like this.
new
I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.
Edit: removed edits with references of no longer existent urls.
I haven't worked with AJAX-powered tabs too much, but I think you want the url method:
$("#tabs").tabs("url", index, url)
Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.
Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this
var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);
This will change the URL of tab at particular index and load that tab.
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.