I have implemented the Facebook 'Like Button' by using
fb:like
and I successfully managed to implement logic for the 'Like' event by using
FB.Event.subscribe('edge.create', function(response) {
//do something
});
and now when the user clicks the Like button a bubble box appears with a text box with default text 'Add a comment' and two buttons - 'Post to Facebook' and 'Close'.
I want to catch the event that is triggered by clicking the 'Post to Facebook' button.
I tried to use the following:
FB.Event.subscribe('comment.create', function(response) {
//do something
});
but it doesn't seem to work.
Can you tell me if there's another event that I should listen to or is this 'comment.create' the right one and I'm just not implementing it correctly?
Thanks
Related
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
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/
I have button views that are part of a set of Ember.js form helpers I wrote. E.g. MyAddressFormView has the following template:
{{#form}}
{{textArea address}}
{{submitButton}}
{{cancelButton}}
{{/form}}
To handle the "Submit" button, I let the "submit" form event bubble, and handle it in the submit method of MyAddressFormView.
But how do I do the same for the "Cancel" button? For instance, is there any way I can trigger a custom "cancel form" event in a child view, let it bubble, and handle it in an ancestor view?
I would suggest triggering a jQuery special event and registering the event with a mapping on your Ember app. For example:
Ember.Application.create({
customEvents: {
// key is the jquery event, value is the name used in views
formcancel: 'formCancel'
}
});
And in your cancelButton view:
click: function(evt){
Ember.$().trigger('formcancel')
}
This will bubble in the same way that other mapped Ember DOM events do.
Ember.ActionHandler bubbles events through its "target" property. It's possible to override Ember.View's target to let events bubble through parentViews by default.
Include this mixin first:
(function() {
Ember.View.reopen({
// Let actions bubble to parentView by default.
target: function() {
return this.get('parentView');
}.property('parentView')
});
})();
Then just send the event like you'd normally do:
tap: function() { this.send('someEvent'); }