Develop Reference

Adding an on event to an e.currentTarget?

A variety of elements on my page have the content editable tag.
When they are clicked I do this:
$('[contenteditable]').on('click', this.edit);
p.edit = function(e) {
console.log(e.currentTarget);
e.currentTarget.on('keydown', function() {
alert("keydown...");
});
};
I get the current target ok, but when I try to add keydown to it, I get the err:
Uncaught TypeError: undefined is not a function

It's a native DOM element, you'll have to wrap it in jQuery
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
e.currentTarget should equal this inside the event handler, which is more commonly used ?
It's a little hard to tell how this works, but I think I would do something like
$('[contenteditable]').on({
click : function() {
$(this).data('clicked', true);
},
keydown: function() {
if ($(this).data('clicked'))
alert("keydown...");
}
});
Demo

First issue is you are trying to use jQuery methods on a DOM element. Second issue is I do not think you want to bind what is clicked on, but the content editable element itself.
It also seems weird to be adding the event on click instead of a global listener. But this is the basic idea
$(this) //current content editable element
.off("keydown.cust") //remove any events that may have been added before
.on('keydown.cust', function(e) { //add new event listener [namespaced]
console.log("keydown"); //log it was pressed
});

Edited: I had a fail in code. It works fine now.
Getting your code, I improved to this one:
$(function(){
$('[contenteditable]').on('click', function(){
p.edit($(this));
});
});
var p = {
edit: function($e) {
console.log($e);
$e.on('keydown', function() {
console.log($(this));
alert("keydown...");
});
}
}
You can check it at jsFiddle

You need to wrap the e.currentTarget(which is a native DOM element) in jQuery since "on" event is a jQuery event:
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
EDIT:
$('[contenteditable]').on('click', p.edit);
p.edit = function(e) {
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
};
You're defining p.edit AFTER $('[contenteditable]').on('click', p.edit); resulting in an error since p.edit doesn't exist when declaring the on.
In case you don't know, you are defining p.edit as a function expression, meaning that you have to define it BEFORE calling it.

Rangy.js - Saving a comment to highlighted text

I'm currently implementing the very cool range and selection library Rangy.js. I want to implement a function that can highlight some text and then add and save a comment to the highlight. In the demos it is shown how to add a note to the selection - but only an ID is attached to the selection.
I'm trying something like this, where I create a comment property on the element:
highlighter.addClassApplier(rangy.createCssClassApplier("highlight", {
ignoreWhiteSpace: true,
elementTagName: "span",
elementProperties: {
comment: "",
onclick: function() {
var highlight = highlighter.getHighlightForElement(this);
$('#myModal p').text( highlight.classApplier.elementProperties.comment );
$('#myModal').modal('show');
}
}
}));
And then when highlighting the text, the comment is stored in the "comment" property:
function highlightSelectedText( event ) {
event.preventDefault();
var highlight = highlighter.highlightSelection("highlight");
$('#myModal').modal('show');
$('#save-comment').on('click', function () {
var comment = $('#comment-text');
highlight[0].classApplier.elementProperties.comment = comment.val();
});
}
When I serialize my highlights, the comments are not included.
Has anyone tried this or something similar with Rangy.js?
Any help appreciated, thanks in advance!

Tooltip of previous onValidationError event displayed even when correct values are entered in the slickgrid node

I am using requiredFieldValidator for my TextEditor. Using the onValidationError event as given below, i set the title attribute of my cell to the error message so that a tooltip will be displayed as 'This is a required field'.
var handleValidationError = function(e, args) {
var validationResult = args.validationResults;
var activeCellNode = args.cellNode;
var editor = args.editor;
var errorMessage = validationResult.msg
$(activeCellNode).live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(activeCellNode).attr("title", errorMessage);
} else {
$(activeCellNode).attr("title", "");
}
});
grid.onValidationError.subscribe(handleValidationError);
Successfully, the tooltip is displayed when there is some validation error.
But the problem is When the same cell is given a correct value and validation succeeds, the previous tooltip appears again.
How do I remove that tooltip on successful validation?

I have found a solution for this issue and it works fine.
By going through the slick.grid.js code, i understood that OnValidationError event will be triggered only when the 'valid' value from the validator is false.
My idea was to fire the onValidationError event whenever validator is called i.e on both validation success and failure, and to check for 'valid' value and handle the tooltip according to that value.
STEPS:
In slick.grid.js, I added the trigger for onValidationError event when 'valid' from validator is true also.
(i.e) add the below given code before return statement in if(validationResults.valid) in slick.grid.js
trigger(self.onValidationError, {
editor: currentEditor,
cellNode: activeCellNode,
validationResults: validationResults,
row: activeRow,
cell: activeCell,
column: column
});
2. In the onValidationError event handler of your slickgrid,get the value of the parameter 'valid'. If true, it means validation is success and remove tooltip i.e remove
title attribute for that node. If 'valid' is false, it means
validation has failed and add tooltip.i.e set the title attribute to
error message. By doing this, the tooltip of the previous
onValidationError will not appear on the same node. The code goes as
follows:
grid.onValidationError.subscribe(function(e, args) {
var validationResult = args.validationResults;
var activeCellNode = args.cellNode;
var editor = args.editor;
var errorMessage = validationResult.msg;
var valid_result = validationResult.valid;
if (!valid_result) {
$(activeCellNode).attr("title", errorMessage);
}
else {
$(activeCellNode).attr("title", "");
}
});
Hope this solution will help others for this issue.
HAPPY LEARNING!!!

Rather than editing the slick grid js - I've submitted a request for this change - in the meantime you can subscribe to the following events to remove the previous validation display:
grid.OnCellChange.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});
grid.OnActiveCellChanged.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});
grid.OnBeforeCellEditorDestroy.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});

A much more appropriate way to implement this is to subscribe to the onBeforeCellEditorDestroy event and clean up the state (i.e. clear the tooltip) there.

I wasn't able to determine the current cell in OnBeforeCellEditorDestroy, so I just cleared the title in onCellChange, which fires before onValidationError. For example:
grid.onCellChange.subscribe(function (e, args) {
$(grid.getCellNode(args.row, args.cell)).children("input").attr( "title", "");
});

jQuery.off() is not removing binding

For some reason jQuery.off('click') doesn't seem to be working here. When the 'Yes' button is clicked in the model another model just pops up. What am I doing wrong?
code:
$(function(){
//If there are warnings on the page bind alert
if ($('.renewal-warning').length > 0){
(function (){
$('#signRentalContainer').on('click', '.renewal-warning', function(e){
var buttonHandle = this;
//Prevent submission
e.preventDefault();
//Show warning model
$.modal({
content: $('#renewalWarning').html(),
title: "Order Renewal Warning",
buttons: {
'Yes': function(win) { $(buttonHandle).off('click').click(); },
'No': function(win) { win.closeModal(); }
},
maxWidth: 250,
closeButton: false
});
});
})();
}
});

Pretty sure you're going to need to provide it the same element, as well as the same selector.
$('#signRentalContainer').off('click', '.renewal-warning');
In the .on() handler, this is the '.renewal-warning' element that was clicked, not the #signRentalContainer element.
If there are several of these '.renewal-warning' elements, and you only want to disable one at a time, the simplest way is to change its class so that it no longer matches the selector.
$(this).removeClass('renewal-warning')
.addClass('renewal-warning-disabled');

Because the this refer to the context of the handle function, not the function itself.
Try making it a named function, then refer to it when you call off:
$("body").off("click", '#signRentalContainer', buttonHandle);
BTW, any reason we can't use unbind directly here?
$("#signRentalContainer").unbind("click");

How to update hidden field value when clicking on jQuery Accordion Header?

I am using a hidden field to store the active index for the accordion:
var activeIndex = parseInt($('#ContentPlaceHolder1_hidAccordionIndex').val());
$("#accordion").accordion({
changestart: function () {
var value = $(this).scrollTop();
window.scrollTo(0, value);
},
autoHeight: false,
event: "mousedown",
active: activeIndex,
collapsible: true,
disabled: false,
change: function (event, ui) {
var index = $(this).children('h4').index(ui.newHeader);
$('#ContentPlaceHolder1_hidAccordionIndex').val(index);
}
});
Currently, the hidden field value is set in the codebehind. Therefore, if the user clicks on the accordion header, I would like to update the value of the hidden field according to the header that has been clicked.
Any ideas on how to do this? Thanks in advance.

Use following function for change event handler:
change: function (event, ui) {
var index = $(this).accordion("option", "active");
$('#ContentPlaceHolder1_hidAccordionIndex').val(index);
}

I have made an exact same example as yours in this fiddle and it works like a charm.
The only possible reason for you to not find the index of the current header is that you might have <h3> headers in your markup and your selecting <h4> in your change handler.
Change one or the other and it should normally work.

One way to handle this, is by adding a class called accordionHeader or something to each of the h3s. Then after the initial build of the accordian, call another event handler.
In my example I just performed a bind on h3 for quickly providing a demo.
$("#accordion").accordion();
$('h3').bind('click', function() {
$('#HiddenInputField').val($(this).children('a').html());
alert($('#HiddenInputField').val());
});
Simple working example Fiddle