Develop Reference

How to set focus on rich-text-field, in edit-mode of a contenttype?

I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);

I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}

TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.

Trigger a button click on a moon.Button or moon.IconButton with jQuery/Javascript directly

I know the click action can be triggered by assigning ontap a specific function like so:
{
kind: "moon.Button",name :"search_button",
content : "Search" , ontap : "searchAction", classes: "menu-button-style"
}
.
.
.
searchAction : function(){ //do some stuff on click}
I've tried
$('#id_of_my_button').click();
$('#id_of_my_button').trigger('click');
and none of those seem to work.
simplified jsFiddle
Any ideas

Why trigger the click with jquery? You can force an event with Enyo, as well:
this.$.someButton.bubble("ontap", {...});

Here, try this:
http://jsfiddle.net/Djspaceg/2AWb5/6/
Enyo has a global handle (enyo) you can use if you need to access any part of its structure. It's not recommended for use from within our app, since it breaks encapsulation, but since you're already outside enyo (by using jQuery or plain JavaScript) I don't see as much harm.
function TapThat() {
// 'enyo' is the global namespace.
// The '$' refers to the children of the object/kind.
enyo.$.tappyButton.tapAction();
}

Using the native click function of elements seems to work in your case, like this:
window.onload = function (){
document.getElementById('tappyButton').click();
};
Demo
Your problem in the fiddle is that you haven't included jQuery. Also, probably that you don't wait for the element to be added to the DOM before binding a click listener to it.
Demo with jQuery

Enable and disable jquery knob dynamically

I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?
Ideally I would like to do something like this (on a disabled knob)
$('.button').click(function() {
$('.knob').enable();
});
Edit:
I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.

html
<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>
script
in doc ready,
$(".knobSlider").knob();
$("#testBtn").click(function(){
$(".knobSlider").siblings("canvas").remove();
if($(".knobSlider").attr("data-readOnly")=='true'){
$(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
}
else{
$(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
}
});
For reference you can use my jsfiddle link > http://jsfiddle.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)

If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:
https://jsfiddle.net/604kj5g5/1/
Essentially, check the draw() implementation (I also recommend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).
var $input = $("input");
var knobEnabled = true;
var knobPreviousValue = $input.val();
$input.knob({
draw: function () {
if (knobPreviousValue === $input.val()) {
return;
}
if (!knobEnabled) {
$input.val(knobPreviousValue).trigger("change");
return;
}
knobPreviousValue = $input.val();
console.log($input.val());
},
});

Try this to disable the control.
I'm still trying to find a way to enable it back
$("#btnDisable").click(function(){
$("#knob").off().prev().off();
});

jqModal only works after element's been inserted on the page

I'm using the jqModal plugin to attach a dialog box to a button click. I'm trying to attach the following box to the page:
suqBoxInner = document.createElement("div");
suqBoxInner.id = "suq_box_inner";
$(suqBoxInner).jqDrag('.jqDrag').jqResize('.jqResize').jqm({
trigger: '#suq_button',
overlay: 0,
onShow: function(h) {
return h.w.css('opacity', 0.92).slideDown();
},
onHide: function(h) {
return h.w.slideUp("slow", function() {
if (h.o) {
return h.o.remove();
}
});
}
});
However this only works if I run this binding code after the div's been inserted into the page. That is I have to use something like $("#div_on_page").after(suqBoxInner) before running the jqDrag code. What are my options for binding it before it's inserted into the page? I could use $.live() but that has to bind to a mouse event and the jqModal plug in uses bind on the trigger listed inside the function call.

It appears that this plugin requires the div (suqBoxInner) to be on the page. So short of modifying the plugin, I'm not sure you have many options as-is. Perhaps you may want to rethink how you are implementing the plugin? How is suqBoxInner being placed on the page? Is it after a specific event, or action?
One solution I can think of off the top of my head is to fire an event after suqBoxInner is placed on the page. The event would then initialize jqModal.
Just a thought. Good luck.

jQuery tooltip: Trouble with remove()

I'm using a jQuery tooltip plugin.
I have HTML like this:
<li class="term ui-droppable">
<strong>Fall 2011</strong>
<li class="course ui-draggable">Biological Statistics I<a class="remove-course-button" href="">[X]</a></li>
<div class="term-meta-data">
<p class="total-credits too-few-credits">Total credits: 3</p>
<p class="median-GPA low-GPA">Median Historical GPA: 2.00</p>
</div>
</li>
I want to remove the .course element. So, I attach a click handler to the <a>:
function _addDeleteButton(course, term) {
var delete_button = $('[X]');
course.append(delete_button);
$(delete_button).click(function() {
course.remove();
return false;
}).tooltip();
}
This all works fine, in terms of attaching the click handler. However, when course.remove() is called, Firebug reports an error in tooltip.js:
Line 282
tsettings is null
if ((!IE || !$.fn.bgiframe) && tsettings.fade) {
What am I doing wrong? If the link has a tooltip attached, do I need to remove it specially?
UPDATE: Removing .tooltip() solve the problem. I'd like to keep it in, but that makes me suspect that my use of .tooltip() is incorrect here.

I had this same issue and ended up having to delay the call of .remove() to prevent the error. So something like the following may work for you:
$(delete_button).click(function() {
setTimeout( function() { course.remove() } , 1);
return false;
}).tooltip();

The .tooltip() plugin has several handlers that attach to the element, namely on mouseover, mouseout, and click. If you're removing the element, just .unbind() all these events so they don't run, like this:
delete_button.click(function() {
course.unbind().remove();
return false;
}).tooltip();
One other change to note is that delete_button is already a jQuery object, wrapping it in $() again just clones it :)
The error happens because it's trying to fetch and use it's settings data off the element after it's been though .remove() via jQuery.data(), in which jQuery removes it's data from the cache. This approach this just prevents all those tooltip handlers from running again, so it won't matter that the data's gone (as it should be), because nothing will be looking for it now.