I have a combo box that's rigged to do shift focus to another form element immediately after the user has selected a value, with this config:
new Ext.form.ComboBox({
// ...
listeners: {
select: function( a, record ) {
if ( typeof( record ) == 'undefined' ) {
return;
}
if ( !Ext.getCmp('input-name').getValue() ) {
Ext.getCmp('input-name').focus();
}
},
blur: function() {
console.log('blurred');
},
render: function( field ) {
if ( !config.activity ) {
field.onTriggerClick();
}
}
},
// ...
});
However, a strange thing happens. The 'input-name' form field receives focus, and I can start typing in it, but the combo field is never blurred. It still has the 'x-form-focus' style, and the 'blur' event is never fired. Only when I use the mouse to click another field, the combo is blurred.
Does anyone know what's going on, and how I can circumvent this?
This is how I solved it:
listeners: {
select: function( a, record ) {
if ( typeof( record ) == 'undefined' ) {
return;
}
/**
* There's some weird stuff going on in the combo control, that causes it not to blur when shifting focus,
* so we have to do it manually. This action has to be deferred, because the control is going to refocus
* itself at the end of the function firing this event (onViewClick()).
*/
this.moveFocus.defer( 100, this );
},
render: function( field ) {
field.moveFocus = function() {
if ( !Ext.getCmp('input-name').getValue() ) {
Ext.getCmp('input-name').focus();
this.triggerBlur();
}
};
if ( !config.activity ) {
field.onTriggerClick();
}
}
},
When any piece of code gets executed as the a part of an event and that resulted in some other event to fire, then the new event doesn't get fired.
onBlur should be executed only when a user performs some action in the UI because of which the combo box looses focus, rather than field loosing focus programmatically.
Related
I have input element which will take input and filter the contents and the filter event will be trigger once the user gets focused out from the input element.
When the user having the focus in the input element and he clicks in one of the button, the click event is invoked first and then the focus out event, as it creates conflicts while generating the filtered content.
I tried changing the order of code and other options such as changing the way of invocation of the click event - none of the ways worked out for me
$('body').on('focusout', '.classname', functionname);
function functionname(e) {
if (typeof e == 'object') {
}
}
$('body').on('click', '.buttonclass', function (e) {});
Could someone help me to build The FocusOut event to trigger first and then the click event.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if button submission should or should not occur.
JS Code:
$("#input").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#button").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('execute your filter)');
});
I'm trying to add a quick conditional logic to my Laravel project. If a "create_copay" text input is anything other than 0.00, my "create_ams_fee" field should display 0.00. Else, it will be 7.00. However, my code displays no change whatsoever in the create_ams_fee field.
Form Fields (Laravel Collective)
<div class="form-group">
{{Form::label('copay', 'Copay')}}
{{Form::text('copay', '', ['class' => $errors->has('copay') ? 'form-control border border-danger' : 'form-control', 'id' => 'create_copay'])}}
</div><!-- /form-group -->
<div class="form-group">
{{Form::label('ams_fee', 'AMS Fee')}}
{{Form::text('ams_fee', '', ['class' => 'form-control', 'id' => 'create_ams_fee'])}}
</div><!-- /form-group -->
Script
// Calculate AMS Fee field
$('#create_copay').change(function() {
if ($('#create_copay').val() == '0.00') {
$('#create_ams_fee').val('7.00');
} else {
$('#create_ams_fee').val('0.00');
};
});
Edit
This seems to be turning into a dynamic loading issue. The codeblock below is what I'm resulting to try and test. The parent container of these inputs has an id of create_financials. I currently am having no success finding a way to trigger an event by changing the create_copay field.
$( document ).ready( function() {
$('#create_financials').on('input', '#create_copay', function() {
console.log('SUCCESS');
});
});
You are using the 'change' event - this is only fired when focus is taken out of the element (it is blurred) and it has changed, or the form is submitted, or certain other times.
You could use the keydown or keyup events, but a better one is the 'input' event.
If this is a number input, you should use the input type 'number' rather than text - however, if you don't want to or can't do that, casting the text from the input to a number might also be beneficial:
$('#create_copay').on('input', function() {
if ($('#create_copay').val()/1 == 0) {
$('#create_ams_fee').val('7.00');
} else {
$('#create_ams_fee').val('0.00');
};
});
Please see this codepen for a working example:
https://codepen.io/manticorp/pen/wYpXWY
Using the html inspector (right click, inspect element) are you sure your inputs have the ids specified? (create_copay and create_ams_fee).
Also, I've just seen your inputs may already be populated, in which case something like this would be better:
$(function() { // jQuery domready event
$('#create_copay').on('input', updateFields);
function updateFields() {
if ($('#create_copay').val()/1 == 0) {
$('#create_ams_fee').val('7.00');
} else {
$('#create_ams_fee').val('0.00');
};
}
updateFields();
});
If you are creating these fields dynamically, or inserting them into the document after load somehow, then you will need to attach the event to the document/a container element:
$(function() { // jQuery domready event
$('#theContainer').on('input', '#create_copay', updateFields);
function updateFields() {
if ($('#create_copay').val()/1 == 0) {
$('#create_ams_fee').val('7.00');
} else {
$('#create_ams_fee').val('0.00');
};
}
updateFields();
});
Use the keydown event for input field. Change takes effect after the input element loses focus.
I'm trying to switch between a focused / blurred state for a search bar. Right now the tag has a click handler that shows an input field if the element is clicked. I'm trying to reverse this effect and hide the visibility of the input field when the user clicks outside the element.
My code is:
var Search = React.createClass({
getInitialState:function(){
return{ inputVisible:false }
},
showInput:function(){
this.setState({ inputVisible:true });
},
componentDidUpdate:function(){
if( this.state.inputVisible ){
this.getDOMNode().focus();
}
},
renderInput: function(){
return (
<input type="text" style={this.props} />
);
},
renderLink: function(){
return (
<a><h3 onClick={this.showInput}>Search</h3></a>
);
},
render: function() {
if( this.state.inputVisible ){
return this.renderInput();
}else{
return this.renderLink();
}
}
});
I've tried adding logic to the componentDidUpdate function, so that
if (input.state.isVisible == false ) {
this.getDOMNode().blur();
}
I've also tried adding an onBlur handler to the element and tried creating a hideInput method:
hideInput: function() {
this.setState({ inputVisible:false });
}
and adding to the element:
<a><h3 onClick={this.showInput} onBlur={this.hideInput}>Search</h3></a>
But something just isn't working. Can anyone point out what I'm doing wrong?
You can't focus an H3 element without a tabindex attribute, and so it can't be "blurred" to begin with, thus the onBlur event doesn't fire. Try attaching the onBlur event on the rendered input element in your renderInput method.
Here's an example: http://plnkr.co/edit/STMPIkIQEIAZPZQ9SCq4?p=preview
For example say i have a text box and a hidden div called suggestions
$("#suggestinput").on({
keyup: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
}
//another event to know if input is empty while on focus, then removeClass('active');
});
The first event is when the user types in the input show suggestion, the second one is blur, so when the user unfocuses on the input the suggestions el will hide, i want a third event to check while on focus if the input is empty remove active class.
Working example is here thanks: http://jsfiddle.net/HSBWt/
Try this - http://jsfiddle.net/HSBWt/1/
$("#suggestinput").on({
keydown: function(){
$("#suggestions").addClass("active");
},
blur: function () {
$("#suggestions").removeClass('active');
},
keyup: function () {
if ( $(this).val() == "" ) {
$("#suggestions").removeClass('active');
}
}
});
I'm using the jQuery UI AutoComplete control (just updated to jQuery UI 1.8.1). Whenever the user leaves the text box, I want to set the contents of the text box to a known-good value and set a hidden ID field for the value that was selected. Additionally, I want the page to post back when the contents of the text box are changed.
Currently, I am implementing this by having the autocomplete select event set the hidden id and then a change event on the text box which sets the textbox value and, if necessary, causes a post back.
If the user just uses the keyboard, this works perfectly. You can type, use the up and down arrows to select a value and then tab to exit. The select event fires, the id is set and then the change event fires and the page posts back.
If the user starts typing and then uses the mouse to pick from the autocomplete options though, the change event fires (as focus shifts to the autocomplete menu?) and the page posts back before the select event has a chance to set the ID.
Is there a way to get the change event to not fire until after the select event, even when a mouse is used?
$(function() {
var txtAutoComp_cache = {};
var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() };
$('#txtAutoComp').change(function() {
if (this.value == '') { txtAutoComp_current = null; }
if (txtAutoComp_current) {
this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current;
$('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current);
} else {
this.value = '';
$('#hiddenAutoComp_ID').val('');
}
// Postback goes here
});
$('#txtAutoComp').autocomplete({
source: function(request, response) {
var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') + '", "count": 0 }';
if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) {
response(txtAutoComp_cache.content);
return;
}
$.ajax({
url: 'ajaxLookup.asmx/CatLookup',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: jsonReq,
type: 'POST',
success: function(data) {
txtAutoComp_cache.req = jsonReq;
txtAutoComp_cache.content = data.d;
response(data.d);
if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; }
}
});
},
select: function(event, ui) {
if (ui.item) { txtAutoComp_current = ui.item; }
$('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : '');
}
});
});
You can solve this by implementing your change event as an autocomplete option, just like select, instead of using jQuery's change() function.
You can see the list of events at the autocomplete demo & documentation page. It states that the change event is always fired after the close event, which I presume is fired after the select event. Have a look at the source for 'combobox' to see an example change event hook.
It worked for me on mouse select when i did this:
focus: function (event, ui) {
$j(".tb").val(ui.item.value);
return true;
}
This causes the TextBox text to change on mouse focus events, just like the way it happens on keyboard events. And when we select an item, it triggers selection changed.
I don't know about preventing the change event from firing, but you could easily throw some conditionals in your change event that makes sure the hidden field has been set and that the TextBox currently has a value.