My C# web method uses JavaScriptSerializer to return a JSON object in string format called jSONstring. My javascript then uses jquery.deserialize and does the following:
$("#form").deserialize(JSON.parse(jSONstring));
This seems to work fine except when mapping to an array of elements.
My HTML is as follows:
<input name="AccountID" value="" />
<input name="Account[0].name" value="" />
<input name="Account[1].name" value="" />
<input name="Account[2].name" value="" />
The JSON object returned from the server looks like:
'{"AccountID": 123, "Account":[{"name": "AccountName1"},{"name": "AccountName2"},{"name": "AccountName3"}]}'
After calling deserialize the AccountID is updated but the account names are never updated to AccountName1, AccountName2, AccountName3.
I tried renaming my input elements to the following and it still doesn't work:
<input name="Account.name" value="" />
<input name="Account.name" value="" />
<input name="Account.name" value="" />
What am I doing wrong?
That format is not supported by the plugin, it only supports data generated from jQuery.serialize, jQuery.serializeArray and jQuery.serializeObject (unofficial). That said, it would not be hard to write a small function that would convert the returned JSON object you have into one of the formats listed above. Another option would be using a different method of serialization, such as parametizing it.
Related
Anyone have experience with using jQuery datatables with ColdFusion? Did you have any success in using the "serverSide" mode, in getting CF to properly parse the parameters sent by datatables to the server into complex variables? For example, currently if I dump the "form" I'm getting keys like columns[1][data] or search[value]. How do I get ColdFusion to parse these parameters into variables like form.columns[1].data or form.search.value?
According to the documentation at https://datatables.net/manual/server-side, it says:
In most modern server-side scripting environments this data will automatically be available to you as an array.
I'm using ColdFusion 11.
You might want to check out a utility called FormUtils.
It can take this
<h2 class="is-size-2">employee[1]</h2>
<input name="employee[1].name" type="text" value=""><br />
<input name="employee[1].phone" type="text" value=""><br />
<input name="employee[1].permission.2" type="text" value=""><br />
<input name="employee[1].permission.1" type="text" value=""><br />
<input name="employee[1].mode[2]" type="text" value=""><br />
<input name="employee[1].mode[1]" type="text" value=""><br />
And turn it into structs and arrays
<cfset util = new formutils.FormUtils().init() />
<!--- form has been patched --->
<cfdump var="#form#">
It basically allows forms to be pushed over as structs and arrays
Disclaimer
I rewrote the original. The original was done by Brian Kotek.
The links below are to my version of the code. There are also links to his version.
Video demo of it in action: https://coldfusion.adobe.com/2018/10/make-form-processing-simpler-with-brian-koteks-formutils/
Core file: https://github.com/jmohler1970/FormUtils
Demo site: https://github.com/jmohler1970/FormUtils_demo
Need advice about form validation.
I have control structure like so:
<form name="myForm">
<control-wrap>
<label isRequired="myForm.field1">Some text here</label>
<custom-control name="field1"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field1"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field1"></error-list>
</control-wrap>
<control-wrap>
<label isRequired="myForm.field2">Some text here</label>
<custom-control name="field2"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field2"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field2"></error-list>
</control-wrap>
<control-wrap>
<label isRequired="myForm.field3">Some text here</label>
<custom-control name="field3"
ng-required="true"
ng-something-else="any"
ng-model="modelForm.field3"></custom-control>
<info>Some data after control</info>
<error-list field="myForm.field3"></error-list>
</control-wrap>
</form>
And this is completely AWFUL, unDRY and I guess I'm doing something very wrong.
I want to stop using field names, but I don't know how to pass ngModel to the sibling the proper way (now I'm forced to pass ngModel via attributes to isRequired and error-list).
Best solution for me ofc is to require: '^ngModel' from isRequired and error-list.
Any advice will be very appreciated.
P.S. there is no way for me to store fields in json object, there is a lot of logic between fields and different tweaks on labels and hints.
Well, I came to this solution: https://plnkr.co/edit/mPXpEaZs2uWZb3WRkmgp?p=preview
Maybe it's not the best solution, but I don't need names anymore.
The main idea is to set model reference to parent container and watch this reference from other children.
So in the end I have:
<control-wrap>
<label link-required>Field1 label:</label>
<input link-to-wrap ng-model="mc.field1"
type="text"
ng-required="true"
ng-minlength="5"
ng-maxlength="10" />
<errors-list></errors-list>
</control-wrap>
UPDATE
Some more thoughts about storing validation rules with model:
https://plnkr.co/edit/6ZVv685oSRDt7ELBKb9z?p=preview
New directive my-rules and extended data in controller.js
I have a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks
I was working on a simple angular functionality. but got stuck.
e.g.
<input type="radio" data-ng-model="package" value="1" data-more="some text here" />
Is there a way to retrieve the more data?
I know I can get the value by this using this: {{package}}
Cheers
I am trying to get a group of checkboxes by the name attribute. For example, I have the following:
<input name="labs[]" type="checkbox" value="lab1" />
<input name="labs[]" type="checkbox" value="lab2" />
<input name="labs[]" type="checkbox" value="lab3" />
<input name="labs[]" type="checkbox" value="lab4" />
And Im trying to get that group by doing something like:
Ext.query('input[name=labs[]]');
But that clearly doesn't work because of the square brackets that are part of the name. I'm lost as to how to do this?
You could do a "starts with" match instead:
Ext.query('input[name^=labs]');
This will not work very well if you have other elements that start with "labs" though, so you may want to add another identifier to your "labs[]" name, i.e. "labs-check[]".
Try matching an input element that has a name attribute that starts with 'labs':
Ext.query("input[name^=labs]");