Jqgrid - Validation on selecting dropdown - javascript

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/

Related

Show/hide a select field on Edit page, based on database value

In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value

onClick remote validation for dropdown field

I am using JQuery remote validation on drop-down field to check whether the selected field already exists or not. The overall code is working fine and validates properly. But the issue is remote validation sending an ajax call after onChange event, means it is showing unique key validation error after clicking anywhere on page.
I want to validate it once user clicks on dropdown option. I tried onclick:true but it's not working. Please check my code:
$("#myform").validate({
// onclick:true,
// onkeyup:true,
rules: {
"customer[customer_personal_details_id]": {
required: true,
remote: {
url: "/validation/check",
type: "post",
data: {
columnVal: function () {
return $("#customer_customer_personal_details_id").val();
}
}
}
}
},
messages: {
"customer[customer_personal_details_id]": {
required: "Please Select Account Holder",
remote: "One active account already exists. Duplicate accounts are not allowed."}
}
});
Thanks. Any help would be appreciated.
Try this - assuming you have <SELECT ID="DROPDOWN_ID">
$('#DROPDOWN_ID').on('click', function() {
$("#myform").validate();
});
The select's change event is a much better indicator of when to validate but there's no onchange option. The following should work:
$(function() {
$('select').on('change', function() {
$(this).trigger('focusout');
})
.on('focusout',function(e) {
e.preventDefault();
});
});
Triggering focusout should trigger a validate to be fired on the select element unless the onfocusout option is set to false. You may want to prevent the default behavior of focusout so that it does not trigger a remote validation twice.
In the demo below you'll see that as soon as you select a new value in select element, an attempt to make an ajax call is made -- see network tab of dev tools -- and on focusout no request attempt is made.
JSFIDDLE DEMO
onfocusout Type: Boolean or Function() Validate elements (except
checkboxes/radio buttons) on blur. If nothing is entered, all rules
are skipped, except when the field was already marked as invalid.
http://jqueryvalidation.org/category/plugin/
I do not use: "JQuery Remote Validation", but this code might help you:
JavaScript code:
window . onload = function ()
{
"use strict";
document . querySelector ( "form#myform > select" ) . selectedIndex = -1;
}
function test ()
{
"use strict";
if ( typeof customOption === "undefined" ) { alert ( "FATAL SYSTEM ERROR !" ); return; }
alert ( "Valid option selected ! Congratulations !\nYour selected value is: \"" + customOption + "\"" );
}
and the HTML5 code:
<select onchange="customOption = this . options [ this . selectedIndex ] . value;">
<!-- ( ... ) -->
</select>
This is only demonstration. You can call your function, so you can: "validate it once user clicks on dropdown option" by change HTML5 code ( select element onchange attribute ).
Working fiddle: JSFiddle

Toggle Show and Enable Textfiled When Certain Radio Button is Selected

I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it
$('input[name="x_description"]').bind('change',function(){
var showOrHide = ($(this).val() == "Other") ? true : false;
$('#other_program_text').toggle(showOrHide);
});
I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,
$(this).show().prop('disabled', false);
Thanks in advance,
Dan
$('input[name="x_description"]').bind('change',function(){
if ( showOrHide == true ) {
$('#other_program_text').show().prop('disabled',false);
} else if ( showOrHide == false ) {
$('#other_program_text').hide().prop('disabled',true);
}
});
You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.
Like $(this).attr("enabled", true)
You can use "click" method
$('input[name="x_description"]').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
If your content are dynamically generated then use "live" method
$('input[name="x_description"]').live('click',function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});

jquery javascript - clear checkboxes on changing autocomplete field

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.

jquery autoselect action on 'change' but not on 'select'

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

Categories