Following the example here I've tried doing the same but the query doesnt work for me.
http://jsfiddle.net/qDbd5/
require(["dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (parser, ToolBar, ToggleButton, query, domClass, on) {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
I'm trying to make only 1 button toggle at a time.
Why the click event not triggered?
Wrapping everything in a ready() callback solves the problem.
See http://jsfiddle.net/cFQGq/
require(["dojo/ready", "dojo/parser", "dijit/Toolbar", "dijit/form/ToggleButton", "dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function (ready, parser, ToolBar, ToggleButton, query, domClass, on) {
ready(function() {
on(query(".dijitToggleButton"), "click", function (e) {
query(".dijitToggleButton").forEach(function (node) {
console.log('Captured clicked event');
domClass.remove(node, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
domClass.add(this, "dijitToggleButtonChecked dijitToggleButtonRtlChecked dijitRtlChecked dijitChecked");
});
});
});
If you look at the explanation of domReady!, it mentions that it is insufficient for working with dojo widgets, because it executes after the DOM has loaded instead of after the widget has finished initializing. dojo/ready executes the callback after the widgets have finished loading.
Related
Example of a problem:
The click event inside the form is not triggered
$(document).on('click', function(e) {
console.log('ok');
});
The most interesting thing is that the change event works correctly
What could be the problem at all ?
In General, I found a problem, maybe someone will be useful:
$(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
$('input[name^="shipping_method"]').on('click', function(e) {
console.log('ok');
});
});
Instead of input[name^="shipping_method, you can add any class that is inside the form
While using the Scheduler's Resource view the user found it hard to understand the hovering time.
Adding this below $('#calendar').fullCalendar( ... );
$(".fc-slats tr").each(function () {
$(this).addClass("timerow");
});
and CSS
.timerow:hover {background: lightblue;}
PROBLEM: When user pressed next or prev buttons the calendar rendered again the table and the .hover did not work.
adding the code also in the viewRender in Calendar's properties solved it.
viewRender: function (view, element) {
$(".fc-slats tr").each(function () {
$(this).addClass("timerow"); });
},
The final result is shown in the image below:
resource1
resource2
I'm trying to use redactor.js to edit in place some divs in meteor;
in the template I have:
<template name="home">
<section class="editable">
</section>
...
</template>
and in the js:
Template.home.events({
"click section.editable": function(event) {
$(event.target).redactor();
},
});
this creates the redactor wysiwyg editor correctly when I click on the section; the problem is that by clicking again, another editor (nested inside the previous one is created); I'm trying without success to limit the execution of redactor() method only if the editor is not there already.
Could you wrap the state in a session variable? Of course, you'd need to set it back again once the redactor was finished (maybe try hooking into a blur event?)
Template.home.events({
"click section.editable": function(event) {
var isEditorActive = Session.get("editorActive", false);
if (!isEditorActive) {
Session.set("editorActive",true);
$(event.target).redactor({
blurCallback: function(e)
{
Session.set("editorActive",false);
this.core.destroy(); // destroy redactor ?
}
});
}
}
});
PREVIOUSLY:
Is there a particular reason you want to use meteor events for this? You could just use redactor.
if (Meteor.isClient) {
Meteor.startup(function() {
$('section.editable').redactor({
focus: false
});
});
}
I have a simple JSFiddle here: http://jsfiddle.net/cvCWc/2/
The basic code looks like:
window.player = videojs("movie_container", { techOrder: ["html5", "slash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.on("click", function(event){
event.preventDefault();
alert('click');
});
videojs_player.play();
});
I am trying to capture all click events on the video for future processing, but I don't want the video to pause when clicked. Any ideas?
I found the answer for HTML5... but I don't get click events in the flash fallback. Updated jsfdl: http://jsfiddle.net/cvCWc/3/
window.player = videojs("movie_container", { techOrder: ["html5", "flash"] }, function() {
videojs_player = this;
videojs_player.src({ src: "http://video-js.zencoder.com/oceans-clip.mp4", type: 'video/mp4'})
videojs_player.off('click');
videojs_player.on("click", function(event){
event.preventDefault();
console.log("click", event.clientX, event.clientY, videojs_player.currentTime());
});
videojs_player.play();
});
Just an alternative if someone drops to this. When you wanna bypass the stop play functionality when user clicks the stream(or view, whatever you call it), not the control bar, one can comment out somelines in videojs..
Player.prototype.handleTechClick_ = function handleTechClick_(event) {
// We're using mousedown to detect clicks thanks to Flash, but mousedown
// will also be triggered with right-clicks, so we need to prevent that
if (event.button !== 0) return;
// When controls are disabled a click should not toggle playback because
// the click is considered a control
if (this.controls()) {
if (this.paused()) {
//this.play(); // COMMENTED OUT
} else {
//this.pause(); // COMMENTED OUT
}
}
};
Control bar will still work...
I am trying to create a group of draggable DOM objects using jQuery UI's .draggable() that are populated through Meteor subscriptions. The code I came up with looks like
Meteor.subscribe('those_absent', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
Meteor.subscribe('those_present', function() {
$( "li.ui-draggable" ).draggable( { revert: "invalid" } );
});
These correspond with some Meteor.publish() calls, so that any time the collection changes, the .draggable() behaviour will be attached. At least, that was my intention.
However, it only works once - once one of these <li>'s has been dragged and dropped, then they are no longer draggable at all.
When the objects are dropped, I'm firing a custom event that is attached to the Template for the item like so
$( "#c_absent .inner-drop" ).droppable({
drop: function( event, ui ) {
ui.draggable.trigger('inout.leave');
}
});
Template.loftie_detail.events = {
'inout.leave': function (e) {
Lofties.update({_id:this._id}, {$set: {present: 'N' }});
}
};
So, my thinking is that this change to the collection on drop should propagate through the pub/sub process and re-run the .draggable() line above. But it doesn't seem to.
The complete code for this can be seen here https://github.com/sbeam/in-out/blob/master/client/inout.js and the app is live at http://inout.meteor.com/ (there are some other probably unrelated issues with items randomly losing values or disappearing from the UI altogether)
So if my understanding of how pub/sub works in Meteor is off, it would be good to know. Or is there a more efficient way to achieve this UI behavior binding that works without it?
The way I have implemented this in my apps is with the method shown by #lashleigh.
I have a template event that listens using code like this :
Template.myDraggableItem.events({
'mouseover .workItem' : function() {
$(this._id).draggable();
}
});
Then I listen for the dragstop like this.
$('body').on('dragstop', '.myDraggableItem', function (e) {
// Update the collection with the new position
};
You can see the app that's using this code at aduno.meteor.com