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/
Related
I have seen https://www.amcharts.com/docs/v4/concepts/event-listeners/ and
https://www.amcharts.com/docs/v4/reference/categoryaxis/#Events
categoryAxis.events.on('hit', function (ev) {
console.log('clicked on ', ev.target)
}, this)
works. However, this returns the complete CategoryAxis. I would like to distinguish on which catgeory the user clicked.
e.g. categoryAxis.category.template.events.on('hit', function (ev) does not exist.
You need to add the hit event listener on the axis renderer's label template in order to capture the category label that was clicked:
categoryAxis.renderer.labels.template.events.on('hit', function(ev) {
alert(ev.target.dataItem.category)
})
I am using Shopify "Streamline Theme" with quick product view and I recently added infinite scroll to products on each collection using Ajaxinate.js.
When I open a collection page it loads with some products which is supposed to do, The products already there work fine with quick view and quick add to cart and also.
The Infinite scroll works fine and it loads new product fine but the problem is raised when the new products loaded through AJAX call doesn't have work with the quick view function.
I have tried to create a callback function to activate the quick view with no success, using the theme initialisation code with no success.
function callBack(){
theme.init();
theme.initQuickShop();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "scroll",
loadingText: 'Loading...',
callback: callBack
});
});
Edit -------
My problem, is that when the page is loaded only the initial loaded products quickview elements are loaded in the DOM. When the scroll more button is clicked, the newly loaded products are loaded without their respective quickview elements. Hence why the quickview does't work for them. The theme.js file comes with this initialisation code:
theme.reinitProductGridItem = function($scope) {
if (AOS) {
AOS.refreshHard();
}
if (theme.settings.currenciesEnabled) {
theme.currencySwitcher.ajaxrefresh();
}
// Reload quick shop buttons
theme.initQuickShop(true);
// Refresh reviews app
if (window.SPR) {
SPR.initDomEls();SPR.loadBadges();
}
// Re-register product templates in quick view modals.
// Will not double-register.
sections.register('product-template', theme.Product, $scope);
// Re-hook up collapsible box triggers
theme.collapsibles.init();
};
I have tried to integrate this into a callback but no success, the quickview modal doesn't seem to load for the newly loaded products:
function callBack(){
ReloadSmartWishlist();
var $container = $('#CollectionSection');
theme.reinitProductGridItem($container);
// I have tried the following init qith no success:
// theme.init();
// theme.initQuickShop(true);
// theme.initQuickShop();
// sections.register('product-template', theme.Product, $container);
// AOS.refreshHard();
};
document.addEventListener("DOMContentLoaded", function() {
var endlessClick = new Ajaxinate({
method: "click",
loadingText: 'Loading...',
offset: 0,
callback: callBack
});
});
I am missing something but what? :/
Note for other things like loading products images with the callback and the wishlist app, it works as intended...
When you load elements via AJAX and if the events are not attached to a parent element that is not removed from the DOM, those elements will not have an attached event to them.
The term used here is event delegation.
Here is an example of non-delegated event:
document.querySelectorAll('a').addEventListener('click', function(){
// Do something
})
Since you are attaching the event to the existing "a" elements if you add new 'a' via AJAX those elements will not have the event since Javascript already attached all the events and it will not reattach them if you don't specifically recall them again.
Here is an example of a delegated event:
document.querySelector('body').addEventListener('click', function(target){
let target = event.target;
if (target.tagName === 'A'){
// Do something here
}
})
Where we attach the event to the body tag ( where it's a better idea to attach it to a closer none-modified parent element of the ajax items ) and once we click we check if our target tag is an "a" and do something then.
So long story short, you will need to delegate the quick cart link so that it works after you load the items via AJAX.
Drip is correct you need to delegate your event, but for people like me it's hard to completely understand how to do that.
I'm not sure how your quickview is structured, but if you open it with a .click function and can use jquery use the [.on() function][1].
For example: I use a quickview that opens on a button click. My button is attached to my product-grid-item.liquid with this bit of code:
<div class="quick-view-button">
<a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);">Quick View</a>
</div>
My quickview function originally looked like this:
function quickView() {
$(".quick-view").click(function () {
//all of the quickview code
What happens is exactly like you described. The event listeners only loaded on the first product load but nothing after an AJAX load.
Using jquery's .on() binds the event listener to the element meaning when it's loaded in later it'll still have the event. Here's an example of what my code looks like after using .on()
function quickView() {
$('body').on('click','.quick-view',function(){
I really hope this helps you or someone else with this problem.
[1]: http://api.jquery.com/on/
Is the dataSource.changed event working?
After my Kendo UI grid is instantiated, I am binding the change event per the documentation here:
http://docs.kendoui.com/api/framework/datasource#change
//To set after initialization
dataSource.bind("change", function(e) {
// handle event
});
I am doing this:
// initialize
$("#grid").kendoGrid({
dataSource: dataSource,
blah blah blah
)
});
// end of initialization
// bind afterwards
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
//also tried a setTimeout:
// bind afterwards
setTimeout(function () {
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
}, 350);
function dataChanged() {
// handle "change" whatever that means -- documentation definition is hazy
// does reassigning the data array constitute a change?
// does changing the value of a particular item in the data array
// constitute a change?
// does removing an item from the data array constitute a change?
var grid = $("#grid").data("kendoGrid");
grid.refresh();
}
But my dataChanged() function is not called when I do either of these things:
var grid = $('#grid').data('kendoGrid');
grid.dataSource.data()[1]["deptname"] = 'XXX';
or
grid.dataSource.data = aDifferentArray;
I am not sure exactly what the 'changed' event is listening for. What, precisely, is supposed to trigger it?
If I create a completely new dataSource, and assign it to the grid that already has a dataSource, I don't see how that would trigger an existing data source's changed event. Such an event (the grid noticing that its dataSource has been replaced with a different one) would be a grid-level event, not a dataSource-level event, right?
The important thing to note is that the data backing the DataSource is an ObservableArray, and that the data items in that array are converted to ObservableObjects.
The change event of the datasource is fired under 2 conditions:
The data ObservableArray changes (a record is inserted, deleted). An example of this would be using the DataSource.add() or DataSource.remove() functions.
If a property changed event bubbles up to the DataSource from one of the ObservableData objects in the array. However, just like the rest of the Kendo MVVM framework, the notification that a property changed only occurs when its .set("propertyName", value) function is called.
This is why grid.dataSource.data()[1]["deptname"] = 'XXX'; is not triggering the change event. If you change it to: grid.dataSource.data()[1].set("deptname", 'XXX'); then it should start to work. Basically, think of the change event as being fired in response to an MVVM property change fired from the data observable object.
As for changing the data array grid.dataSource.data = aDifferentArray; I'm actually not sure if that will or should trigger a change. I've never tried that.
I have a gauge chart which has one arrowIndicator.
Im trying to capture the value change event on the arrowIndicator. I tried dojo.connect() and on() methods to set the event handler for my gauge but failed both times.
This is what I did...
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
dojo.connect(arrow, 'change', handlerFunction);
AND
var arrow = new dojox.gauges.AnalogArrowIndicator({....});
define(["dojo/on"], function(on){
on(arrow, "change", myHandleFunction);
});
I don't get any error message or anything...
How should I go about this?
the valuechange event is exposed at the guage chart level:
dojo.connect(gauge.indicators[0], "valueChanged", dojo.hitch(gauge, function(){
//new value is in this.indicators[0].value
}));
where, gauge is the jsid or js variable holding the gauge dijit
depending on how you are adding the indicators, it might be indicators[1] or similar
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
});