Develop Reference

Polymer fire on-tap with enter

I am beginner on Polymer. I think that it is a easy Problem but i could not find out how can i implement this on my application.
I have a button on HTML like:
<paper-button class="button" id="button-wide" raised affirmative on-tap="{{onClick}}">
and in javascript i have function like:
Polymer('dialog', {
onClick: function() {
......
......
}}
And i want fire this button with enter key on keyboard.
Thanks!

Something like this could work:
Polymer('dialog', {
onClick: function () {
// etc..
},
onKeyDown: function (e) {
if (e.which === 13 || e.keyCode === 13) {
this.onClick();
}
},
attached: function () {
this.onKeyDown = this.onKeyDown.bind(this);
document.addEventListener('keydown', this.onKeyDown);
},
detached: function () {
document.removeEventListener('keydown', this.onKeyDown);
}
});
where attached and detached are lifecycle methods of the element.

Jquery for Tooltip

I'm using the below code for tooltip display for click event
Html Component:
Test<br>
JQuery:
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
}
}
); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});
I'm using jquery 1.9.1.js and jquery-ui.1.9.2.js. But I'm getting "Expected Identifier, string or number".
EDIT: Error resolved, but still I'm not getting tool tip on click event. Could someone tell me where I went wrong?

This Codepen: http://codepen.io/anon/pen/EjVBOW seems to work for me with your code and latest jQuery and jQuery UI. Did it get resolved for you?
$(document).on("click", ".tooltip", function() {
$(this).tooltip({
items: ".tooltip",
content: function() {
return $(this).data('description');
},
close: function(event, ui) {
var me = this;
ui.tooltip.hover(
function() {
$(this).stop(true).fadeTo(400, 1);
},
function() {
$(this).fadeOut("400", function() {
$(this).remove();
});
}
);
ui.tooltip.on("remove", function() {
$(me).tooltip("destroy");
});
}
}); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});

How to handle ctrl+tab key in extjs 3.4?

I am working on Extjs3.4. I want to keymap ctrl+tab in my application. but when I try to use it, it opens my next browser tab. How can I solve it?
This is my code :-
var keyMap = new Ext.KeyMap(Ext.getDoc(), {
key: Ext.EventObject.TAB,//9
ctrl: true,
stopEvent : true,
fn: function () { console.log('it works'); },
scope: this
});
Please give some suggestion.

Try to put a listener in the respective field (text or whatever)
listeners: {
keydown: { //tab could be listened in keydown
element: 'el',
fn: function(e){
if(e.urKey && e.urAnotherKey)
alert('keydown, execute my action');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}

Access event object from Backbone Marionette ItemView trigger

I have the code below. I want to on <Enter> of the input#editTodo, I want to save the model (Todo). I figured I need to listen to the keypress event then check that the keycode is 13, if so I save the model ...
TodoView = Backbone.Marionette.ItemView.extend({
triggers: {
"keypress #editTodo": "detectEnterAndSave"
},
initialize: function() {
this.on("detectEnterAndSave", function(e) {
console.log(e);
});
But I cant seem to get the event object? If so how do I know what key is pressed?

events: {
'keypress #editTodo' : 'detectEnterAndSave'
},
detectEnterAndSave : function(e) {
if (e.which === 13) {
// do something
}
}

About Jeditable jquery plugin in the context of Backbone.View

Using the Jeditable plugin,
is possible to create, very easily, a submit and cancel button.
Here's a very simple code example (*)
Now let's suppose in MyView (Backbone.View) I would like to trigger the event click on the button submit which is created by Jeditable.
Here's the code regarding the Backbone.View (**).
When I trigger the event "click .submitBtn" the value of $('.edit_area').text is empty string.
In order to fix this issue I implemented the following code (* **)
Do you have some smart idea to improve the code of (* **)? I don't like callback using setTimeout.
(*)
$('.edit_area').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : '<div class="submitBtn">Ok</div>'
cancel : '<div class="submitBtn">Undo</div>'
});
(**)
MyView = Backbone.View.extend({
events: {
"click .edit_area" : "edit",
"click .submitBtn" : "close"
},
});
(* **)
close: function close ()
{
var that = this;
console.log($(this.el).find("[data-tid='editable']").text()); // empty string
setTimeout(function () {
console.log($(that.el).find("[data-tid='editable']").text()); // update string
that.model.save({
name: $(that.el).find("[data-tid='editable']").text()
});
}, 0);
},

in the initialize function
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
});
Close function definition
close:function(value, settings) {
this.model.save({
name: value
});
});
Complete Code
var editableview = Backbone.View.extend({
initialize: function () {
_.bind(this.close, this);
},
render: function () {
$(this.el).find('.edit_area').editable(this.close, {
type: 'textarea',
submit: '<div class="submitBtn">Ok</div>'
cancel: '<div class="submitBtn">Undo</div>'
});
},
close: function (value, settings) {
this.model.save({
name: value
});
});
});

Var That = This is wrong. This is the DOM not the backbone view. You can do:
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
submitdata: {view: this},
});
"view" in the hash would be the backbone view. It can be accessed in the close function.
close:function(value, settings) {
settings.submitdata.view.model.save({
name: value
});
});