Hope that made sense. I have a text input that uses the jQuery UI autoselect feature. The input auto-fills when a user selects, as it should. My problem is if a user inputs something, but then doesn't select from the drop down. This results in the text input value being something that doesn't exist in the list upon a form submit. I want to know if there is a way to perform an action (clear text input value) on the 'change' event but leave it as it is for the 'select' event.
If I'm understanding you correctly, you should be able to leverage the ui parameter that's passed to a change event handler:
$("#auto").autocomplete({
/* options */
change: function (event, ui) {
if (!ui.item) {
this.value = '';
}
}
});
ui.item will be undefined if nothing is selected from the autocomplete candidate list.
Example: http://jsfiddle.net/ZBzpF/
Inside the change event handler, check if the current value is in the source, if not, reset it. Something like:
var sourceArray = ["a", "b", "c"],
$autocomplete = $('#autocomplete');
$autocomplete.autocomplete({
source: ,
change: function(e, ui) {
if ($.inArray($autocomplete.val(), sourceArray) === -1) {
//change the value
}
})
}
Related
i have this column with dropdown, currently when i select any value from the dropdown it it gets saved, i would like to add a validation while selecting a value from dropdown before saving, for example,
{name:'color_name',
cellattr: function (rowid, cellValue) {
if ($.inArray(cellValue, hilightcolorcell) < 0) {
return " class='redcells'";
}
},editable:true,edittype:"select",editoptions:
{value:"PURPLE:PURPLE;PINK:PINK;GREEN:GREEN"}}
if the selected value was PINK, i wanted to have a validation prompt with Save and Cancel button something like this, Selected Value is : PINK, SAVE CANCEL
this is demo link https://jsfiddle.net/kwu7v3fc/3/
please help.
There are many ways to implement your requirement. The most native would seems to me to ask the confirmation from the user directly on change of the select option and before real saving it. One can add "change" event handler, which do all you need. The corresponding implementation will look like on the example below
editoptions: {
value: "PURPLE:PURPLE;PINK:PINK;GREEN:GREEN",
dataEvents: [
{
type: "change",
fn: function (e) {
if ($(this).val() === "PINK") {
if (!confirm("Are you sure you want PINK?")) {
// reset the value to the previous one
var savedRow = $("#rowed5").jqGrid("getGridParam", "savedRow");
$(this).val(savedRow[0].v);
}
}
}
}
]
}
See the modified demo https://jsfiddle.net/OlegKi/kwu7v3fc/5/
I'm working with Drupal 7, the problem is that I have an input type text for the quantity of the products with 2 arrows in span by default (widget quantity for the add cart button).
When using the js_injector module for getting the 'change()' event of the input, something weird happens and a loop started changing the value of the input for more or less depending of the clicked arrow.
jQuery(function($) {
$(document).ready(function(){
$('#edit-quantity').bind('change keydown keyup click input submit mouseenter', function (e) {alert('Type: ' + e.type); });
});
});
->This works correctly but doesn't get the arrow-span clicked options:
$('#edit-quantity').bind('keydown keyup click input submit mouseenter',...
->These options create a loop:
$('#edit-quantity').bind('change ...',
OR
$('#edit-quantity').change(function (e) {alert('Type: ' + e.type); });
My point is , Why this .change() event creates such a loop? or better how can I stop it to use the event?
Thank you,
You can use "input" instead of change
$('#textbox').on('input', function() {
// do your stuff
});
Better not to use change on text field. Change is more preferred for radio button, select field, check-box etc...
Hope it helps someone, at the end I just did search for all the possibilities of change. Not only in the input also at the 'buttons' represented with span. I did some little trick and ended up like this:
jQuery(function($) {
function value()
{
if($(this).index()!=0) //Just execute once
{
var price=parseFloat(document.getElementsByClassName('field-item')[0].innerHTML.replace(' €','')).toFixed(2);
var quantity = parseFloat($("#edit-quantity").val());
price *= quantity;
var glbvar = price.toFixed(2).replace('.',',')+' €';
//Set Price
document.getElementsByClassName('field-name-commerce-price')[0].getElementsByClassName('field-item')[0].innerHTML = glbvar ;
}
}
$(document).ready(function(){
//When refreshing the value get lost:
if( parseFloat($("#edit-quantity").val()) != 1) value();
/*For input*/ $("#edit-quantity").bind("propertychange keyup paste input",value);
/*For span*/ $('span').bind('click',value);
});
});
I have the below script:
$("#product1").autocomplete({
source: "get_sku_family",
messages: {
noResults: '',
results: function () {}
},
select: function (event, ui) {
var selectedObj = ui.item;
$.post('get_as_09',
{
data: selectedObj.value
},
function (result) {
if (result[0] > 0) {
$('#h09_1').attr('checked', 'checked');
} else {
$('#h09_1').removeAttr('checked');
}
}
});
}
});
This has an autocomplete field that when text is entered provides options from a database. this works. then on clicking an option from the autocomplete, it queries the database with a function(get_as_09) and checks the checkbox based on the result.
Again this works 100%.
What I do want to change though, is that when I enter a new value on the autocomplete, it must clear the checkboxes before applying the new database lookup logic to check the boxes.
I just don't know where to add the $('#h09_1').removeAttr('checked');
Thanks and Regards...
any help appreciated
UPDATE Ripu
if(data:selectedObj.value.length ==0 ){$('#h09_1').removeAttr('checked');};
$.post('get_as_09', {data:selectedObj.value},function(result) {
if(result[0] > 0) {
$('#h09_1').attr('checked','checked');
} else {
$('#h09_1').removeAttr('checked');
}
});
before this line
$.post('get_as_09', {data:selectedObj.value},function(result) {
check if the value of data:selectedObj.value is empty. If it is empty, then you don't need to make a post request, just simply uncheck the checkbox
try to make it on texbox on change event means when you enter the new value in auto complete make it there to clear any thing you want check
Why dont you clear your checkboxes on focus of the auto-complete field.
Here is the documentation about this event http://api.jqueryui.com/autocomplete/#event-focus
as you said just a $('#h09_1').removeAttr('checked'); should suffice.
focus: function( event, ui ) {
$('#h09_1').removeAttr('checked');
}
what if you put before
$.post('get_as_09', {data:selectedObj.value},function(result) {
so everytime before you put smth inside your $('#h09_1') you clean it?
What if you attach an event listener on the element based on the keypress event? Something like this:
$(selectedObj).one('keypress', function (e) {
var checkbox = $('#h09_1');
if (selectObj.val().length > 0) {
checkbox.attr('checked', false);
}
});
This way you know somebody is typing in the field before you clear it. You could bind the event listener after each database lookup. Just an idea.
Per the following multiselect I need to grab the selected values that are selected from many multidropdowns on one page. I have a generic event handler setup where if a selection is clicked on any of the multiselect on the page it fires a common event. Two problems/questions:
1) How can I tell what muliselect (#Name) the event came from?
2) How can I grab the .val()'s from the multiselect click function if the event is from the same container?
// generic event for all multiselect
$("select").multiselect({
click: function (event, ui) {
// 1 - What multiselect container?
// 2- Get the list of selected values
var vals = $('#CNames').val(); // This doesn't work if the event was fired from #CNames..null.
var vals = $('#CAreas').val(); // This works if the event came from #CNames.
You can probably get the id of the select that was clicked with
var name = $(this).attr('id');
and the values of all the selects with
var values = [];
$('select').each(function() {
$.merge(values, $(this).val());
});
or the current select with
var values = $(this).val();
The code from aliz should work. Try binding them all the way the documentation shows:
$("select").bind("multiselectclick", function(event, ui){
var values = [];
$('select').each(function() {
$.merge(values, $(this).val());
}
alert(values);
});
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.