I am using Ractive and have two select lists. The first select list lets the user select their country. If they select "US", Ractive will check for it and display a list of states for the user to select their state. For example:
<select value="{{country}}">
<option value="CA">Canada</option>
<option value="US">USA</option>
</select>
{{#if country == 'US'}}
<select value="{{chosen_state}}">
{{#states}}
<option value="{{this.state_name}}">{{this.state_name}}</option>
{{/}}
</select>
{{/if}}
When this form first loads "Canada" is selected by default. Once the user selects "US", the states list shows up just fine. However, if I try to check the value of "chosen_state", it is set to empty rather than the first state in the states list. After I manually change the state, then and only then does the "chosen_state" value show as a state value.
Do I have to wait for the change event to be triggered by a manual event, or is there some way to make it so that as soon as the states list is rendered, it will update it's value automatically based on the first state displayed? It would be nice to not have to trigger a change event for every select list when it's rendered.
It turns out that this requires a dirty check using updateModel. I made it so if the select field is changed, it triggers an event that calls updateModel on the instance to dirty check the chosen_state field.
Updated selected code:
<select value="{{country}}" on-change="countrychange">
<option value="CA">Canada</option>
<option value="US">USA</option>
</select>
{{#if country == 'US'}}
<select value="{{chosen_state}}">
{{#states}}
<option value="{{this.state_name}}">{{this.state_name}}</option>
{{/}}
</select>
{{/if}}
And in ractive:
ractive.on('countrychange', function(event) {
this.updateModel();
});
Alternate solutions might include observing the model for updates to the country then running this.updateModel() as well as just running updateModel on the required keypath which is more efficient.
Further documentation on this can be found at:
http://docs.ractivejs.org/latest/ractive-updatemodel
Related
I have a webpage where this code is:
<select tabindex="8" id="custom_field_4" name="custom_field_4[]" size="4" multiple="multiple" xpath="1">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green" selected="selected"> green</option>
<option value="flashing" selected="selected"> flashing</option>
</select>
I need to get all the option values.
I tried
Get List Items //select[#name="custom_field_4[]"] but I get the error: List with locator \'//select[#name="custom_field_4[]/option"]\' not found.'
If you check the source code (line 333) of the Selenium library, you can see that the Get List Items keyword use list as tag name whereas in your DOM it is select. It won't match.
def _get_select_list(self, locator):
el = self.find_element(locator, tag='list')
return Select(el)
You can get all list elements using the Get WebElements keyword instead like:
${list elements}= Get WebElements //select[#id='custom_field_4']/option
You can access the value attribute of each element in the returned list.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I'm trying to using thymeleaf as the view template and i come across one problem. the code I have now is as below.
<select>
<option th:each="res: ${result1}"
th:value="${result1.NAME}"
th:text="${result1.NAME}"></option>
</select>
What I need is like this, where I dont know how to add another attribute for result2, both result1 and result2 are the list object in the controller
<select>
<option th:each="res: ${result1}"
th:value="${res.NAME}"
th:text="${res.NAME+result2.SCHOOL}"></option>
</select>
You can create a simple object with two fields for result1 and result2, if you know their relationship in the controller. Then you can use a list of that objects to iterate in html page.
<select>
<option th:each="item: ${itemList}"
th:value="${item.result1.NAME}"
th:text="${item.result1.NAME + item.result2.SCHOOL}"></option>
</select>
How would I get in my controller, the text part of Request.Form["StandID"]
<div class="editor-field">
<select id="StandID" name="StandID">
<option value=""/>
<option value="3">Mark</option>
<option value="5" Selected>Brian</option>
<option value="6">Ian</option>
<option value="7">Vin</option>
</select>
</div>
So in my controller, Request.Form["StandID"] = 5
Is it possible to retrieve the text (I know this isn't posted as part of the form - is there a way to do that)?
So I could like to return "Brian" - as well as the ID of 5?
Thank you,
Mark
No. HTML will only post the value to the controller. However, you could make your value be something like "5 - Brian" and then have your text be "Brian". Then you would have to parse the value to get the real value from it.
as an alternative you could use hidden input field to store your text value. The downside is you have to place your value into this hidden field with javascript (on selected change or on form submit), but pros is you will have separated field for value, so you don't have to parse it on server side and you can avoid possible problems with naming.
I'm having problems trying to make a reactive form. When I insert data into one collection, the other select is refreshed also. This happens with input fields also, everything gets cleared when I update one of the bound collections.
Is this supposed to happen?
My test code:
<template name="test">
<form class="form-horizontal well" id="test-form">
<select class="input-xlarge" name="item_id">
{{#each types}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
</select>
<select class="input-xlarge" name="category_id">
{{#each categories}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
</select>
</form>
</template>
And my helpers are:
Template.accounts.type = ->
Types.find({}).fetch()
Template.accounts.categories = ->
Categories.find({}).fetch()
I think this is a limitation of Meteor right now, hopefully it'll be resolved in the future.
As discussed on irc, some ways to get around it:
Separate them into different templates
Wrap them in a helper that calls Meteor.ui.chunk.
Use a session variable to track the currently selected state. For example:
Template.accounts.events = {
'change #category_id': function() {
Session.set('selected_category_id', $(this).val());
}
}
(and code to initially select the value in Session.get('selected_category_id') if not undefined in the template).