I'm using angular in a rails app and have ui-router set up with several states.
name: 'item'
url: '/items'
child states
name: detail
url: "/{item_id:[0-9]{1,4}}/detail"
parent: item
I'm transition between states using
$state.go('detail', item_id: id)
All appears to be working fine except when I click the back button on the browser.
When the back button is clicked the location in the browsers address bar correctly changes to show the unique url of the previous state however the ui-router doesn't seem to change state and I get no $stateChangeStart event.
Is this the normal behaviour of ui-router or have I got something set up incorrectly?
If it is the normal behaviour is there any way I can force a state change when the back button is clicked?
The normal behaviour of ui-router is, that the browser back button is working out of the box (exactly as we would expect).
Try to play with this example, there is also the listener '$stateChangeStart' writing into console
.run(function($rootScope, $location){
$rootScope.$on('$stateChangeStart',
function (event, toState, toParams){
console.log(toParams)
});
})
(click the blue icon in the right top corner, to open the preview in separated window) ... you can navigate among few details and then use backspace keyobard to mimic the back button... all is correctly re-trigerred... check it here
Related
When I use just plain ActionBar:
<ActionBar/>
when I changing route with:
this.$navigateTo(Catalog)
the native ios Back button appears normally,
but when I change action-bar like this:
<ActionBar title="some title"/>
or put other elements inside action-bar like this:
<ActionBar>
<NavigationButton text="Go back" android.systemIcon="ic_menu_back" #tap="goBack" />
<ActionBar/>
the default native ios Back button disappearing.
What I need in the end is default ios action-bar with custom title and native ios back button that appears when I navigate between components. Please help, thanks in advance!
Solved my problem. I was using ActionBar in my main component(where tabs where defined). Instead, I removed it from my main component and added its own ActionBar for every component. That solved the problem. Now the default ios back-button displaying properly with any other combinations of params or nested elements and it doesn't matter wether you route to frame of same component or not.
I'm unable to reproduce the issue on my end, the NavigationButton is still visible when I use the exact code snippet above, tested with iOS v12.1.4. Please share the Playground sample if you still have the issue on your end.
However, you will not be able to modify the tap handler on iOS as mentioned in the docs.
In iOS, the back button is used explicitly for navigation. It
navigates to the previous page and you cannot handle the tap event to
override this behavior.
If you want to place a button on the left side of the ActionBar and
handle the tap event (e.g., show slide-out), you can use ActionItem
with ios.position="left".
As described here in Safari on iOS7 - if you swipe in from the left of the screen it triggers a history back event as if the user clicked the back button.
The default behavior of jQuery Mobile is to reverse the transition that was used to reach a particular page when going back to the previous page. This works great when using the < and > buttons but looks terrible when swiping in from the left.
Is there a way to completely disable transitions in the 'reverse' direction using jQuery mobile?
Just capture the pagecontainerbeforetransition event on the page widget.
You can then look at ui.options.reverse and cancel the transition. If you want you can detect iOS7, but I think I'll just give this to all my visitors.
$(document).on("pagecontainerbeforetransition", function (event, ui)
{
if (ui.options.reverse == true)
{
ui.options.transition = "none";
}
});
Here's a sample of a typical ui.options object.
{"reverse":true,"changeHash":false,"fromHashChange":true,"showLoadMsg":true,
"allowSamePageTransition":false,"transition":"none"}
For some reason reverse always seems to be true even when navigating forward. May be a but, but I decided to check for it anyway.
I have a web part connected to another (provide a row to). It shows the radio button that when clicked correctly provides the data to the second web part.
Can I have this radio button selected by default so that it automatically provides the filter data as soon as the page is loaded?
if you find any jquery/javascript relevent to this please share it and will be more helpful to me.
When you click the radio button from jQuery, the event should be raised as well:
$(document).ready(function() {
$("input:radio[value='your-value-goes-here']").click();
});
Be cautious if you use the value more than once on the page! If possible address the radio button with an id:
$("#Your-Radio-Button-Id").click();
Even though Senscha claims ExtJS isn't supported on mobile devices, it works quite well. The only little annoyance that I have is that a sub menu of a popup menu requires two touches ('clicks') to activate.
It seems the first touch activates the menu, the second touch activates the menu option itself. In a menu with multiple options, clicking any option once results in all options being clickable.
I have a popup menu with checkboxes, these have the same issue. Click one activates (i.e., blue background) the option, click 2 actually clicks the checkbox.
I'm sure there's a way to tell the prototype of the menu to register the first touch as a click, but I've been unable to find it. Any help would be greatly appreciated!
I can't believe it. I think I found a way! Very hacky, but it works.
Ext.util.Observable.observe(Ext.menu.Item);
Ext.menu.Item.on('activate', function(obj, The, eOpts) {
if (obj.checkHandler) obj.checkHandler(obj);
if (obj.handler) obj.handler(obj);
if (obj.checkHandler || obj.handler) {
if (obj.up().closable) obj.up().close();
if (obj.up().up().closable) obj.up().up().close();
}
});
Later on I'll need to add code that actually walks the tree up to support multiple levels of submenus, for now one is the limit.
This whacky stuff could be replaced with simply calling the menu's Click() event, but that doesn't seem to work. I tried:
Ext.menu.Item.on('activate', function(obj, The, eOpts) {
obj.fireEvent('click');
});
with all flavors of parameters, but no luck.
Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:
Using this to set the back button:
Copy code
<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
And this in a script file:
Copy code
$('#awards-details-page').live('pagecreate', function(event){
$('#awards-details-page input[name=submit]').bind('vclick', function() {
console.log('I'm going to be hijacked by the back button.');
});
});
Clicking on the back button will produce the message in the console when tested in a browser.
Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button's bindings persisted.
Can anyone shed some light on this?
Thank you in advance.
dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind... bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = "#page1", you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.