I'm using https://drew.tenderapp.com/faqs/autosuggest-jquery-plugin/options-api to render an autocomplete field:
<h1>Quick Tags</h1>
<div class="fieldset">
{{ vocabularies.vocabulary_1.errors }}
<p>{{ vocabularies.vocabulary_1 }}</p>
<script type="text/javascript">
////http://code.drewwilson.com/entry/autosuggest-jquery-plugin
$("input#id_vocabulary_1").autoSuggest("/staff/taxonomy/ajax", {selectedItemProp: "name", selectedValuesProp: "name", searchObjProps: "name", startText: "Enter terms.", keyDelay: 50, minChars: 1, queryParam: "term", asHtmlID: "vocabulary_1", extraParams: "&app=taxonomy&model=TaxonomyData&vocabulary=1"});
</script>
</div>
Which renders a hidden field:
<li class="as-original" id="as-original-vocabulary_1">
<input id="vocabulary_1" type="text" name="vocabulary_1" maxlength="200" autocomplete="off" class="as-input">
<input type="hidden" class="as-values" name="as_values_vocabulary_1" id="as-values-vocabulary_1" value="test,new term,">
</li>
However, the values from this field are not present in the POST dictionary. What could be causing this problem?
I found out the problem; if the div that contains the form opening tag is closed, all fields after that are not contained in the POST dictionary.
Related
I have a dynamically created checkbox list and I'm having trouble to check the some trues according to a pre-defined list.
HTML:
<div class="row">
<div class="example-container col-md-6">
<div *ngFor="let atribuicao of atribuicoesOcorrencia" formArraylName="inputAtribuicaoOcorrencia">
<mat-checkbox [value]="atribuicao.id" (change)="onChange(atribuicao, $event)">
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
</div>
</div>
</div>
CLASS TS:
I try populate formControl name inputAtribuicaoOcorrencia in a list, in this case
the only one checekd was id 3, but nothing happens
this.atribuicoesOcorrencia.forEach(listAtibuicoes=> {
ocorrencia.atribuicoesDTO.forEach(x => {
if(listAtibuicoes.id == x.id){
this.formCadastro.get('inputAtribuicaoOcorrencia').setValue('checked');
}
});
});
CLASS TS2:
Or the code bellow for one ID checked only
this.formCadastro.patchValue({
inputAtribuicaoOcorrencia: 'checked',
});
You need to use the [checked] attribute for the mat-checkbox
// example
<mat-checkbox
[value]="atribuicao.id"
[checked]="atribuicao.id" // This is what you need to add. If id is there, it will get checked
(change)="onChange(atribuicao, $event)"
>
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
I am new to Vue.js.
I am making a comment and reply system.
Creating and Deleting a comment and reply are working fine.
I want to edit a comment. Editing without a retrieving a current comment is working fine.
Only problem is I don't know how to retrieve a current comment on edit field.
I think I need to insert {{ comment.cotent }} into somewhere in textarea or insert getComment method on editComment method but I don't know how to do it.
I am using Laravel and Vue.js 2 and Vue-resource.
<!-- This is a text area for write a comment. This works fine. -->
<div class="" v-if="$root.user.authenticated">
<textarea placeholder="Write a comment here!" class="form-control" v-model="content"></textarea>
<div class="pull-right">
<button type="submit" class="btn btn-default" #click.prevent="createComment">Save</button>
</div>
</div>
<!-- Showing comments. This works fine. -->
<li class="media" v-for="comment in comments">
<p>{{ comment.content }}</p>
</li>
<!-- Editing a comment without retrieving a current comment. This works fine but I want to retrieve a current comment!!!! -->
<div class="" v-if="commentEditFormVisible === comment.id">
<textarea class="form-control comment__input" v-model="commentEditBody"></textarea>
<div class="pull-right">
<button type="submit" class="btn btn-default" #click.prevent="editComment(comment.id)">Edit</button>
</div>
</div>
<!-- script -->
data() {
return {
comments: [],
content: null,
replyBody: null,
replyFormVisible: null,
commentEditBody: null,
commentEditFormVisible: null,
}
},
getComments() {
this.$http.get('/blog/' + this.blogslug + '/comments').then((response) => {
this.comments = response.body.data;
});
},
editComment(commentId) {
this.$http.put('/blog/' + this.blogslug + '/comments/' + commentId, {
content: this.commentEditBody
}).then((response) => {
this.content = null;
});
},
I am using vuejs v.2, In my data structure I have products and keywords
they have many-to-many relationship. To attach keywords to product I have list of keyword's checkbox and when user submit only checked keyword should be attach to product
<div class="col-md-6" v-for="keyword in keywords">
<div class="checkbox">
<label>
<input type="checkbox" />
{{ keyword.name }}
</label>
</div>
</div>
Here I can not bind keyword.id as value (v-bind:value).
I just want to submit checked keyword ids to server
Please show me the correct way
I think the mistake you might be doing is not using v-model with an array data variable, following is working code:
vue component:
var demo = new Vue({
el: '#demo',
data: function(){
return {
keywords: [
{name: 'key1', id: 1 },
{name: 'key2', id: 2 },
{name: 'key3', id: 3 }
],
checked: []
};
}
})
and in HTML:
<div id="demo">
<div class="checkbox">
<label v-for="keyword in keywords">
<input type="checkbox" :id="keyword.name" v-bind:value="keyword.id" v-model="checked"/>
{{ keyword.name }}
<br>
</label>
<br>
checked value: {{checked}}
</div>
</div>
Working fiddle here
In this example I'm nesting radio buttons inside checkboxes:
html:
<div ng-app ng-controller="Controller">
<div name="myForm">
<ul>
<li ng-repeat="item in items">
<label>
<input type="checkbox" ng-model='item.selected' />{{item.name}}</label>
<ul>
<li ng-repeat="format in item.formats">
<label>
<input type="radio" ng-model='format.selected' name='what name ?'/>{{format.title}}</label>
</li>
</ul>
</li>
</ul>
</div>
<button ng-click='onClick()'>Go</button>
</div>
js:
function Controller($scope) {
$scope.items = [{
name: 'cb1',
selected:false,
formats: [{
title: 'rb1a',
selected: false
}, {
title: 'rb1b ',
selected: false
}]
}, {
name: 'cb2 ',
selected:false,
formats: [{
title: 'rb2a ',
selected: false
}, {
title: 'rb2b',
selected: false
}]
}];
$scope.onClick = function () {
console.log('clicked');
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].selected) {
console.log('Controller item selected', $scope.items[i]);
}
for (var j = 0; j < $scope.items[i].formats.length; j++) {
if ($scope.items[i].formats[j].selected)
console.log('Controller format selected', $scope.items[i].formats[j]);
}
}
};
};
I have two questions:
when I select an rb in one group the selected rb in the other group gets unselected. So they are not groups yet. How can I make real groups? I thought by using the name directive, but how?
when I click the Go button I'd like to have set the selected properties in $scope.items correctly, both for checkboxes and radio buttons.
I tried a lot already, that's why I'm now just providing stripped down code.
http://jsfiddle.net/JeffW/crn1t7wy/
1) You need to set the name to be unique for each group of radio buttons. You can do it with the $index argument angular provides with ng-repeat.
2) You misplaced single quotes and this is why it doesn't work. HTML accepts only double quotes or single quotes as attribute values but not mixed.
<div ng-app ng-controller="Controller">
<div name="myForm">
<ul>
<li ng-repeat="item in items">
<label>
<input type="checkbox" ng-model='item.selected' />{{item.name}}</label>
<ul>
<li ng-repeat="format in item.formats">
<label>
<input type="radio" ng-value="format.title" ng-model="item.selectedRadio" name="myName{{$parent.$index}}"/>{{format.title}}</label>
</li>
</ul>
</li>
</ul>
</div>
<button ng-click='onClick()'>Go</button>
</div>
Fixed version is here:
http://jsfiddle.net/crn1t7wy/3/
EDIT: Fixed the answer based on the comments
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums