Develop Reference

JS Knockout - Enter key event binding on <textarea>

I have some simple javascript which uses knockout that is intended to work as follows:
user can add comment, bringing up a textarea. Upon pressing enter, their comment is posted. They have a button to allow them to cancel the post and bring them back to add comment screen.
The problem is, when the user selects cancel (the <a> element below) while there is text in the textarea, my click event handler for the cancel is not called... until the second time it's clicked. However it will effectively cancel the post if the user has not typed anything yet in the textarea.
HTML:
<a data-bind="attr:{id: $context.cellContext.status.rowIndex}, click: $parent.toggleCommentSelection" class="fa fa-plus" style="float: right"/>
<textarea data-bind="attr:{id: 'commentField' + $context.cellContext.status.rowIndex}, event: { keyup: $parent.checkEntered, }" class="comment-text-area" />
Javascript:
self.toggleCommentSelection = function (data, event) {
var targetId = event.currentTarget.id;
self.currentRow(targetId);
//stuff that gets called on cancel button click
//if there is text in the text area this will not get called until
//clicked twice
};
self.checkEntered = function (data, event) {
//stuff that gets called on keyup
//enter key was pressed
if (event.keyCode === 13) {
var comment = $.trim($('#commentField' +
self.currentRow()).val());
if (comment.length > 0) {
postComment(comment);
}
}
};
Any ideas on why my click binded function toggleCommentSelectionis only called the second time it is clicked if there is text in the textarea?

Pass Ctrl + Click Event to another element in Firefox

It's come to my understanding that Firefox will not pass Ctrl + Click from label, to target input field. I'm at a loss as to how I can achieve this behaviour. I have checkbox fields, which are hidden, and their respective labels that are styled uniquely and visible... When clicking the label, click registers, but control click does not.

I assume html as
<form>
<label for="home" id="lblhome">home</label>
<input type="checkbox" name="home" id="home"><br>
</form>
I want one thing if ctrl+cliked other thing if it's just click , the checkbox click code
$( "#home" ).click( function( e) {
if(e.ctrlKey)
alert('i just got ctrl+cliked');
else
alert('i just got clicked');
});
So now create handler for label check if it's ctrl+click if yes then create an jquery Event and change its ctrlKey property to true and trigger it on the checkbox.
$('#lblhome').click(
function(e){
if(e.ctrlKey) {
alert('ctrl+click on label');
//cancel the normal click
e.preventDefault();
e.stopPropagation();
e2 = jQuery.Event("click");
//e2.which = 50; // for other key combos like CTRL+A+click
e2.ctrlKey = true;
$( "#home").triggerHandler(e2);
$( "#home").prop("checked", !$( "#home").prop("checked"));//toggle checkbox state
}
});
DEMO : https://jsfiddle.net/35g41aaL/

This is kind of hacky, but it works: http://jsbin.com/dogelehena/edit?html,console,output
<input type="checkbox" id="cb">
<label for="cb">Label</label>
<script>
$(function () {
var cb = $('#cb');
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
$('label').click(function (e) {
if (e.ctrlKey && isFirefox) {
var checked = cb.prop('checked');
cb.prop('checked', !checked);
}
});
});
</script>
First, attaching the click event to the label and not the input. This way, the event is not blocked when ctrl is held down, but the checkbox state does not change. So in the callback, we check for e.ctrlKey, and if it's true, we change that checkbox's state manually.
Please note that I added the isFirefox check, because while this functionality fixes the behavior in Firefox, it breaks in other browsers.

keypress event does not triggered after choosing a choice from radio button

Using backbone js i want to execute a function while hitting on the ENTER Key.
I have a form :
When i enter a vallue in an input and hit enter, the function is triggered and works fine.
When i choose a button radio and hitting enter my function isn't called. Not OK
I am using this code in my view:
View.FormCustomer = CommonViews.FormCustomer.extend({
title : "Ajouter une fiche",
},
events: {
"keypress": "getKeyCode"
},
getKeyCode: function(e){
console.log(e.keyCode);
if(e.keyCode == "13"){
this.save(e);
}
},
Does any one have any suggestions?

You might have to listen to that keypress event at the document and not in your events object.
...
initialize: function(){
var _this = this;
$(document).on('keypress.namespace', function(){
_this.someMethod();
});
},
...
//you'll have to remove that event when you ditch your view, assuming you have already override your remove method...
remove: function(){
$(document).off('.namespace');
}

Disable opposite input if I type into another of a pair

How do I disable one input field if I type into another out of a pair and then if I removed the input by hitting backspace for example so there is nothing in the input field reenable the second input field and vice versa. Code I have so far is below but is not working.
JavaScript:
//disable the opposite input field
var ATGvalue = $('input#atgOrderId').val();
var BQvalue = $('input#bqOrderId').val();
if ( ATGvalue.length > 0) {
$('input#bqOrderId').prop("disabled", true);
} else {
$('input#bqOrderId').removeAttr("disabled");
}
if ( BQvalue.length > 0) {
$('input#atgOrderId').prop("disabled", true);
} else {
$('input#atgOrderId').removeAttr("disabled");
}
HTML:
<label for="bqOrderId">bqOrderId </label><input name="bqOrderId" id="bqOrderId" type="text" />
<label for="atgOrderId">atgOrderId </label><input name="atgOrderId" id="atgOrderId" type="text" />

Your code does work, but only once - to have it continuously update, you first wrap the JS in an event-handler function and attach it to your input elements:
function mutuallyExclusive( e ) { ... }
$( '#bqOrderId' ).on( 'change keyup', mutuallyExclusive );
$( '#atgOrderId' ).on( 'change keyup', mutuallyExclusive );
See this JSFiddle.
I attached it to both the change and keyup events: change to handle programatic (scripted) changes, and keyup to "instantly" update the fields' statuses - otherwise it waits till the user removes focus from the input to call the change event.

you need to include your code inside an event to check when a user type something like this:
$(document).on('keyup','#bqOrderId',function(){
//your code
});
$(document).on('keyup','#atgOrderId',function(){
//your code
});
after to change this:
$('input#bqOrderId').prop("disabled", true);
$('input#atgOrderId').prop("disabled", true);
to this:
$('input#bqOrderId').attr("disabled",true);
$('input#atgOrderId').attr("disabled", true);

How to open a JQuery UI Combobox in the on click event?

I'm trying to open a JQuery UI Combobox when I click on it, basically what I want is this:
$("#auto").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
});
​
Auto Open
But in a combobox.
The problem is that Im not able to get the focus or click event to be trigger.
I've try the click and bind focus events on: the actual field, the input field created by jquery but none of them since to work.
How could I get this to worked in the JQueryUI ComboBox?
Update
I've just noticed that I get the event trigger when I open the options and mouse over the options. But again what I want is to trigger it when I click on the input part.
*CODE *
Razor Code
<div class="editor-label">
#Html.LabelFor(model => model.Lugar, "Nombre del Lugar")
</div>
<div class="editor-field">
#Html.DropDownList("Lugar", String.Empty)
#Html.ValidationMessageFor(model => model.Lugar)
</div>
JavaScript Code
$("#Lugar").combobox();
Events
$("#Lugar").click(function () {
alert("Handler for .click() called.");
});
$("#Lugar-input").bind("focus", function ()
{
alert("a");
});

Add when creating the input field in the click event a call to the function openMethod
var input = this.input = $("<input>")
//.appendTo(wrapper)
.insertAfter( select )
.val(value)
.attr("title", "")
**.click(openmethod)**
Function Openmethod
var openmethod = function () {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
};