Good morning, everyone,
I am having a problem with the handling of two checkboxes which should be mutually exclusive, on the page we cannot put an id because multiselection is provided.
enter image description here
Here the zkoss code:
<cell colspan="2">
<checkbox
label="${labels.label.giaAddebitata}"
checked="#load(each.flagAddebitata eq '1')"
onCheck="#command('addebitata', fladd=event.checked,idPer=each.idPerizia )"
onFocus="#command('manageList', idPer=each.idPerizia)"
disabled="#load(each.statoContabile eq 4 ? true : false)"/>
</cell>
<cell colspan="2">
<checkbox
label="${labels.label.nonAddebitare}"
checked="#load(each.nonAddebitare eq '1')"
onCheck="#command('nonaddebitata',flnoadd=event.checked, idPer=each.idPerizia)"
onFocus="#command('manageList', idPer=each.idPerizia)"
disabled="#load(each.statoContabile eq 4 ? true : false)"/>
</cell>
and the java functions
#Command
#NotifyChange ({ "flagAddebitata","nonAddebitare", "selectedRic"})
public void addebitata(#BindingParam("fladd") boolean fladd,#BindingParam("idPer")int idPerizia ) {
boolean addebitata = fladd;
selectedRic = new HashSet<AddebitoClienteViewDTO>();
for(AddebitoClienteViewDTO add : carList) {
if(add.getIdPerizia() == idPerizia) {
add.setFlagAddebitata(booleanToString.apply(fladd));
selectedRic.add(add);
}
}
logger.debug("SELECTEDRIC non addebitare " + selectedRic);
logger.debug("addebitata funzione " +addebitata);
}
#Command
#NotifyChange ({ "nonAddebitare", "selectedRic"})
public void nonaddebitata(#BindingParam("flnoadd") boolean flnoadd,#BindingParam("idPer")int idPerizia ) {
boolean nonaddebitata = flnoadd;
selectedRic = new HashSet<AddebitoClienteViewDTO>();
for(AddebitoClienteViewDTO add : carList) {
if(add.getIdPerizia() == idPerizia) {
add.setNonAddebitare(booleanToString.apply(flnoadd));
selectedRic.add(add);
}
}
logger.debug("SELECTEDRIC non addebitare " + selectedRic);
logger.debug("nonaddebitata funzione " +nonaddebitata);
}
We tried using the && != " the != alone and adding another binding param to the java functions.
The result we want to achieve is that if one check is clicked the other if it is already selected loses the check.
Alternatively we tried the radiogroup but it does not allow the non-selection of radioboxes, one is always mandatory.
Is there a way to clear the radiobutton without a java clear function?
Thanks
That's a lot of code and hard to turn into a reproducing case due to all of the extra objects, so I'll focus more on the functional requirement.
From your description, I understand that what you want to create is a system in which you can either select "A", "B" or "none".
There is some unspecified behavior in there (like if "A" is selected, can I select "B" and automatically clear selection on "A"? Or does having "A" selected mean that "B" is non-selectable).
From your stated requirement, the component I would choose to express that structure is a dropdown menu with 3 choices ("not selected", "A", "B"), but that might not be what you are trying to achieve with the UI design here?
If you want to make something like that using checkboxes, you may want to keep a single state for the selection status, and a command to update the selection status.
See a simple code sample here: https://zkfiddle.org/sample/hb7f7k/1-Another-new-ZK-fiddle
The left 2 checkboxes work on a "unselect others if selected" workflow.
The right 2 checkboxes work on a "cannot select others while selected, but can unselect" workflow.
Note: that sample is a "bare minimum" implementation. In a real case, you'd improve it by factorizing the code, making it into a template, etc. rather than declaring these values inline.
Related
I wrote a function to update Validator rules on an input if a certain option was selected, using this method (the forms are built using FormGroup):
onValueChanged(data : any) {
let appVIP1 = this.vip1TabForm.get('option1');
let appVIP2 = this.vip2TabForm.get('option2');
let appVIP3 = this.vip3TabForm.get('option3');
//Set required validation if data is 'option3'
if(data != 'option3') {
//Due to initialization errors in UI, need to start with the case
//That there are validations, check to remove them
appVIP1.setValidators([]);
appVIP2.setValidators([]);
appVIP3.setValidators([]);
}
else {
appVIP1.setValidators([Validators.required]);
appVIP2.setValidators([Validators.required]);
appVIP3.setValidators([Validators.required]);
}
}
And I bind that function call to a click event on radio buttons (I initially used the guide from this answer, but the onChange function didn't bind correctly).
This works great, and if the user selects option 1 or 2, the validations are empty, and won't be triggered. If they select option 3, the validations are shown and submission is stopped. However, I run into the problem where the user submits, sees the error, and goes back to change to option 1 or 2. While the validator is cleared, my form still reads as invalid. I have multiple input fields I am validating, so I can't just set the form to valid if the validator is removed this way. How would I go about doing this? Can I remove the has-error for one particular field in the formgroup?
If the correct validators are in place, you can manually call AbstractControl#updateValueAndValidity after they select an option:
this.formBuilder.updateValueAndValidity();
(Where, of course, this.formBuilder is your FormBuilder instance.)
You can also call it on FormElements directly.
This is commonly used to trigger validation after a form element's value has been programmatically changed.
Instead of removing and adding validations. It is more simple to enable and disable fields. You need to add the Validators.required for all required fields. And disable the fields which are not required.
onValueChanged(data : any) {
let appVIP1 = this.vip1TabForm.get('option1');
let appVIP2 = this.vip2TabForm.get('option2');
let appVIP3 = this.vip3TabForm.get('option3');
if(data != 'option3') {
appVIP1.disable();
appVIP2.disable();
appVIP3.disable();
}
else {
appVIP1.enable();
appVIP2.enable();
appVIP3.enable();
}
}
My teammates and I are learning AngularJS, and are currently trying to do some simple form field validation. We realize there are many ways to do this, and we have tried
putting input through validation filters
using a combination of controller and validating service/factory
a validation directive on the input element
a directive comprising the label, input and error output elements
To me, the directive approach seems the most "correct". With #3, we ran into the issue of having to communicate the validation result to the error element (a span sibling). It's simple enough to do some scope juggling, but it seemed "more correct" to put the span in the directive, too, and bundle the whole form control. We ran into a couple of issue, and I would like the StackOverflow community's input on our solution and/or to clarify any misunderstandings.
var PATTERN_NAME = /^[- A-Za-z]{1,30}$/;
module.directive("inputName", [
function () {
return {
restrict: "E",
require: "ngModel",
scope: {
fieldName: "#",
modelName: "=",
labelName: "#",
focus: "#"
},
template: '<div>' +
'<label for="{{fieldName}}">{{labelName}}</label>' +
'<input type="text" ng-model="modelName" id="{{fieldName}}" name="{{fieldName}}" placeholder="{{labelName}}" x-blur="validateName()" ng-change="validateName()" required>' +
'<span class="inputError" ng-show="errorCode">{{ errorCode | errorMsgFltr }}</span>' +
'</div>',
link: function (scope, elem, attrs, ngModel)
{
var errorCode = "";
if (scope.focus == 'yes') {
// set focus
}
scope.validateName = function () {
if (scope.modelName == undefined || scope.modelName == "" || scope.modelName == null) {
scope.errorCode = 10000;
ngModel.$setValidity("name", false);
} else if (! PATTERN_NAME.test(scope.modelName)) {
scope.errorCode = 10001;
ngModel.$setValidity("name", false);
} else {
scope.errorCode = "";
ngModel.$setValidity("name", true);
}
};
}
};
}
]);
used as
<form novalidate name="addUser">
<x-input-name
label-name="First Name"
field-name="firstName"
ng-model="firstName"
focus="yes"
model-name="user.firstName">
</x-input-name>
<x-input-name
label-name="Last Name"
field-name="lastName"
ng-model="lastName"
model-name="user.lastName">
</x-input-name>
...
</form>
First, because both form and input are overridden by AngularJS directives, we needed access to the ngModel API (ngModelController) to allow the now-nested input to be able to communicate validity to the parent FormController. Thus, we had to require: "ngModel", which becomes the ngModel option to the link function.
Secondly, even though fieldName and ngModel are given the same value, we had to use them separately. The one-way-bound (1WB) fieldName is used as an attribute value. We found that we couldn't use the curly braces in an ngModel directive. Further, we couldn't use a 1WB input with ngModel and we couldn't use a two-way-bound (2WB) input with values that should be static. If we use a single, 2WB input, the model works, but attributes like id and name become the values given to the form control.
Finally, because we are sometimes reusing the directive in the same form (e.g., first name and last name), we had to make attributes like focus parameters to be passed in.
Personally, I would also like to see the onblur and onchange events bound using JavaScript in the link function, but I'm not sure how to access the template markup from within link, especially outside/ignorant of the larger DOM.
I have an issue with getting default value of select dropdown.
i have fruits val:
val fruits = List("apple", "banana", "other")
and i render a tr with:
<tr id={ theLine.guid }>
<td>
{
SHtml.ajaxSelect(fruits, Full(fruits(0)),
s => {
mutateLine(theLine.guid) {
l => Line(l.guid, l.name, s, l.note)
}
Noop
})
}
</td>
(...)
on page html is rendered correctly with option selected="selected", but when i try to save it to DB i get empty value of fruit. if i change option to 'other' and then i select it back to 'apple', it saves right value.
i add also a println function to addLine to see what values are in this vector, and there is empty value if i dont change fruit option, so i suppose that it is not problem when i process lines to save it to DB.
can you help me with this?
thanks
Gerard
Before you change your select option, you are not triggering the event that calls your function. The function is bound to onChange and that only gets fired when the value changes.
To fix, you could either: Start with an option like "Select a value". This would require the user to change the item, but is the only way to trigger the onchange.
If you don't want to do that, you could add a button and add your logic to a button click handler that would get called when submitted. Something like this should help - you'll need to bind it to your output, either inline as you provided, or via CSS Selectors:
var selected = Full(fruits(0))
SHtml.ajaxSelect(fruits, selected,
s => {
selected = Full(s)
Noop
})
SHtml.ajaxSubmit("Submit", () => {
mutateLine(theLine.guid) {
l => Line(l.guid, l.name, selected, l.note)
}
})
I have dropdown like this ,
<%= Html.OptionList("Worktype", new SelectList(new List<SelectListItem>{
new SelectListItem{Text = "--Select One--", Value = "0", Selected=true},
new SelectListItem{Text = "Fulltime", Value = "Full Time"},
new SelectListItem{Text = "Partime", Value = "Part Time"}}, "Value", "Text" )) %>
After selecting either fulltime or parttime it should submit, but because the default select is there, required validation is passing. I want the required validation for below two options. can anyone help me out.
thank you,
michael
SetValue empty instead of 0 for "--Select One--"
new SelectListItem{Text = "--Select One--", Value = string.Empty , Selected=true}
I suggest that you should not be adding optional label in SelectList or as SelectListItem. you have overloads for Html.DropDown and Html.DropDownListFor that would allow you to insert an optional label at the top of your dropdown list. Pleas check my answer to this question.
DO you want to fire any event only in case of full time and part time and in case of select you dont want anything to happen.
If this is what you want
$('#dropdownname').change(function () {
var dropdownValue = $(this).val();
if (dropdownValuetoString().length > 0)
{
Your Code here.........
}
});
dropdownname is the name of dropdown dropdownValue is what I m getting from dropdown list when index is changed.
I was filling the dropdown from a list and I was not using any value field
when u check the dropdownValue for select It will show blank and I m sure ur dropdown select list will always have a name.
Tell me if it helps you else I will try something different
I am using jqgrid in my new project.
In a specific case I need to use a select element in the grid. No problem.
I define the colModel and the column for example like (from wiki)
colModel : [
...
{name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} },
...
]
But now when I load my data I would prefer the column "myname" to contain the value 1.
This won't work for me instead it has to contain the value "One".
The problem with this is that the text-part of the select element is in my case localized in the business layer where the colModel is dynamically generated. Also the datatype for the entity which generates the data via EF 4 may not be a string. Then I have to find the correct localized text and manipulate the data result so that the column "myname" does not containt an integer which is typically the case but a string instead with the localized text.
There is no option you can use so that when the data contains the value which match an option in the select list then the grid finds that option and presents the text.
Now the grid presents the value as a text and first when I click edit it finds the matching option and presents the text. When I undo the edit it returns to present the value again.
I started to think of a solution and this is what I came up with. Please if you know a better solution or if you know there is a built in option don't hesitate to answer.
Otherwise here is what I did:
loadComplete: function (data) {
var colModel = grid.getGridParam('colModel');
$.each(colModel, function (index, col) {
if (col.edittype === 'select') {
$.each(grid.getDataIDs(), function (index, id) {
var row = grid.getRowData(id);
var value = row[col.name];
var editoptions = col.editoptions.value;
var startText = editoptions.indexOf(value + ':') + (value + ':').length;
var endText = editoptions.indexOf(';', startText);
if (endText === -1) { endText = editoptions.length; }
var text = editoptions.substring(startText, endText);
row[col.name] = text;
grid.setRowData(id, row);
});
}
});
}
It works and I will leave it like this if nobody comes up with a better way.
You should just include additional formatter:'select' option in the definition of the column. See the documentation for more details.