This is HTML:
<div class="form-group">
<label for="client" class="control-label">Select the Client:</label>
<select id="client" class="selectpicker" data-bind="optionsText: 'name', selectPickerOptions: {optionsArray: availableClients}"></select>
</div>
and this is my Javascript code:
self.availableClients = ko.computed(function() {
var clientItem = new Client();
clientItem.name("Some Name");
return [clientItem];
});
Although i have defined the availableClients , i get an error - Unable to parse bindings - unable to find availableClients .
It seems pretty forward yet doesn't seem to work. Thanks!
The binding selectPickerOptions is not valid unless you are using custom bindings, in that case you need to give us more information like some portion of your custom binding otherwise in knockoutjs documentation, the binding options do what I think you want to achieve, so your select element would be like:
<select id="client" class="selectpicker" data-bind="optionsText: 'name', options: availableClients"></select>
And that should work.
Related
I've only been using javascript / jquery and meteor for a couple of weeks now, so forgive me for asking what will be a simple question.
I'm trying to use Select2 in my Meteor.js app, and can't figure out how to get it working. I have installed natestrauser:select2 in my project and my jsfiddle shown just won't work. https://jsfiddle.net/jt0jr9uk
Template.createjob.onCreated( function() {
$("clientlist").select2({
placeholder: "Select a client",
allowClear: false,
});
});
And html:
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<select id="clientList" class="form-control">
<option value=""></option>
<option value="aberfitch">Abercrombie & Fitch</option>
<option value="bent">Bentley</option>
<option value="barb">Barbour</option>
<option value="dcsh">DC Shoes</option>
<option value="echo">ECHO United</option>
</select>
I'm using bootstrap also. Which I've added to my project. And basically I just want the single select box as shown here https://select2.github.io/examples.html#single
Should I be using any imports, or anything?
So first of all, on js level you tried to select an id, named clientlist
Template.createjob.onCreated( function() {
$("clientlist").select2({....
However, on html level, your id is defined in camelCase
<select id="clientList" class="form-control">
Second of all, when you select an id, you should use # sign before the id, what I mean is your jquery should look like this to achive the desired result:
Template.createjob.onCreated( function() {
$("#clientList").select2({
placeholder: "Select a client",
allowClear: false,
});
});
You need to import jquery on top of the document if you use meteor >1.3 as
import { $ } from 'meteor/jquery';
As a final suggestion, I would use Template.createjob.onRendered() instead for Template.createjob.onCreated()
The template rendered callback is fired after the DOM is rendered on
screen. The created callback is fired when the Template is
instantiated but not yet rendered
Check the following link for the full explanation https://stackoverflow.com/a/28783762/7235661
I'm trying this Marionette Forms library on Github. Seems like some people might be using it but I'm having no luck.
I'm loading it with require.js and it seems to load. If I create a FormView with no schema it complains properly that schema is empty so it's getting as far as parsing the view. When I add one item to the schema the error in the post title occurs no matter what I call my form or form field. Not sure what I'm doing wrong here:
<form id="formCreate" method="post" action="http://pathtomypostaction" enctype="application/x-www-form-urlencoded">
<div class="row air">
<div class="col-sm-3 text-right formlabel">Name</div>
<div class="col-sm-7">
<input type="text" class="form-control" id="form-name">
</div>
</div>
</form>
var EditView = Backbone.Marionette.FormView.extend({
el: '#formCreate',
schema: {
name: {
ui: '#form-name',
event: 'input',
type: 'text'
}
}
});
editView = new EditView();
editLayoutView.getRegion('SettingsRegion').show(editView);
UPDATE: I think I might just be using this wrong. I'm used to providing templates to Marionette views. This thing doesn't appear to work that way. The forms in the examples are not templates (no script tags). I'm confused as to how this is used. If my form is not in the DOM but in a template, can this thing handle that?
I'm new to AngularJS and JavaScript. I've come up with a way to build a multi-select list, which is working. The ng-model associated with the dropdown is part of a "user" DTO object, specifically a member which contains an array of "groups" the user can belong to. The "master list" of possible groups are read from a database table using a webservice, put in an array and this is what's used to build the dropdown when the page is displayed.
Those elements in the list that are included in the "groups" field of the user object are displayed below the dropdown in a "preview" field. That's all working - if a user has two selected groups, they come up in that pre-field when the page is populated... but I don't understand why these groups are not highlighted in the dropdown. Sometimes they are...like sometimes when I refresh the page, but most of the time when the page is displayed and populated from the user information, these groups contained in the user are not highlighted in the dropdown.
Here's how the code is set up (again, I'm new to AngularJS/JavaScript and webservices so bear with me).
The HTML code is like this:
<div class="form-group">
<label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
<div class="col-sm-10">
<select name="userGroups" id="userGroups" ng-model="user.userGroups" multiple style="width: 300px;">
<option ng-repeat="group in approverGroups" value="{{group.name}}" selected >{{group.name}}</option>
</select>
<pre>{{user.userGroups.toString()}}</pre>
</div>
</div>
The JavaScript side looks like this. The "get" is used to read all possible groups from a table, and that populates the dropdown:
$http({
method : 'GET',
url : '/pkgAART/rs/ApproverGroupService/approvergroups',
data : {
applicationId : 3
}
}).success(function(result) {
// Create an array from the groups for use
// in the multi-select UI component for groups
var arr = [];
for (var i = 0; i < result.approvergroup.length; i++) {
var id = result.approvergroup[i].approverGroupId;
var value = result.approvergroup[i].name;
var pair = {id : id, name : value };
arr.push(pair);
}
$scope.approverGroups = arr;
});
Here's a screenshot of the page. This is how it looks:
So again, it works, and "SOMETIMES" when I pull up the page, the items listed in the lower <pre> box are actually highlighted in the dropdown, but not often. I don't understand how to ensure they come up highlighted. In the picture I manually clicked these elements. But if I refresh the page, sometimes they are and sometimes they are not.
I think I figured it out. Per Peter's suggestion I changed to ng-options for the dropdown, but modified the array that I use as my options to just use the name string. Here's the HTML
<div class="form-group">
<label for="Groups" class="col-sm-2 control-label">Group Memberships: </label>
<div class="col-sm-10">
<select name="userGroups"
id="userGroups"
ng-model="user.userGroups"
multiple="true"
style="width: 300px;"
ng-options="group for group in approverGroups">
</select>
<pre>{{user.userGroups.toString()}}</pre>
</div>
</div>
and the js file that builds up the array of strings looks like this:
$http({
method : 'GET',
url : '/pkgAART/rs/ApproverGroupService/approvergroups',
data : {
applicationId : 3
}
}).success(function(result) {
// create an array from the groups for use
// in the multi-select UI component for groups
var arr = [];
for (var i = 0; i < result.approvergroup.length; i++) {
var value = result.approvergroup[i].name;
arr.push(value);
}
$scope.approverGroups = arr;
});
It's now showing the multi-select list's items as selected if they are contained in "user.userGroups"
Mark
I think I figured it out.
First off, you should use ng-options in the select instead of ng-repeat on <option>. This makes it so the options are bound to the model of the select.
Check out this fiddle: http://jsfiddle.net/mcxqjngm/3/
Here is the relevant select html:
<select
name="userGroups"
id="userGroups"
ng-model="user.userGroups"
multiple="true"
style="width: 300px;"
ng-options="group.name for group in approverGroups track by group.id">
</select>
The button mimics an ajax call. I gotta run, but I can answer questions in a bit.
I have a app written in C# .NET using WebApi and AngularJS.
At some points in my aplication I fill up a select tag with options using ENUMS, because since the values are not in the database I don't feel like need to create a service that return the enums because I'm using razor pages so I can use the enums directly.
Everything was working fine until I updated the angular version to 1.4.7, Than this stop working, and I can't downgrade the angular version (for some enterprise reasons).
For example, I have this code
<div class="col-md-3 col-xs-12">
<label for="qualificacaoCobreJunta" class="col-xs-12 control-label">#IsiCTB.Internationalization.Res.Controls.label_cobre_junta<span class="obrigatorio">*</span></label>
<div class="col-xs-12">
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta"
required>
<option value="" id="cobrejunta-0">#IsiCTB.Internationalization.Res.Controls.label_prompt_selecione</option>
<option id="optCobreJuntaCom" value="#IsiCTB.Entities.Enums.ComSem.Com.ToInt()">#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()</option>
<option id="optCobreJuntaSem" value="#IsiCTB.Entities.Enums.ComSem.Sem.ToInt()">#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()</option>
<option id="optCobreJuntaAmbos" value="#IsiCTB.Entities.Enums.ComSem.Ambos.ToInt()">#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()</option>
<option id="optCobreJuntaNA" value="#IsiCTB.Entities.Enums.ComSem.NA.ToInt()">#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()</option>
</select>
<div ng-show="formQualificacaoSubmitted" class="error-form-validation">
<div ng-show="gerenciaQualificacoesSoldador.qualificacaoCobreJunta.$error.required">#IsiCTB.Internationalization.Res.Controls.label_obrigatorio</div>
</div>
</div>
</div>
Code getting data from WebApi.
QualificacaoService.get({ id: idQualificacao }, function (data) {
$scope.qualificacao = data;
});
And that return a JSON object with a bunch of attributes, like that:
{
id: 1,
cobrejunta: 2,
anotherEnumField: 1,
anotherEnumField2: 5,
anotherEnumField3: 2
....
}
If I have like qualificacao.cobrejunta = "2" (string) setting in the model, the select is pointing to right option, but if I have qualificacao.cobrejunta = 2 (integer) than nothing seems to work.
There's anyway to get this working again, or the only (best) solution is crete a service that will request a API, and this API will build the array and than return that for using ng-option?
Thank you guys.
This is discussed here.
All you have to do is to change your select as below
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta" required
ng-options="entry.value as entry.label for entry in [{value : #IsiCTB.Entities.Enums.ComSem.Com.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Sem.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Ambos.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()'}, {value:#IsiCTB.Entities.Enums.ComSem.NA.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()'}]">
</select>
I think Angular behaviour has changed with the version 1.4.8. I had the same problem: I had a list of values into a combo (static values), and I assigned dynamically the value to select throught the controller. It wasn't a problem with version 1.3.8, but it's with 1.4.8 when the selected value remains blank. But I can show the value in the view, and it's correct.
The way to solve this for me was to translate that static values, to an object containing that values, and defining it al the begin of the controller (before assigning the value). It's strange to have to do it, but I didn't find another way to success.
I am using knockout for binding in my html5 application.
I have one strange scenario.
One div i am binding using for loop like below
<div data-bind="foreach: oneList">
<select name="dropDown1" id="dropDown1" data-bind="options: ddList,optionsText: function(item) { return item.value;},optionsValue:function(item) { return item.key; }">
</select>
<input type="text" id="newValue" data-bind="value : oneValue"/>
</div>
Here oneList is diffent varriable and ddList is a diffent varriable,both are independent varriable.
So when actual binding happens drop down does not get binded but input text is binded because oneList.oneValue is valid but oneList.ddList is not valid
Please let me know if my question is not clear
Without seeing your view-model it is quite hard to tell, but most probably there is no ddList property defined on items in the oneList list.
Inside a foreach binding the current binding context refers to the current item from the list so if you need to "go up" in the binding context to access a property which is on the same level as your onlist then you need to use $parent (or $root to access your main view-model).
A fixed options binding would look like this:
<select data-bind="options: $parent.ddList, optionsText:... " >