Call custom function on click of ionic 2 RC.1 Back button - ionic2

How can I call a function on click of back button in Ionic 2 from a specific page?
I have the following scenario in my mind. Lets say I navigate like below:
PageA --> PageB --> PageC --> PageD
Now when I click back button on PageD I want to go back to PageB instead of PageC. I want to call below function on click of back button.
goBack(){
this.navCtrl.popTo(PageB);
}
I have done it Like this:
ionViewDidEnter(){
this.bindMethodToElement('back-button',this.goBack);
}
bindMethodToElement(elementClassName,functionToBind){
try{
let elements = document.getElementsByClassName(elementClassName);
let currentElement : Element = elements[elements.length - 1];
currentElement.addEventListener("click",functionToBind);
}catch(exception){
console.log(exception.message);
throw exception;
}
}
Does anyone know better approach to do it. I also want to achieve similar behavior when user clicks on the device back button.

Such a feature was already reported to the Ionic team and they are validating it. In the meantime you can use this workaround:
goBack(){
this.navCtrl.pop().then(() => {this.navCtrl.pop()});
}
Ugly solution but works. Good luck!

Related

How to allow a button that creates a new object in SwiftUI from not making an object on reload?

So I'm making a button for a "New Note" in Swift UI similar to the Apple Notes app.
Right now my "New Button" is a "Navigation Link" like so:
NavigationLink(
destination: EditorView(makeNewNote())
) {
Text("New")
}
Unfortunately—this triggers my app to create a new note every time the view loaded. :(
:/
I've been looking for a way to initate a segue on button push but I'm not finding success on this yet.
When I tried a modal—I found myself having the same problem
Button("New") {
self.isNew = true
}.sheet(isPresented: $isNew, content: {
EditorView(makeNewNote())
})
I'm wondering what the best way to approach this would be.
Having no success :(
Edit:
I referred to this and the documentation but I haven’t found a way to segue via a button push which would be ideal. (The function dosent get triggered in the closure :)
https://www.hackingwithswift.com/quick-start/swiftui/how-to-push-a-new-view-onto-a-
Also...if you were curious what makeNewButton() does—it basically inserts a new Core Data object into my app’s managed context.
I'm not entirely sure, but it kinda sounds like to me your problem lies in your model. Because each time your View loads it calls the makeNewButton() function right?
Maybe you can fix the problem by displaying the "new note" view and having an extra "Save" button that only makes changes to your model once it's triggered.
Alternatively, you could use context.rollback() to discard changes. Also, check out this Project. It's Beta 4 but works just the same and imo is a good example how to use CoreData with SwiftUI. :)

How to push a new page when clicking ion-item and retrieve data

I am using Ionic 2 and a list of clickable ion-item with details arrow:
<ion-item-group>
<button ion-item (click)="onWhenItemClick()">
Quand
<ion-note item-end>{{ date }}</ion-note>
</button>
<button ion-item (click)="onWhereItemClick()">
Où
<ion-note item-end>{{ location }}</ion-note>
</button>
</ion-item-group>
As there is this arrow I would expect (as a user) to see a new page sliding from right to left when clicking on of these items.
For your information, each ion-item should bring me to a page that only displays a list of radio items.
I would like to recreate the same mechanisms as a select or a modal but with a page.
So basically I want to push a new page (easy) and be able to pop/dismiss it and handle this dismissal with as function like onDismiss().
How would you do that?
Pushing the new page is not
There's no event for passing data back on dismiss of pages and haven't seen anything or any news about they implementing this functionality, you would really need to create modal instead of simply pushing a page.
So import modal on your page and add it to your constructor and do the following
onWhereItemClick(){
let modal = this.modalCtrl.create('YourPage');
modal.onDidDismiss(data => {
// HANDLE THE DATA YOU WANT TO PASS BACK
});
modal.present();
};
Then, in YourPage you'll import ViewController, add it to constructor and then
dismissModal(){
let myData = ''; // THIS IS THE CONTENT YOU WANT TO PASS BACK
this.viewCtrl.dismiss(myData);
};
With this you'll be able to send data back to your page and handle it.
Hope this helps.
EDIT
A workaround would be saving the data of your dismiss in localStorage or another way to persist it and then, when the user go back to the page you get it, something like this:
Your Page
ionViewWillEnter(){
this.storage.get('dataYouWant').then(data =>{
if(data){
// HANDLE DATA
}
});
}
ionViewWillLeave(){
this.storage.remove('dataYouWant');
// REMOVE THE DATA SO IF YOU COME BACK TO THIS PAGE FROM ANOTHER WAY IT DOESN'T LOAD DATA YOU DON'T WANT
};
Pushed Page
ionViewWillUnload(){
this.storage.set('dataYouWant', dataYouWant);
// SAVE DATA YOU WANT TO USE
}
The way when the second page is going to unload it'll save data on a localStorage to be used in your first page. If there's any concurrence problems you can try using ionViewDidEnter() on the first page instead of ionViewWillEnter()
To go to a new page you would need to use,
navCtrl.push(PageName)
To send data along with the push,
navCtrl.push(PageName,{Param1:"your data"})
To retrieve the pushed data from other page,
navParams.get("Param1")
In your case, you can pass some data while pushing your page like this,
onWhenItemClick(itemData){
this.navCtrl.push(PageName,{Param1:itemData)
}
and retrieve your data from the other page
I suggest you to have a look at this amazing tutorial https://www.joshmorony.com/passing-data-between-pages-in-ionic-2/
You're going to want to use Ionic's navController. It behaves very much like a stack, where you push new views onto the stack, and then pop them off to go 'back'
So to navigate to a new page you would
navCtrl.push(myComponent)
Then to go back you would remove that view from the stack with
navCtrl.pop()
You can also use navCtrl.popToRoot() to jump all the way back to your root view controller
Please see their docs for more examples and information at https://ionicframework.com/docs/api/navigation/NavController/

Ionic 2 cancel hard BACK button override -> To close app on back button when user is on one of the main Tab pages

I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.
I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.
I created a custom behaviour to close the app:
private registerSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){
this.platform.exitApp();
}.bind(this),101);
}
}
My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.
But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){return true},101);
}
}
Or
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(event){event.unbind()},101);
}
}
But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?
I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).
First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:
it suggests not trying to override the default back button behavior.
So I've looked for other solutions. I've found one that is not really clean but works.
To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).
So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.
In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.
Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).
So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():
ionViewWillEnter(){
this.navCtrl.parent._selectHistory=[];
}
This.navCtrl is my NavController object passed in the constructor of the page.
That's it.

Qt wizard back button Ui issue

I'm new with Qt and I'm making a little application. I've do it with QWizard and QWizardPages.
I Have added 2 CustomButtons to the wizard so it has 5 buttons down: ButA, ButB, Back, Next/Finish, and Cancel.
ButA and ButB don't have to appear in all WizardPages. Eg:
WP0: just ButB
WP1: ButA and ButB
To do that, I have:
void WP0::initializePage()
{
wizard()->button(QWizard::CustomButton1)->setVisible(false);
}
With that when the app starts, you can't see butA. BUT if you go to the next page (where you see ButA and ButB) and then you click on BackButton, then you see ButA in WP0.
I supose that then you click on BackButton there is no call to WP0::initializePage() so my question is: how or where should I call that wizard()->button(QWizard::CustomButton1)->setVisible(false);
to never see ButA on WP0 ? Or what should I do?
I don't know if I understand your question completely. your description is kind of complicated. I think you should try button's events. It means you should call this function in press event or something like that and it's better that you define a boolean variable for true or false and call it by reference. I think this should solve your problem.

Hidden FreeTextBox bug on Firefox

I have a problem with the FreeTextBox rich Text Editor in my ASP.NET site. The problem occurs when I access the site with firefox, and I have a freetextbox instance in a hidden div. The hidden div might also be an AJAX Tab Panel. The actual problem is that when the page loads it throws an uncaught exception (firebug shows the StoreHtml() function) and halts the postback!!
Is anywhere of the problem and a solution for it??
Thanks
I recently met a similar problem with jQuery UI tabs. What you need to do is to change the CSS for hidden tabs to something like:
.hiddentab
{
position: absolute;
left: -99999999999999;
}
This puts hidden tabs far to the left, and in absolute position mode this does not cause horizontal scroll bars to appear. When the tab is shown, simply remove the hiddentab class from the tab element.
This will work if the problem is related to Firefox' odd behavior with display: none.
I have found another solution to the problem in case anyone is looking for it. What I did was use javascript to override the OnSubmit function of the form, thus catching the exception that caused the problem and going on with the rest of the code.
However the solution is kind of "hack" since it does not cover every situation. I found the solution in the FreeTextBox forum and tried it out and it works. The only difference in my code is that I return true in the end of the override function:
function OvrdSubmit()
{
var ftbSubmit=document.forms[0].onsubmit;
if (typeof(ftbSubmit) == 'function')
{
document.forms[0].onsubmit = function()
{
try{ftbSubmit();}
catch(ex){}
}
}
// We are ok
return true;
}
Since my site is an ASP.NET site I also had to add this line in the Page_Load():
ClientScript.RegisterOnSubmitStatement(this.GetType(), String.Concat(this.ClientID, "_OnSubmit"), "javascript: return OvrdSubmit();");
Hope it helps anyone with the same problem.
Firefox has a problem with being inside anything with a style of display:none. What I did was to use a div with a zIndex that hid the div until I needed it displayed. I would start there.
Thanks for your answer, however my problem currently is that the FreeTextBox is inside an AJAX Tab Panel, therefore I would have to reconstruct the whole tab functionality in order to do so, and I do not have adequate time!
For what it's worth, I am close to a solution (I think) by setting the .ReadOnly attribute of the FTB to true and then setting it back to false on the controlo .PreRender. It works for the first time the page loads, so now I have to figure out how to implement this properly for every postback.
I will post the solution if I find it!
Thanks anyway!