I'm hitting a problem when using T. Hedersen's backbone.validation plugin (https://github.com/thedersen/backbone.validation) in conjunction with Derick Bailey's backbone.modelbinding plugin (https://github.com/derickbailey/backbone.modelbinding).
I've put together a jsFiddle example (http://jsfiddle.net/simax/bEqnZ/) to try and demonstrate the issue.
In the example if you remove the contents of the firstname or lastname the isValid(true) call still returns true, which is incorrect as both firstname and lastname are required fields. You'll also notice that the DisplayForm is not updated correctly. It appears that the models properties are not being "unset" correctly.
If however you remove the call to Backbone.Validation.this(bind) the model properties and DisplayForm are updated correctly.
Anyone know what the problem is?
Quick answer:
Change the validation line to:
Backbone.Validation.bind(this, {forceUpdate: true});
Background:
When the modelbinding tries to update the model, the validation fails and the model is not updated at all.
Setting the forceUpdate flag allows your model to be in an invalid state (and therefore can hold an empty string).
Related
The fact that ng-change is only for user input, and does not fire when changes are made to the model programmatically, is really causing me a headache today. I'm working with a user input form which has the separate parts of a name, as well as dynamically built and ordered credentials. The form has a "displayName" field that gets updated when the name parts are changed. This is encapsulated in a directive which I need to use in a larger view. Here's where things get hairy. I need to hide the name part fields in my directive and use the outer form's name fields. I thought this would be easy by wiring up a function to update the hidden text input fields, and thus my displayName field. Then I found out programmatic changes to the model do not fire the change event.
I tried creating a watch for one of the name fields to see if I could get it to update the displayName field, but no luck.
this.scope.$watch('provider.firstName', function (event) {
namePropertyChanged2(displayNameOverridden, displayName, provider, credentials);
});
When I change the input field for firstName, it modifies the directive's value 'provider.firstName', and runs the 'namePropertyChanged2' function. The code listed runs in an initialize function, where 'displayName' is a local variable assigned from this.scope.provider.displayName. The watch assignment required me to make local variables instead of passing in controller variables. Not sure why, but whatever. So this function runs and 'displayName' is updated with the correct value... and the input field it's bound to is not updated. Bummer.
What would be ideal is to manually trigger the change event when the model changes, which would update the displayName and much rejoicing to be had.
When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.
I am using icefaces 1.8.2 and i have a HtmlBooleanCheckbox on my page that I need to uncheck when certain circumstances are met.
the checkbox on the page is like this
<ice:selectBooleanCheckbox id="accepttermscheckbox"
binding="#{managedBean.termsAgreement}"
validator="#{managedBean.validateAgreement}">
</ice:selectBooleanCheckbox>
and the binded object is a property of the managed bean with proper getter and setter
private HtmlSelectBooleanCheckbox termsAgreement;
i can check the checkbox in code, validator works fine and all the stuff i do with it are ok too but I just cant find a way to uncheck it on the server side.
I tried:
termsAgreement.setValue(Boolean.FALSE)
termsAgreement.setValue(null)
termsAgreement.setSelected(false)
but nothing works. Even if I debug it it shows value = null but when the page renders it still appears checked.
Once I check it I just cant get it unchecked unless I click it manually on the page.
funny thing is that
termsAgreement.setValue(Boolean.TRUE)
works fine.
Anyone any tips how I can uncheck it server side on the binded object?
Thank you in advance for help.
You are facing a common issue faced by ICEfaces/JSF developers.
First of all, you need to understand how JSF lifecycle works.
Following is a good article to read.
http://www.ibm.com/developerworks/library/j-jsf2/
For your case, bind a value to <ice:selectBooleanCheckbox>.
For example value="#{managedBean.termsAgreed}".
<ice:selectBooleanCheckbox id="accepttermscheckbox"
binding="#{managedBean.termsAgreement}"
validator="#{managedBean.validateAgreement}"
value="#{managedBean.termsAgreed}">
</ice:selectBooleanCheckbox>
Do not try to change the value from the component. Always change value from the value binding. In this example, you must change the value termsAgreed.
If your action/actionListener is not immediate, i.e `immediate="false", which is the default value, then changing the value in server-side will check/uncheck checkbox component.
If you are using immediate="true", then you must call resetValue() method in your component, HtmlSelectBooleanCheckbox:
termsAgreement.resetValue();
Ideally, you shouldn't call setValue() methods in components. You will understand it when you understand the JSF lifecycle.
Hope this will help!
I'm having issues getting tablesorter to work correctly with the following code:
el = this.view.render().el;
$("#players").html(el);
$("#players-table").tablesorter({
theme: 'blue'
});
The table sorter styles get applied fine, but none of the columns will sort.
However, if I set a breakpoint in firebug on 3rd line, wait until the table renders then continue on, it works fine.
According to the .html() documentation for jQuery, .html() is a synchronous call. Shouldn't this mean that setting a breakpoint and "waiting" shouldn't have an effect? Is there something I am missing?
Turns out the issue was that I forgot about was the collection being fetched is async. So while this code was actually correct, it was running before the collection (which is passed to the view) was populated.
So the reason the breakpoint worked is that it gave the collection time to populate and render before going through and tablesorter-ing the table.
Without more context my best guest at fixing this would be to specifically target the jquery element $el instead of el.
$("#players").html(this.view.render().el);
this.view.$el.tablesorter({
theme: 'blue'
});
I'm trying to understand how Backbone.js model validation works, but I'm seeing some odd inconsistencies. In one place in my app, the validate method is getting called as expected. In another place, however, Backbone.js seems to be passing in a { silent: true } object to the validator, even though I don't want it to.
Here's a jsFiddle that illustrates the issue. The validate method should be called When the Copy buttons are clicked or the values change, but when I step through the code it's clear that the _validate function is being passed the { silent: true } option.
What am I missing?
Update: Figured out what was going on here. I created this jsFiddle originally to replicate an issue I was having that was actually the opposite of this question--I was trying to add an empty model to a collection and validation was firing and preventing me from doing so. When I made the Fiddle, though, it worked as I wanted my app to work. Validation wasn't firing when an empty model was added. I couldn't figure out the difference.
Turns out I was using Backbone.js 0.9.0 in my application and version 0.9.1 in my jsFiddle. Jeremy made changes to validation in 0.9.1 to make it work the way I wanted it to work in my app (see this issue on GitHub). Mystery solved.
Backbone specifically does not call _validate when you're making a new model.
Jeremy suggests that you do:
var mymodel = new MyModel();
mymodel.set({params});
Here's our exchange on github: can't override silent:true
From the Backbone docs, it seems you have to either call set or save on the model in order for validate to trigger.
I updated the jsfiddle so that set is called, and the now the validation function gets triggered:
http://jsfiddle.net/J3uuH/12/