BackBone events don't get fired on a CodeMirror textarea - events

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());
}
});

Related

CKEditor not editable in IE11 after ajax call

Example:
Jsfiddle
If the page is loaded the first time, the CKEditor is working right and the value of the editor can be edited. After hitting the button "ajax" which is calling the following function (cursor must be in the editor field):
function ajax_call() {
var html = "<textarea id=\"textarea\"><p>test 1</p><p>test 2</p><p>test 3</p></textarea><script type='text/javascript'>jQuery(document).ready(function() { ckEditor('textarea'); });<\/script>";
$.post("/echo/html/", { html: html }, function(data){
jQuery('#target').html(data);
});
}
it isn't possible to click on the text in IE11 to edit the value. Clicking beyond the text or left of it enabels the editor again.
Looks like creation of new textarea after CKEDITOR is initiated brakes editor in IE. Though i just tried to set data directly on instance of CKEDITOR and it worked fine,rather than creating new textarea tag.
function ajax_call() {
var html = "<p>test 4</p><p>test 5</p><p>test 6</p>";
$.post("/echo/html/", { html: html }, function(data){
//jQuery('#target').html(data); <-- Removed from original
CKEDITOR.instances['textarea'].setData(data)// <-- Added
});
}
function ckEditor(id) {
CKEDITOR.replace(id, {
language : 'de',
});
}
jQuery(document).ready(function() {
ckEditor('textarea');
});
Here is working example:
http://jsfiddle.net/2wq86gqs/15/

CKEditor's click event not firing

I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/

kendo Datepicker: Prevent closing picker when clicking a date

When I change the date in the picker then the picker is getting hidden, How can skip this behavior in kendo ui datePicker
You can replace the change method for the date picker's DateView so that it doesn't close the popup:
var datePicker = $("#sampleDate").kendoDatePicker({}).getKendoDatePicker();
datePicker.dateView.options.change = function () {
datePicker._change(this.value());
};
(demo)
Simply do e.preventDefault() on the close event.
$("#datepicker").kendoDatePicker({
close: function(e) {
e.preventDefault(); //prevent popup closing
}
});
Demo
However, you will no longer be able to close the datepicker in any way, so make sure you prevent default only when you want to keep the datepicker open.
e.g
close: function(e) {
if(keepOpen === true){
e.preventDefault();
}
}
Try to capture the change event of the datePicker
$("#datepicker").kendoDatePicker()
.Events(e =>
{
e.Change("JSFunction");
})
function JSFunction() {
var datepicker = $("#datePickerId").data("kendoDatePicker");
datepicker.open();
}

AJAX content in a jQuery UI Tooltip Widget

There is a new Tooltip Widget in jQuery UI 1.9, whose API docs hint that AJAX content can be displayed in it, but without any further details. I guess I can accomplish something like that with a synchronous and blocking request, but this isn't what I want.
How do I make it display any content that was retrieved with an asynchronous AJAX request?
Here is a ajax example of jqueryui tootip widget from my blog.hope it helps.
$(document).tooltip({
items:'.tooltip',
tooltipClass:'preview-tip',
position: { my: "left+15 top", at: "right center" },
content:function(callback) {
$.get('preview.php', {
id:id
}, function(data) {
callback(data); //**call the callback function to return the value**
});
},
});
This isn't a complete solution obviously, but it shows the basic technique of getting data dynamically during the open event:
$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
$.ajax('/echo/html').always(function() {
elem.tooltip('option', 'content', 'Ajax call complete');
});
}
});
See the Fiddle
One thing to lookout for when using the tooltip "content" option to "AJAX" the text into the tooltip, is that the text retrieval introduces a delay into the tooltip initialization.
In the event that the mouse moves quickly across the tooltip-ed dom node, the mouse-out event may occur before the initialization has completed, in which case the tooltip isn't yet listening for the event.
The result is that the tooltip is displayed and does not close until the mouse is moved back over the node and out again.
Whilst it incurs some network overhead that may not be required, consider retrieving tooltip text prior to configuring the tooltip.
In my application, I use my own jquery extensions to make the AJAX call, parse the resutls and initialise ALL tooltips, obviously you can use jquery and/or your own extensions but the gist of it is:
Use image tags as tooltip anchors, the text to be retrieved is identified by the name atrribute:
<img class="tooltipclassname" name="tooltipIdentifier" />
Use invoke extension method to configure all tooltips:
$(".tooltipclassname").extension("tooltip");
Inside the extension's tooltip method:
var ids = "";
var nodes = this;
// Collect all tooltip identifiers into a comma separated string
this.each(function() {
ids = ids + $(this).attr("name") + ",";
});
// Use extension method to call server
$().extension("invoke",
{
// Model and method identify a server class/method to retrieve the tip texts
"model": "ToolTips",
"method": "Get",
// Send tooltipIds parameter
"parms": [ new myParmClass("tipIds", ids ) ],
// Function to call on success. data is a JSON object that my extension builds
// from the server's response
"successFn": function(msg, data) {
$(nodes).each(function(){
// Configure each tooltip:
// - set image source
// - set image title (getstring is my extension method to pull a string from the JSON object, remember that the image's name attribute identifies the text)
// - initialise the tooltip
$(this).attr("src", "images/tooltip.png")
.prop("title", $(data).extension("getstring", $(this).attr("name")))
.tooltip();
});
},
"errorFn": function(msg, data) {
// Do stuff
}
});
// Return the jquery object
return this;
Here is an example that uses the jsfiddle "/echo/html/" AJAX call with a jQuery UI tooltip.
HTML:
<body>
<input id="tooltip" title="tooltip here" value="place mouse here">
</body>
JavaScript:
// (1) Define HTML string to be echo'ed by dummy AJAX API
var html_data = "<b>I am a tooltip</b>";
// (2) Attach tooltip functionality to element with id == tooltip
// (3) Bind results of AJAX call to the tooltip
// (4) Specify items: "*" because only the element with id == tooltip will be matched
$( "#tooltip" ).tooltip({
content: function( response ) {
$.ajax({
url: "/echo/html/",
data: {
'html': html_data
},
type: "POST"
})
.then(function( data ) {
response( data );
});
},
items: "*"
});
here is this example on jsfiddle:

YUI AutoComplete events, how to?

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
});

Resources