I am doing validation through validation plugin on a page in which tabs getting created through foundation top bar. I want the error messages to be hidden when tab changes.Is there any work around for this??
in foundation 6:
$(selector).on('change.zf.tabs', function() {
//do something
});
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!
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.
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"});
In my webapp I have a search field at the top (kinda like Facebook) which is an input field and a bootstrap dropdown for result suggestions. I would like to decouple it from the controller of its container into an Ember Component. But I don't understand how to pick up events from the input field. Right now the view picks up submit (there is no submit button) and keyUp/keyDownfor navigating the dropdown. How do I listen to these events on a Component?
You can use Component the same way as you would View.
App.SearchFieldComponent = Ember.Component.extend({
value: "",
keyUp: function (e) {
console.log(e);
alert("You pressed key code " + e.keyCode);
}
});
Full jsbin.
I have been following the getting started guide for ember.
I have come to the parts that deal with editing and removing items and have come across a problem that seems to occur in chrome but not firefox.
The custom component "edit-todo" has 2 events that are linked to the action "acceptChanges"
{{#if isEditing}}
{{edit-todo class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
The "acceptChanges" action fires the "removeTodo" action if the item's title is empty
acceptChanges: function () {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.title'))) {
this.send('removeTodo');
} else {
this.get('model').save();
}
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
}
If you edit an item, delete the text and press enter or switch focus, the item gets deleted. This works perfectly for me in Firefox.
In Chrome however, the acceptChanges action is firing twice if you delete the title and press enter. When the DOM updates to remove the item, the acceptChanges action is fired again, presumably because it loses focus.
This jsbin shows the problem, it is essentially just the code from the guide with some console logs. If you edit the item "BBB", delete the text and press enter, the data for "CCC" is deleted also. It remains in the DOM but you can no longer interact with the item and the items remaining count is wrong. If you open ember inspector in the developer tools you can see that the only data left is for the item "AAA".
I am wondering if this is a bug with ember, with ember-data, with chrome, or if it is expected behaviour that I should be checking for in my js?
I am using Chrome Version 26.0.1410.63