I have a hidden input used to create a best looking dropdownlist using Select2 plugin. This hidden field is bound to my observables and it is updating the value in the observable when the value changes. But when I change the dropdownlist to an empty value, the hidden input is updated (value is empty) however the observable keeps the previous value.
<input type="hidden" id="leader" style="width: 300px" data-bind="value: filter.leader" />
So, if I select Item 1 in the dropdownlist, the hidden field and the observable filter.leader are updated. If I deselect the Item 1, only the hidden field is updated.
Why?
I've found the problem. It's related to the Select2 plugin not triggering a change event when I call $('#control').select2('val',''). So, basically what I had to do was to call trigger('change') after the previous command.
Like this:
$('#control').select2('val','').trigger('change')
Related
I have used usual dropdown list and it's not worked,
when i click the submit button for all the data in the form except drop down value were sent to database.how can i fix it??
Your <select> is missing a name="foo" attribute.
A form will only submit elements with a name as part of the request.
I have a dialog that pops up to the user to add some object by filling some fields, one of those fields require the selection of some row in some dataTable, when I select this row from the dataTable I have to update the inputText corresponding for that pick to show the user the name of the row he selected (aka: update the text inputText on rowSelect event), however the inputText doesn't get updated whenever there's another empty required field in the form. What could possibly be the problem?
Here are some code snippets:
<!-- This is the input field I wish to update on row select on pop up table -->
<p:inputText required="true" value="#{applicationsController.orgName}" id="orgNameApp" style="margin-right:5px;"></p:inputText>
<!-- This will pop up the data table which I will choose a row from -->
<p:commandButton icon="fa fa-hand-o-up" onclick="PF('organizationApplication').show()">
</p:commandButton>
this is the data table row select event:
<p:ajax event="rowSelect" listener="#{applicationsController.setOrganizationEdit}" update=":orgNameApp" />
The gets updated normally when I select a row if there are no empty required fields in the form, I've searched and searched, didn't find anything similar.
Any help would be extremely appreciated,
Thanks.
The command button processes the whole form, and since there are empty required fields, it will process them as it shows the data table pop up, and so the form will not be updated. trying process="#none" at first solved half the problem, but then after submitting the form the fields which were filled will not get updated anymore, so I changed the process from #none to the input field itself and it seemed to work just fine now, thanks to #Jaqen H'ghar for helping me in this.
In my SpringMVC form, I was facing the problem of binding a Disabled Text Box to a Model object. The issue is that, even if initially populated, after submitting the form the Disabled box's contents are lost on the next page refresh, because Disabled fields aren't submitted.
However, I solved this by just adding a Hidden field that binds to the same property. Now my Disabled text box retains its contents even after submission. Is this the correct approach, if I need to always show the property value in my Disabled box?
<form:input path="signatureBlock.signature" disabled="true"/>
<!-- Hidden field to submit Signature with form, binds to the same Model property -->
<form:hidden path="signatureBlock.signature" />
I would prefer to suggest you this approach
<form:input path="signatureBlock.signature" readonly="true"/>
Here's difference definition between disabled and readonly html attribute
but the real goal is not to persist the value into the db.
It really doesnt matter(in the context of modifing field value) if you set field value as disabled or read-only because if user removes these attributes from the post form(in html) the field value will be bound to the form anyway. The solution is not to persist the 'disabled' values in the method wich converts form to the db object or set the proper init binder with allowed fields.
I'm using MVC, Knockout, and Knockout Validation to validate my view model.
I'm running into an issue where the validation for view model properties are firing immediately upon loading. In other words, "This field is required" shows up next to my inputs before a user has attempted to change their values.
This problem is specifically happening with dropdown (select) controls.
I'm guessing that this is a problem that I've created by somehow unintentionally changing/accessing/mutating the observable in another part of my javascript code. However, I don't know how to track this down.
Is there a way that I can somehow subscribe or track the even that fires that causes validation in Knockout Validation? I just need to know why this is firing in the way it is. I'm pretty confident that the value of the isValid() function is consistently false.
Here's a sample of how my HTML is setup on page load, unmolested:
<select class="highlightable validationElement" name="obsstate" data-bind="value: standardAnswers.ans106_1.value" required="true">
<option value="">-- Select -- </option>
<option value="AK">AK</option>
<option value="AL">AL</option>
etc...
</select>
After applying the bindings for the viewmodel. Then for that viewmodel make showAllMessages as false
Example
YourViewmodelname.errors.showAllMessages(false);
Quoting KO page.... ( http://knockoutjs.com/documentation/options-binding.html )
KO will prefix the list of items with one that displays the text “Select an item…” and has the value undefined. So, if myChosenValue holds the value undefined (which observables do by default), then the dummy option will be selected. If the optionsCaption parameter is an observable, then the text of the initial item will update as the observable’s value changes.
So, I solved it by setting "undefined" when defining the property, see example below:
self.myProperty = ko.observable(undefined).extend({
required : {"Field Required"}
});
Hope this helps...
I figured out this issue on my own.
The problem exists between the razor engine templating the select options, and then later binding the value of the selected element to Knockout.
Despite the fact that there is no user-inputted value in the select box, the default value, the "--select--" actually contains a value. In my case it was an empty string. Therefore, when I applied the knockout bindings, my viewmodel property was "updated" with the empty string value, and therefore validation fired.
To get around this in my case I set the default value of my model to be an empty string. Therefore when the bindings are applied, there is no valueHasMutated event fired on the Knockout observable, and thus no validation.
I have a form that has a cancel / reset. The updating is done with Ajax. If I submit a (successful) update, then make an additional change to the check boxes but then choose cancel (read: reset), the reset goes all the way back to the original values. Mind you, the DB isn't being updated (due to not submitting) but what displays is inaccurate and misleading.
How do I update the "baseline state" (?) of the form so the cancel / reset goes back to the new version of the form values.
I would perform an additional AJAX call to retrieve the current values from the database to reset the values. You can design the application to use the same lookup on page load and when reset is clicked.
An additional option would be to store off the values from the last save in HTML5 data attributes on each form field. When reset is clicked you'd could re-populate the values based on the data attribute. For example.
<!-- HTML -->
<input type="text" name="firstName" id="firstName" value="jim" data-last-value="joe" />
/* JS - Do this on reset. */
$('[data-last-value]').each(function() {
var lastValue = $(this).attr('data-last-value');
$(this).val(lastValue);
});