I'm using YUI 3.3.0 and the AutoComplete widget. I'm entirely new to YUI. Here's the thing. I have AutoComplete working.
How do I catch an event fired by AutoComplete? The documentation states that a select event is fired when a user selects an item from the list. I want to attach a function to that event. How do I do that?
Here's an example for the plugin approach, http://tivac.com/yui3/so/skladjfyhafjk_autocomplete.htm
Simply pass your event handlers as part of the config when you first plug autocomplete into the input.
Y.one("#ac").plug(Y.Plugin.AutoComplete, {
resultHighlighter: 'phraseMatch',
source: ['foo', 'bar', 'baz'],
on : {
select : function(e) {
console.log(arguments); //TODO: REMOVE DEBUGGING
}
}
});
You can also subscribe after the element has been plugged using the namespace it attaches to ("ac").
Y.one("#ac").ac.on("select", function() {
console.log("post-plugin event subscription"); //TODO: REMOVE DEBUGGING
});
If you are using it as a class, it works like this.
var ac = new Y.AutoComplete({
inputNode: '#ac',
source: ['foo', 'bar', 'baz']
});
ac.on("select", function() {
console.log("Class event subscription"); //TODO: REMOVE DEBUGGING
});
Related
I haven't seen much documentation and cant seem to get my code to work. the code snippet is below. I'm trying to remove the on mouse over listener but have had no success. Google charts docs has the method as such - google.visualization.events.remove Listener(listener_handler).
I'm uncertain what the listener_handler actually pertains to. Im trying to remove the on mouse over listener once the chart has been clicked.
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
google.visualization.events.addListener(chart, 'select', function () {
google.visualization.events.removeListener(chartMouseOver);
}
You need to store the returned event object in a variable, and pass that to removeListener :
var event = google.visualization.events.addListener(chart, 'onmouseover', function() {
alert('onmouseover');
google.visualization.events.removeListener(event); //the event object as param
});
demo -> http://jsfiddle.net/cmDT2/
I need to clear the toolbar without reloading the grid in my jqgrid. It should just reset the toolbar to its default values.
I tried using,
$("#TransactionsGrid")[0].clearToolbar();
My grid datatype:local and i don't use loadonce:true.
This made the toolbar clear and refresh the grid. I dont want that to happen.
Any ideas?
I find the question interesting.
To implement the requirement I suggest to use register jqGridToolbarBeforeClear to execute the handler only once. The handler should 1) unregister itself as the event handler and return "stop" to prevent reloading of the grid:
$grid.jqGrid("filterToolbar", { defaultSearch: "cn" });
$("#clearToolbar").button().click(function () {
var myStopReload = function () {
$grid.unbind("jqGridToolbarBeforeClear", myStopReload);
return "stop"; // stop reload
};
$grid.bind("jqGridToolbarBeforeClear", myStopReload);
if ($grid[0].ftoolbar) {
$grid[0].clearToolbar();
}
});
The corresponding demo shows it live.
var View = Backbone.View.extend({
events: {
"keypress #editor": "updateContent",
},
updateContent: function(ev) {
# Update model
}
});
I've applied a applied a keypress event on a textarea with id editor. Eventually this code works, but after transforming the textarea with CodeMirror a keypress won't fire an event.
Although the the textarea with id editor still extists. Why is this and how can I fix it?
When you are trying to format your code from textarea by CodeMirror, it oveflows the textarea. So, you are typing in it's wrapper, not in your textarea. You should handle CodeMirror's wrapper to get keypress event.
Try something like:
var editor = CodeMirror.fromTextArea(document.getElementById("editor"));
var View = Backbone.View.extend({
events: {
"keypress .CodeMirror": "updateContent"
},
updateContent: function() {
console.log(editor.getValue());
}
});
I would like to turn a primitive event (a click) into a semantic event, like "deleteTodo"
This is described here, but not how to implement :(
I have the following code:
App.TodoView = Em.View.extend({
click: function(e) {
this.trigger("deleteTodo");
}
});
App.Router.map(function(match) {
match('/').to('index');
});
App.IndexRoute = Ember.Route.extend({
deleteTodo: function(e) {
// this code is never executed :(
}
}) ;
After I perform the 'click', I see that the TodoView click function is called, but not the deleteTodo function from the IndexRoute. Any suggestions what might go wrong here ?
CHeers
You can use this.get("controller").send("deleteTodo"). This will send a message to the controller, if the controller doesn't handle deleteTodo it will bubble to the router and be handled there.
click: function(e) {
this.get('controller').send("deleteTodo");
}
In your router you will also need to define the event:
events: {
doStuff: function(e) {
alert("Do stuff") ;
}
}
http://jsfiddle.net/9Xasr/7/
I would typically do record deletion in the controller. Seems like putting that in a router event would not be ideal.
I'm triyng to build a simple animation jQuery-plugin. The main idea is to take an element and manipulate it in some way repeatedly in a fixed intervall which would be the fps of the animation.
I wanted to accomplish this through events. Instead of using loops like for() or while() I want to repeat certain actions through triggering events. The idea behind this: I eventualy want to be able to call multiple actions on certain events, like starting a second animation when the first is done, or even starting it when one animation-sequence is on a certain frame.
Now I tried the following (very simplified version of the plugin):
(function($) {
$.fn.animation = function() {
obj = this;
pause = 1000 / 12; //-> 12fps
function setup(o) {
o.doSomething().trigger('allSetUp');
}
function doStep(o, dt) {
o.doSomething().delay(dt).trigger('stepDone');
}
function sequenceFinished(o) {
o.trigger('startOver');
}
function checkProgress(o) {
o.on({
'allSetup': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'stepDone': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'startOver': function(event) {
console.log(event); //check event
resetAll(o);
}
});
}
function resetAll(o) {
/*<-
reset stuff here
->*/
//then start over again
setup(o);
}
return this.each(function() {
setup(obj);
checkProgress(obj);
});
};
})(jQuery);
Then i call the animation like this:
$(document).ready(function() {
$('#object').animation();
});
And then – nothing happens. No events get fired. My question: why? Is it not possible to use events like this inside of a jQuery plugin? Do I have to trigger them 'manualy' in $(document).ready() (what I would not prefer, because it would be a completely different thing – controling the animation from outside the plugin. Instead I would like to use the events inside the plugin to have a certain level of 'self-control' inside the plugin).
I feel like I'm missing some fundamental thing about custom events (note: I'm still quite new to this) and how to use them...
Thx for any help.
SOLUTION:
The event handling and triggering actually works, I just had to call the checkProgress function first:
Instead of
return this.each(function() {
setup(obj);
checkProgress(obj);
});
I had to do this:
return this.each(function() {
checkProgress(obj);
setup(obj);
});
So the event listening function has to be called before any event gets triggered, what of course makes perfect sense...
You need set event on your DOM model for instance:
$('#foo').bind('custom', function(event, param1, param2) {
alert('My trigger')
});
$('#foo').on('click', function(){ $(this).trigger('custom');});
You DOM element should know when he should fire your trigger.
Please note that in your plugin you don't call any internal function - ONLY DECLARATION