On my form, I've got Telerik NumericTextBox:
#Html.Telerik().CurrencyTextBoxFor(p => p.Item.Amount)
and javascript sends that form to the controller:
var formData = $("form").serializeArray();
$.post("#Url.Content("~/Diary/Add")", formData );
My problem is, that the CurrencyTextBox doesn't get serialized and sent to the server. I know why it's happening - this control is made of 2 inputs, with messed up names and IDs, so serializer doesn't recognize it as a "successful control" ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 ).
Does anybody know if there is any way around it, without any nasty hacks (like manually adding that value to the array)?
You can try using a more up-to-date version. The numeric textbox has only one <input /> now.
Related
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
What I have
I'm using the FormController to create inputs. A specific input will be frequently updated by Javascript for internal purposes and I want it hidden. In this case, I can't use type="hidden", instead it needs to be type="text" so that it won't be checked by the form tampering prevention when submitted.
What I tried
Adding 'hidden' => true to $this->Form->create() options works if the whole form needs to be hidden. That exact attribute doesn't seem to be working for individual inputs though, created using both $this->Form->input() and $this->Form->control()
For a specific input, first thing that comes to mind is adding 'style' => 'display:none' to its options, but that does not seem like a clean CakePHP-way solution
I think I've seen someone mention a way to do exactly that here. I think it was an attribute you'd add to the options. I searched around my answers and comments, using both this site and Google, but found nothing.
Please advise!
You can create a hidden input and make it exempt from form security in case required, either by unlocking the field via the unlockField() method:
$this->Form->unlockField('field_name');
echo $this->Form->hidden('field_name');
or by passing false or 'skip' for the secure option:
echo $this->Form->hidden('field_name', ['secure' => false]);
echo $this->Form->hidden('field_name', [
'secure' => \Cake\View\Helper\FormHelper::SECURE_SKIP
]);
See also
Cookbook > Views > Helpers > Form > Working with SecurityComponent > unlockField()
I recently asked this question about the changes to RegExp pattern validation that were introduced in AngularJS v1.3. The answer I received apparently solved my problem, but now I am trying to apply that approach, and I see that the behavior is again different in AngularJS v1.4.
Specifically, I want to apply pattern validation to a date input field, but the validation RegExp will be exposed as a property of the model, instead of being hard-coded into the form markup.
As suggested, I am specifying the name of the model property in the ng-pattern attribute ...
<input type="date" ng-model="myDate" name="myDate" ng-pattern="control.dateRegex" />
... and exposing the validation RegExp as a property of the model:
$scope.control = {
dateRegex: /^2015-\d+-\d+$/
};
This JSFiddle shows it working correctly with AngularJS v1.3 and this one demonstrates that the same implementation does not work with v1.4. I am unable to find any documentation that describes the correct implementation for use with v1.4.
Any suggestions please?
After asking a similar question on the AngularJS issues forum, I learned that this behavior is specific to date input validation. It arises because the model property used for date input binding has changed from a String to a Date object, which means that is no longer possible to use a RegExp to validate it.
It seems that the AngularJS team recognize this as a bug and that we can expect a fix in a forthcoming release. I will monitor the issue and update this thread when there is some progress.
I'm developing a friend invitation feature for a website.
Only requirements are : by email and has a max number of invitations at a time.
My idea is the following :
At the start, user only sees one email field. When he enters an email adress in the only field, angularjs validates it (email format check) and creates an additional email field.
Now, I come from a jquery background and I think it's bad practice to manipulate DOM with angular.
How would one do it with angularjs ?
Is it a good idea to create a factory that "produces" (from a template file) fields ?
Can a library like bootstrap ui help me write simpler code for form validation and error management
This Plunker might fulfill your need at its closest: http://plnkr.co/edit/5qRXQ1XGzUnhYjLCiyYR?p=preview
The key point in this technique is letting the user directly edit a dynamic list of models. Indeed in the example, $scope.invites contains your values. The trick here is referring to them as models:
<input type="email" class="invite" name="invite{{ $index }}" ng-model="invites[$index].mail" ng-change="checkInvite($index)" />
$index being the index of the current ng-repeat iteration. checkInvite function will take care of watching changes in your invites fields.
Notes:
invites is an array of objects, this way we're sure not to mess with ng-repeat, iterating over the reference that we handle (vs models that would be handled by angular)
The field's name is useful to manually check the field's validity: in the controller we can check a field's validity accessing $scope.formName.fieldName.$valid
I also added an extra test that checks if the user clears a non-last filled-in field. In this case, we remove the field.
Have fun using angular!
Personally, I would find the design confusing, since I wouldn't know I could have more email addresses. At the minimum, I would want a + to indicate to the user that s/he can add more addresses. Think of how airlines do "multiple destinations" searches on their Websites.
However, if you are set at this, use an array in the scope. I am using a table for this, but anything will do.
<input ng-model="newemailaddress"></input><button ng-click="addEmail">Add</button>
<table>
<tr ng-repeat="addr in addresses"><td>{{addr}}</td></tr>
</table>
And your controller something like:
.controller('MyCtrl',function($scope) {
$scope.addresses = [];;
$scope.newemailaddress = "";
$scope.addEmail = function() {
// do validation
if (valid) {
$scope.addresses.push($scope.newemailaddress);
$scope.newemailaddress = "";
};
};
})
I think I have some sort of special code here as all I could google was "too simple" for my problem and it also didn't helped to come to a solution by myself, sadly.
I got a radio button group of 2 radios. I am iterating over "type" data from the backend to create the radio buttons.
My problem is the data binding: When I want to edit an object its "type" is set correctly, but not registered by the view so it doesn't select the desired option.
Follwing my situation:
Backend providing me this as "typeList":
[
{"text":"cool option","enumm":"COOL"},
{"text":"option maximus","enumm":"MAX"}
]
HTML Code:
<span ng-repeat="type in typeList track by type.enumm">
<input
type="radio"
name="type" required
ng-model="myCtrl.object.type"
ng-value="type">
{{type.text}}
</span>
Some Explanation
I don't want to use "naked" texts, I want to use some sort of identifier - in this case it is an enum. The chosen value shall be the entire "type", not only "type.text" as the backend expects type, and not a simple String.
So all I do with this is always a package thingy, the type.text is for like formatted/internationlized text etc.
A Pre-Selection works by setting this in the controller: this.object.type = typeList[0];
The first radio button is already selected, wonderful.
But why isn't it selected when editing the object. I made a "log" within the HTML with {{myCtrl.object.type}} and the result is {"text":"cool option","enumm":"COOL"}. The very same like when pre selecting. I already work with the same "technique" using select inputs, and it works fine. I also found some google results saying "use $parent because of parent/child scope". But 1) I didn't get that straight and 2) think it is not the problem here, as I use a controllers scope and not the $scope, or is this thinking wrong?
It might be explained badly, sorry if so, but I hope someone 1) get's what I want and 2) knows a solution for it.
Thank you!
If you're trying to bind to elements from an array, I believe you need to assign the actual elements from the array to your model property.
So this creates a new obj and sets it to $scope.selectedType (not what you want):
$scope.selectedType = {"text":"cool option","enumm":"COOL"};
whereas this assigns the first element of the array (which is what you want)
$scope.selectedType = $scope.typeList[0];
So to change the model, you can lookup the entry from the array and assign it to your model with something like this
$scope.selectedType = $scope.typeList.filter(...)
Here's a quick example of this approach http://plnkr.co/edit/wvq8yH7WIj7rH2SBI8qF