My side menu or menu toggle code is in the app.compnent.ts. This menu toggle is working perfectly in all the pages before I click Modal. MenuToggle is not working after I click the button for Modal. I'm not sure what is the exact issue. Any suggestions please?
Menu:
<ion-icon name="menu" menuToggle float-left margin-right></ion-icon>
PageA:
pageBModal() {
let modal = this.modalCtrl.create(PageB);
modal.present();
}
PageB:
closeModal() {
this.viewCtrl.dismiss();
this.navCtrl.setRoot(DashBoardPage);
}
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
Even I have faced the same issue.
I have fixed this by using Events.
If you try to navigate page from modal, You will face with above issue.(Side menu will not work). Instead of navigating from modal ts, Try to navigate from parent ts by using Events.
Eg :
Parent ts :
events.subscribe('modal:finished', (page) => {
if(page == 'yourpage') {
this.navCtrl.push(YourPage);
}
});
Modal ts :
this.events.publish('modal:finished', 'yourpage');
You can send from modal where you need to redirect after modal dismiss. Based on this condition you can redirect wherever you want.
Hope it will help someone.
Related
I have a header in a react app that is using semantic-ui react. I want to route my login button to a backend express route (/auth/login). I tried the composition method by passing in {Link} from react-router-dom, but this is not routing to the express route, rather looking at the React routing.. in hindsight, this is of course how it should work..
This leaves me with the question though, how can I pass in a link to the backend api's for this button component? If I pass in 'a' and a path, this renders as a hyperlink but the path isn't passed in.
What is the prop I need to pass in to make this work as I can't see one that makes sense in the semantic-ui docs on buttons.. Or am I doing this the completely wrong way (this has happened before surprisingly)?
My login component is below..
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' path='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Okay, rubber ducked this one myself, passing in a value for href solved it!
Correct component:
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' href='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Still interested if there's a better way to do this..
I want to share my mistake and thank OP for posting the answer. Below is what I did and you should NOT do it like this:
<Button>
<Link to="/yourURL/">Nav Button</Link>
</Button>
This works technically but creates a unique problem where user MUST click on the text directly ("Nav Button" in this case) because the button itself is not rendered as a hyperlink. So if you click within the button but not the text itself, it won't navigate. It would even create an odd behavior where if you have another button next to it. Say, you have a "Submit" and a "Cancel" button where the Cancel button navigates user to the previous URL, if you click within the Cancel button but not the "Cancel" text, it would trigger the Submit button action instead. Hope this helps someone learning React!
I have a main window which calls a modal bootstrap window after clicking a edit button.
After working in the modal window, I would like to execute a Oracle procedure, but it is closing my window.
So, I would like to know if there is any option to avoid closing bootstrap modal window after clicking a submit type button?
Thanks in advance.
Kind regards,
Francisco Mtz.
Cerrar
Generar Combinaciones
Actualizar
var partidos = document.getElementById('laluz_32quinielas_1prono_editmodal');
partidos.addEventListener('submit', function(e) {
e.preventDefault();
})
</script>
I have the task: get all names members of (myworkspace).slack.com/messages/****/details/ in #general channel.
On this page I click "Members" -> "See all members".
Modal window appears, and Imacros has to scroll this modal window while all members not visible.
(js) But this code dont work:
var modal = window.content.document.getElementById("generic_dialog"); // Modal window with all members
iimPlayCode("URL GOTO=javascript:modal.scrollBy(0, 1000)"); // Scrolling
In case somebody prefers using a bookmarklet to scroll that list:
javascript:(function() {
var scrInt = setInterval(() => {try {document.querySelector("#channel_membership_dialog_scroller").scrollTop += 5000} catch(e) {clearInterval(scrInt)}}, 1500);
})();
I am opening a Modal in ionic2, to search the values from a list. After search, I want to get the selected values back in my parent screen.
searchRooms(){
let modal = this.modalCtrl.create(RoomSearch);
modal.present();
}
This opens my search Modal and there I have list of available rooms. If user click on any room then I want to return back the value to parent page. I am not sure how to do this.
From documentation I feel NavConroller.pop can be used to pass back the values but I don't know how to use that.
Thanks in advance.
You can use onDidDismiss method explained in the Modal Controller.
In the page that opens your modal you can do :
let modal = this.modalCtrl.create(RoomSearch);
modal.onDidDismiss(data => {
// Do things with data coming from modal, for instance :
console.log(data);
});
modal.present();
And this in your modal controller, to close the modal :
this.viewCtrl.dismiss({"foo" : "bar"});
I'm very new to Ember.js and I am trying to implement what I think is a very basic behavior for "floating" menus (i.e., a menu, panel, or modal, that is absolutely positioned above the rest of the page) where the menu closes when the user clicks off the menu.
When the user clicks on a button, I open a "floating" menu (just a div with some content in it). When the user clicks off the menu (i.e., clicks anywhere on the page that is not inside the menu) I want the menu to close.
I cannot figure out how to get this behavior to work or even what approach I should take to implement this.
I've setup a fiddle with a simple application that opens a menu when you click on the button. The fiddle pretty much mimics the setup I currently have. The javascript I use for the application controller, menu controller and menu view is also pasted below. How could I modify this fiddle so that the menu will close when the user clicks off of it?
http://jsfiddle.net/LjEEP/1/
App.ApplicationController = Ember.Controller.extend({
menuIsHidden: true,
actions: {
openMenu: function(){
this.toggleProperty('menuIsHidden');
}
}
});
App.MenuController = Ember.Controller.extend({
needs: ['application']
});
App.MenuView = Ember.View.extend({
templateName: 'menu',
classNames: ['menu'],
classNameBindings: ['controller.menuIsHidden:hide'],
});
Thank you!
Basically you'd want to register a click handler for the whole document that would hide the menu, and then have another click handler on the menu div that will prevent the click from propagating up to the other handler. Something like this:
openMenu: function(){
this.toggleProperty('menuIsHidden');
if( !this.get('menuIsHidden') ){
Ember.run.next(this,function(){
var _this = this;
$(document).one('click',function() {
_this.toggleProperty('menuIsHidden');
});
$(".menu").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false;
});
});
}
}
Here's a modified fiddle : http://jsfiddle.net/ncSEG/