Ionic Back Button Go to Previous Page with Query String - ionic-framework

I'm developing an ionic app, I faced a problem where I'm on Page A going to Page B with query string ex:
Page A: #/app/channels-inside?id=30
Page B: #/app/nowplaying
This is where the problem lies. When I click the back button it goes back to the correct page but without the query string (URL becomes #/app/channels-inside. How do I handle this where I want to redirect to previous page with the id in it?

I think you should use it.
AngularJS: $ stateParams
.controller('yourCtrl', function ($scope, $stateParams){
$stateParams.id
})

This cant be achieved with default pop() method as its action is limited to popping the component from navigation array. What you can do is use insert and remove functions of NavController. Insert channel-inside in the navigation stack with the params you want. Then remove now-playing and already existingchannel-inside.
insert(insertIndex, page, params, opts)
Inserts a component into the nav stack at the specified index. This is
useful if you need to add a component at any point in your navigation
stack.
remove(startIndex, removeCount, opts)
Removes a page from the nav stack at the specified index.
Check out the docs.
Edit
Or you could use Events to pass the params
constructor(public events: Events) {}
// in now-playing
function createUser(user) {
console.log('User created!')
events.publish('user:created', user, Date.now());
}
// in channel inside
events.subscribe('user:created', (user, time) => {
// user and time are the same arguments passed in `events.publish(user, time)`
console.log('Welcome', user, 'at', time);
});

Related

Ionic 2: NavPop brings me to root rather than previous page

I am having an issue with navigation in my app. The page hierarchy works like so:
Top
VisitComponent (non-tabbed)
CheckInPage (non-tabbed)
ClientGenericPage (tabbed)
HelloIonicPage (non-tabbed)
Root
A standard flow of events would be:
Start at the HelloIonicPage
push() the ClientGenericPage
Select the tab corresponding to the CheckInPage
push() the VisitComponent from a button on the CheckInPage
The issue arises when I attempt to pop() from the VisitComponent. I would expect to end up at the CheckInPage but instead I end up at the HelloIonicPage (root component).
When I call this.navCtrl.getViews() I see an array of 2 views: [CheckInPage, VisitComponent].
I am really at a loss as to why I would end up at the root after calling this.navCtrl.pop().
As it turns out, the ClientGenericPage header was displayed on top of the VisitComponent header, and thus clicking back was firing the event on the parent, not the child.

switch back to previous tab in browser by using protractor

I am trying to get the second tab in my window browser by using below code but it is not working for me. Can any one suggest me easy way.
browser.getAllWindowHandles().then(function (handles) {
//Code for switchTo one Tab to another Tab in Same Browser
browser.switchTo().window('http://localhost:4200/home-unauth');
});
Resolved promise of getAllWindowHandles returns an array of tabs uuid. You even don't need to decode the values; new tab is added as last parameter of that array.
Try that - switch to second tab:
return browser.getAllWindowHandles().then((allTabs) => {
return browser.switchTo().window(allTabs[1]);
});

GWT Detect DOM changes or modifications

What am I trying to do?
I have an existing page (generated by system automatically and I don't have any control on it) in which I am injecting GWT code to modify the behaviour of the page after it loads based on certain columns and augment the functionality of the page. For example after adding my GWT code, cells in one of the table columns become clickable and when the user clicks it, additional information is displayed to the user in a pop-up panel. All that is working fine.
What is the issue?
The generic page in which I am injecting my code has paginated table which shows 15 rows at a time. Now, when I load/refresh the page, my GWT code kicks in and sinks events in the specific column which adds functionality (described above) to the cells. However, when the user uses the left and right buttons to navigate the paginated result, the page does not refresh as it is an asynchronous call. The specific column in the new set of 15 rows is now without the sunk events as the GWT code does not know that the page changed.
I am trying to find a way to tell my GWT code that page has changed and it should sink events to the cells of specific column for the new 15 rows but unable to find any method or mechanism to help me capture a DOM/Document change event. I tried doing this but did not help:
new ChangeHandler(){
#Override
public void onChange(ChangeEvent event) {
Window.alert("Something Changed");
}
It is possible I am missing something very obvious. Posting this question to know if there is an easy way to figure out DOM changes in GWT. Have searched for DOM/Document change/mutation/ etc. without luck.
If anyone knows how to detect DOM changes in GWT would really appreciate otherwise would go ahead writing native code using native mutation observers.
You can try something like this:
First get the input elements with:
InputElement goOn = DOM.getElementById("IdOfGoOnButton").cast();
InputElement goBack = DOM.getElementById("IdOfGoBackButton").cast();
Next add a native EventHandler:
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONCLICK) {
if (event.getNativeEvent()
.getEventTarget() != null) {
Element as = Element.as(event.getNativeEvent()
.getEventTarget());
if (as.getTagName()
.toLowerCase()
.equals("input")) {
InputElement clickedElement = as.cast();
if (clickedElement.getId().equals(goOn.getId()) ||
clickedElement.getId().equals(goBack.getId())) {
// one of the paging button is pressed
}
}
}
}
}
});
Hope that helps.

function should not change current view

I have a form that submits to a function and returns a particular view when certain values are submitted.
However I require it to return nothing when no values are matched, or if values are empty. At the moment, when this happens I am redirected to a blank page.
I require a function to return "something", so the view is not changed.
Returning 'nothing' or 'emptyresult', still yields a blank page.
regards,
Andrew.
You have to return a new view to the browser. If you want to display the same view again as before, then you should redirect to the action which rendered the previous view (RedirectToAction).

JQgrid:Get the action from the pager

how can i get the action (what button was clicked) when a button is clicked in the pager?(edit, del, add...)
You probably means button of the navigation bar or navigator (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator).
You can implement what you want with at least three different ways:
You define your custom buttons which look like the original add/edit/del buttons (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons) and use {add:false, edit: false, del: off} parameter of navGrid to switch off standard buttons.
You can use addfunc, editfunc and delfunc if you want replace the default add/edit/del functions.
You can use onclickSubmit or afterSubmit or some another supported events (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events) of add/edit/del button to do some additional action on click the buttont or on submit.
You can chose the way which is the best for your requirements.
You can use the grid onPaging event:
This event fires after click on [page
button] and before populating the
data. Also works when the user enters
a new page number in the page input
box (and presses [Enter]) and when the
number of requested records is changed
via the select box. To this event we
pass only one parameter pgButton
(string) which can be -
first,last,prev,next in case of button
click, records in case when a number
of requested rows is changed and user
when the user change the number of the
requested page.requested page.
Also there are beforeRequest and LoadComplete events. Examples that worked for me are as follows:
beforeRequest: function () {
$.blockUI();
//alert("before request");
},
loadComplete: function () {
//alert("load complete");
$.unblockUI();
}