Could someone tell me what my form data's string ends at the comma? I'm sending a form with react with a string with foo, bar but only foo is sent in the form data. This has nothing to do with the database as in the chrome dev tools, under network, I see only one value of the string. Here's a image of my actual views:
Only Wordpress, gets submitted. Noticed the ,?
Some code, in React (I'm using react-select):
<form action="/" method="post">
<Select ref="stateSelect" options={skillsOptions} simpleValue multi={this.state.multi} value={this.state.skillsSelectValue} name="skills" onChange={this.skillsUpdateValue} valueKey="value" labelKey="name" loadOptions={this.getContributors} />
</form>
skillsUpdateValue: function(newValueCnd) {
// var str = newValueCnd.split(',');
this.setState({
skillsSelectValue: newValueCnd
});
this.setState({
skills: newValueCnd
});
},
Am I missing something from the form? Using just Rails, all words great.
Edit:
Input options:
var skillsOptions = [
{ value: 'one', name: 'One' },
{ value: 'two', name: 'Two' }
];
Related
I'm having problems setting the initialValue of a FieldArray component in React Final Form. It works when I set it on the Form component, but not on the FieldArray. Please see below CodeSandbox examples:
On FieldArray:
https://codesandbox.io/s/react-final-form-field-arrays-vq9pz
On Form:
https://codesandbox.io/s/react-final-form-field-arrays-v90nn
I would prefer to have it set on the FieldArray, which seems like it should be possible if I look at the documentation here. Has anyone else come across this?
The implementation of initialValue was introduced in version 3.1.3.
Change the version of react-final-form-arrays to 3.1.3 in the sandbox.
You will also need to change the version of react-final-form to 6.5.2
You can define const customer = { firstName: "test", lastName: "test" }; and then use it in here:
<button type="button" onClick={() => push("customers", customer)}>
Add Customer
</button>
Here is CodeSandbox example https://codesandbox.io/s/react-final-form-field-arrays-vmmf3?fontsize=14.
Usually I will create a mutator like this:
<Form
mutators={{
...arrayMutators,
addCustomer: (_, state, { changeValue }) => {
changeValue(state, "customers", (v) => [
...v || [],
{ firstName: 'abc', lastName: 'efg' },
]);
},
}}
...
and change the Add Customer button onClick={() => form.mutators.addCustomer()}
I would like to use knockout-validation by only adding validation rules in HTML5, which works great:
http://jsfiddle.net/gt228dgm/1/
I would then like to change the default error messages generated by the browser (like "This field is required." or "Invalid"). This is pretty easily done in javascript code, But I believe this kind of texts should go into the HTML. Is that possible and how? I guess I'm looking for something like:
<input data-bind='value: firstName, validate: { message: "Please enter first name" }' required pattern="^[A-Za-z]{1,255}$"/></label>
I have implemented a custom knockout binding that solves my issue:
ko.bindingHandlers.validate = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var valueBinding = allBindings().value;
var value = valueAccessor();
if (value) {
valueBinding.extend(value);
}
}
};
The binding then looks like this
<input data-bind='value: firstName, validate: { required: { message: 'Full name is missing' }, pattern: { message: 'Full name should be max. 255 alphanumeric characters' } }' required pattern="^[A-Za-z]{1,255}$"/>
Any other suggestions?
I've been playing these days with knockout validation. For your need, you could use validationMessage binding. Here is an example of your code modified, to use this binding: http://jsfiddle.net/elbecita/gt228dgm/4/
Basically, you'd end up having something like:
<span data-bind="validationMessage: firstName, text: 'Your error.'"></span>
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />
I've added the valueUpdate binding just to have the validation message shown immediately. And then, in your javascript code, when you define the validation configuration, be sure to turn to false the insertMessages option. If not, you'll see the default message too.
But... I think is easier and cleaner to do this with the knockout extenders in javascript code, having all custom messages centralized in some sort of constants file, instead of having them scattered through the html.
Anyway, dig into the knockout validation bindings, they may help you with your needs. :)
Proper way to handle custom validation message in KO is to create a custom validation not binding.
Here is an example of simple number validation
ko.validation.rules['integerFormat'] = {
validator: function (value, options) {
if (!value) return true;
var regex = /^\d+$/;
var matches = regex.test(value);
if(matches){
value = parseInt(value,10);
return typeof value== "number" && isFinite(value) && value%1===0;
}else{
return false
}
},
message: app.MyCustomIntegerNotValidMSG
}
app.MyCustomIntegerNotValidMSG is just a variable holding your MSG
You would use this in your ViewModel like this
self.myIntegerToValidate = ko.observable().extend({
integerFormat:{}
});;
The Problem
I have a Rails 4 backed Ember app that needs to iterate over some children, and then iterate over that child's children. The setup is Session -> hasMany -> Annotations -> hasMany -> Indicators.
I can load the /session/1 show template and display the session's properties. I can also iterate over my session's annotations and display the annotation's text. However When I iterate over the annotation's indicators, nothing shows up. If I output {{#with annotation}}{{indicators}}{{/with}} I just get <DS.PromiseArray:ember802>
Ember makes AJAX calls to /sessions/1 and /annotations?ids%5B%5D=113&ids%5B%5D=112. However it never makes a call to /indicators.
I've seen other posts that describe the same issue, but the solutions for those often came down to camel casing etc. In this case, since /indicators is never even being called, what am I doing wrong?
Environment
ember.js - 1.5.1
ember-data.js - 1.0.0-beta.7
Written in CoffeeScript
Ember Setup
Insight.ApplicationAdapter = DS.ActiveModelAdapter.extend({})
Insight.ApplicationSerializer = DS.ActiveModelSerializer.extend({})
Models
App.Indicator = DS.Model.extend {
title: DS.attr 'string'
}
App.Annotation = DS.Model.extend {
text: DS.attr 'string'
session: DS.belongsTo 'session', inverse: 'annotations'
indicators: DS.hasMany 'indicator', async: true
}
App.Session = DS.Model.extend {
subject: DS.attr 'string'
students: DS.attr 'number'
time: DS.attr 'string'
annotations: DS.hasMany 'annotation', async: true
}
Routes
App.SessionRoute = Ember.Route.extend {
model: (params)->
return #store.find('session', params.session_id)`
Session Show Template (Relevant Portion)
<section class='content'>
{{#each annotation in annotations itemController="annotation"}}
{{#with annotation}}
<li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{edit-annotation class="edit" value=bufferedText focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
{{else}}
{{text}}
</div>
{{/if}}
{{#each indicator in indicators}}
<button>{{indicator.title}}</button>
{{/each}}
</li>
{{/with}}
{{/each}}
{{view Ember.TextField id="new-annotation" placeholder="Enter an annotation" valueBinding="newAnnotation" action="createAnnotation"}}
</section>
JSON GET Payloads
{"session":{
"id":4,
"subject":"Name of Subject",
"students":1,
"time":"08:52",
"annotations":[113,112]}
}
{"annotations":
[
{ "id":112,
"text":"this is my first annotation",
"session":4,
"indicators":[1]
},
{ "id":113,
"text":"This annotation has indicators",
"session":4,
"team_member":8,
"indicators":[1,2]
}
]
}
The problem lies in JSON format.
Format that you're using is the format that is accepted by the RESTAdapter
data: [
title: "Some Title",
items: [1,2]
]
ActiveModelAdapter however expects the data to be in this format:
data: [
title: "Some Title",
item_ids: [1,2]
]
To solve the problem you can either swap to RESTAdapter OR change the data producer to produce proper format instead.
JSBin with above code made working and
other question that reference the same issue.
So in my PhoneJS web app, I have a dxList widget, with checkboxes on each item. I want to be able to select multiple items, and then do something with them. I'm trying to bind the 'checked' binding to an observable, but I get an 'undefined' error.
Here's the code for the dxTemplate for the list
<div data-options="dxTemplate:{name:'item'}">
<span data-bind="text: $data.information"></span>
<div data-bind="dxCheckBox: { checked: check_boxes }"></div>
</div>
The problem is that check_boxes is in the viewModel, not the item array. I need to access values in the viewModel. I've tried viewModel.check_boxes, but with no success.
Here's the js code:
AppNamespace.otherView = function (params) {
var viewModel = {
my_list: [
{
key: 'Group 1',
items: [
{ information: 'Test 1' },
{ information: 'Test 2'},
{ information: 'Test 3' }
]
}
],
check_boxes: ko.observable(false),
//...etc
Has anyone had any experience with this, and is there a solution?
Thanks!
Knockout provides special properties to access parent binding contexts. In your case both $parent and $root should work.
More on this topic in Knockout docs: Binding context.
Hypothetical example to illustrate a problem I am having using angular-UI select2. Let's say I have a screen where I want to edit a "game" model. A game, among other things has players. I want to be able to set the players via a select2 drop down menu. Here's some example code:
app.js
$scope.getGamePromise().then(function(results) {
$scope.game = results;
console.log(game.players); //prints [{name:'Joe',age: 15},{name:'Sally',age:16}]
});
$scope.players = [
{
name: 'Joe',
age: 15
},
{
name: 'Fred',
age: 14
},
{
name: 'Sally',
age: 16
},
{
name: 'Lucy',
age: 13
}
]
view.html
<select ngModel="game.players" ui-select2 multiple>
<option ng-repeat="player in players" value="player">{{ player.name }}</option>
</select>
When I want to save this 'game' object, I send the game object up to the server. The server is expecting game.players to be an array of objects. However, what is being sent up is a string. I am moderately familiar with angular, and completely new to select2. How can I get my select2 to set game.players as an array of objects instead of strings?
I guess you find another solution or you don't have the problem anymore. Anyway I post it here:
Use
<input>
instead of
<select>
Example:
<input type="hidden" ui-select2="playersCfg" ng-model="players"/>
And following configuration:
$scope.playersCfg = {
multiple: true,
allowClear: true,
data: { results: Player.query(), text: 'name' },
formatResult: function(item) {
return "<div class='select2-user-result'>" + item.name + "</div>";
},
formatSelection: function(item) {
return item.name;
}
};
Player.query()
is a resource which returns a list of player containing a name (name) and an identifier (id)
Hope it would help somebody!