using CKEditor 3.x
I'm capturing the "saveSnapshot" event on the editor to bind an "click" event to divs that have special attributes eg: (data-type="notes"). I have found only document.getById(). I can't use ids because of possible duplicates in the document. Is there any way to search by anything other than id?
I've also tried using the filter but failed to bind the "click" event that way (using extjs and jquery)..it a different type of element object (internal)
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
div : function( element )
{
if (element.attributes.data-notes) {}
}
}
});
var arr = CKEDITOR.instances.editor1.document.$.getElementsByClassName("ponymagic");
arr[0];
arr[0].onclick = function() {console.log("Magical pony time")};
You might have to loop that. It's not optimal, I know, but it's a start until you find a better option if one is needed.
Related
I think I have almost the same problem as described here : fine-uploader generate more unique custom file ids
But I can't figure out a solution that fit my needs.
I have a modal window containing 2 tabs. Each tab contains a FineUploader instance. That works pretty well.
BUT
I want to assign a behavior to each file added (for exemple, assign an "onclick" behavior to a generated thumb).
To do this, I do something like this :
callbacks: {
onComplete: function(id, name, response) {
scope.thumbloaded({
id: id,
name: name,
uuid: response.uuid
});
},
And the scope.thumbloaded function do this :
function thumbloaded(id, name, uuid) {
$('#qq-file-id-' + id).on('click', function(e) {
e.stopPropagation(); // avoid the entire thumbnail to catch the event
doSomething();
});
}
The problem is that FU creates DOM elements with formatted ids, like qq-file-id-XXX.
So, when I add several files in one of each FU instance I have (in each of my tabs, remember?), FU creates two DOM elements with same ids. And the "click" event is added twice on elements with same ids.
Do you see the problem??
I wasn't able to find a solution yet.
Any help?
thanks.
Ok, I finally find out a workaround, based on jquery's selector.
Very easy though.
I just apply a certain class to each of element I just took care of. Though, I don't hook new event listener to elements that already have it.
The code will speak for itself:
function thumbloaded(id, name, uuid) {
var newThumb = $('.qq-file-id-' + id + ':not(.aw-thumbnail)');
newThumb.prop('id', uuid);
$('#' + uuid).on('click', function(e) {
doSomething();
});
$('#' + uuid).addClass('aw-thumbnail');
}
I have an autocomplete inside of a panelBar. When a panelBar is activated, I would like to set the focus to the autoComplete input. I have tried several ways to get this to work, but cannot find a way to do this.
The method is invoked and I can find the autocomplete. However, I am unable to set focus.
//Kendo PanelBar
function onPanelBarActivate(e) {
var $autoComplete = $('input .txtProductText', e);
$autoComplete.focus();
}
var $panelBar = $('#panelbar').kendoPanelBar({ expandMode: "single", expand: onPanelBarActivate }).data("kendoPanelBar");
This returns empty jQuery object:
$('input .txtProductText', e);
First e is the event argument of the activate event. It cannot be used as the context of jQuery. You should use e.item instead. Second 'input .txtProductText' means 'child of an input whose class is txtProductText'. This is probably not what you need since 'input' elements can't really have children.
Try this instead:
$('.txtProductText', e.item);
How do you keep track of your UI elements in Titanium? Say you have a window with a TableView that has some Switches (on/off) in it and you'd like to reference the changed switch onchange with a generic event listener. There's the property event.source, but you still don't really know what field of a form was just toggled, you just have a reference to the element. Is there a way to give the element an ID, as you would with a radiobutton in JavaScript?
Up to now, registered each form UI element in a dictionary, and saved all the values at once, looping through the dictionary and getting each object value. But now I'd like to do this onchange, and I can't find any other way to do it than create a specific callback function for each element (which I'd really rather not).
just assign and id to the element... all of these other solution CAN work, but they seem to be over kill for what you are asking for.
// create switch with id
var switcher0 = Ti.Ui.createSwitch({id:"switch1"});
then inside your event listener
myform.addEventListener('click', function(e){
var obj = e.source;
if ( obj.id == "switch1" ) {
// do some magic!!
}
});
A simple solution is to use a framework that helps you keep track of all your elements, which speeds up development quite a bit, as the project and app grows. I've built a framework of my own called Adamantium.js, which lets you use a syntax like jQuery to deal with your elements, based on ID and type selectors. In a coming release, it will also support for something like classes, that can be arbitrarily added or removed from an element, tracking of master/slave relationships and basic filter methods, to help you narrow your query. Most methods are chainable, so building apps with rich interaction is quick and simple.
A quick demo:
// Type selector, selects all switches
$(':Switch')
// Bind a callback to the change event on all switches
// This callback is also inherited by all new switch elements
$(':Switch').bind('change', function (e) {
alert(e.type + ' fired on ' + e.source.id + ', value = ' + e.value);
});
// Select by ID and trigger an event
$('#MyCustomSwitch').trigger('change', {
foo: 'bar'
});
Then there's a lot of other cool methods in the framework, that are all designed to speed up development and modeled after the familiar ways of jQuery, more about that in the original blog post.
I completely understand not wanting to write a listener to each one because that is very time consuming. I had the same problem that you did and solved it like so.
var switches = [];
function createSwitch(i) {
switches[i] = Ti.UI.createSwitch();
switches[i].addEventListener('change', function(e) {
Ti.API.info('switch '+i+' = '+e.value);
});
return switches[i];
}
for(i=0;i<rows.length;i++) {
row = Ti.UI.createTableViewRow();
row.add(createSwitch(i));
}
However keep in mind that this solution may not fit your needs as it did mine. For me it was good because each time I created a switch it added a listener to it dynamically then I could simply get the e.source.parent of the switch to interact with whatever I needed.
module Id just for the hold it's ID. When we have use id the call any another space just use . and use easily.
Try This
var but1 = Ti.Ui.createButton({title : 'Button', id:"1"});
window.addEventListener('click', function(e){
var obj = e.source;
if ( obj.id == "1" ) {
// do some magic!!
}
});
window.add(but1);
I, think this is supported for you.
how do you create your tableview and your switcher? usually i would define a eventListener function while creating the switcher.
// first switch
var switcher0 = Ti.Ui.createSwitch();
switch0.addEventListener('change',function(e){});
myTableViewRow.add(switch0);
myTableView.add(myTableViewRow);
// second switch
var switch1 = ..
so no generic event listener is needed.
I want to dynamically add some preconfigured HTML-Elements in use of a 'click'-event with mootools.
So I can make it work with my basic knowledge, although it isn´t very nifty. I coded this so far...
This is my preconfigured element, with some text, a classname and some event, cause i wanna have events already added, when it´s inserted into my container:
var label = new Element('label', {
'text': 'Label',
'class': 'label',
'events': {
'click': function(el){
alert('click');
}
}
});
Here is my function, which adds the label-Element:
function addText(){
$('fb-buildit').addEvent('click', function(){
row.adopt(label, textinput, deletebtn);
$('the-form').adopt(row.clone());
row.empty();
/*
label.clone().inject($('the-form'));
textinput.inject($('the-form'));
deletebtn.inject($('the-form'));
*/
});
}
The second part which uses inject also works, but there, my click-Event, which fires the "alert('click')" works too. The method with adopt doesn´t add any event to my label Object, when its inserted in the dom.
Can anyone help me with this. I just wanna know why adobt ignores my "events" settings and inject doesn´t.
Thanks in advance.
(sorry for my english ^^)
you go label.clone().inject but row.adopt(label) and not row.adopt(label.clone()) -
either way. .clone() does not cloneEvents for you - you need to do that manually.
var myclone = label.clone();
myclone.cloneEvents(label);
row.adopt(label);
this is how it will work
as for why that is, events are stored in the Element storage - which is unique per element. mootools assigns a uid to each element, eg, label = 1, label.clone() -> 2, label.clone() -> 3 etc.
this goes to Storage[1] = { events: ... } and so forth. cloning an element makes for a new element.uid so events don't work unless you implicitly use .cloneEvents()
you are sometimes not doing .clone() which works because it takes the ORIGINAL element along with its storage and events.
suggestion consider looking into event delegation. you could do
formElement.addEvent("click:relay(label.myLabel)", function(e, el) {
alert("hi from "+ el.uid);
});
this means no matter how many new elements you add, as long as they are of type label and class myLabel and children of formElement, the click will always work as the event bubbles to the parent.
So I know that one of the downsides of using jQuery.live is the unavailability of .stopPropagation(). But I need it badly.
Here's my use case. I have a checkbox is that is currently bound to a click. However, other checkboxes appear on-screen via an AJAX call, meaning I really need .live('click', fn). Unfortunately, the checkbox is situated atop another clickable element, requiring .stopPropagation(). This works fine with .bind('click', fn), but the inability to use it with .live() is hampering me. Using return false doesn't work as the checkbox will not be checked.
Any ideas on how to mimic .stopPropagation() when using .live() without returning false?
Instead of binding a .live handler to the checkboxes, bind a smarter event handler to the container, with behaviour dependent on which element is the target of the event.
$("#container").click(function(e) {
var ele = e.target;
if(ele.tagName.toLowerCase() == 'input'
&& ele.type.toLowerCase() == 'checkbox') {
e.stopPropagation();
// do something special for contained checkboxes
// e.g.:
var val = $(ele).val();
}
});
Here is something of an example to show how this can be used.