Grails - Select menu not rendering - html

So I am creating 2 drop down menus, the 2nd of which dynamically changes based off the first. However, the 2nd menu does not render the change, but is providing the correct options when viewing the Post with Firebug.
Here is the function that is supposed to render the menu
def findSubtagsForTags(){
print Tag.getAll()
def tag = Tag.get(params.tag.id)
render(template: 'subtagSelection', model: [subtags: tag.subtags])
}
This method is being called in my _form.gsp template, which is called by create.gsp (both generated by grails scaffolding for the most part). Here is my code snippet where I am calling it
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: '\'tag.id=\' + this.value',
update: 'subtagSelection'
)}" />
<td id="subtagSelection" valign="top">
<select>
<option>Choose Tag</option>
<g:select name="subtags.id" id="subtags.id" from="${[]}" optionKey="id"/>
</select>
</td>
and the subtagSelection template that is being rendered is
<g:select name="subtag.id" from="${subtags}" optionValue="name" optionKey="id" id = "subtags.id"/>
The 2nd menu on the page is always "CHoose Tag", but using Firebug, when I look at the post, this is generated
<select name="subtag.id" id="subtags.id" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
however, there is no change to the 2nd menu.
Under the Net Tab of firebug, This is the 'put' request called by my function
Post:
Parameters : tag.id 1
Source:
tag.id=1
Response:
<select name="subtagSelection" id="subtagSelection" >
<option value="1" >Training</option>
<option value="2" >Software</option>
</select>
Any ideas/solutions?
EDIT: Issue was resolved after changing my code around a little, using https://stackoverflow.com/a/3771240/3691484 as a reference, changing the template file among other things

Try a few modifications - see if makes any difference:
<g:select name="tag.id" from="${Tag.list()}" optionKey="id" optionValue="tagName"
noSelection="['':'Choose Tag']"
onchange="${remoteFunction (
controller: 'tag',
action: 'findSubtagsForTags',
params: "'tag.id=' + this.value",
update: 'subtagSelection'
)}"
/>
<td id="subtagSelection11" valign="top">
<div id="subtagSelection">
<g:select name="subtags.id" id="subtags.id" from="[]"
optionKey="id" noSelection="['': 'Choose Tag']" />
</div>
</td>
There was a minor issue a select within a select? - use the noSelection tag for when nothing is selected

Related

Display label displayed in options as the title of select

How to show option.Brand.Name as the title of the select field without using java script and changing the ng-model?
<select ng-model="detail.BrandId" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
AngularJS and select-options
Try using ng-options AngularJS ngOptions directive within select element itself. Then you don't need to add each option element yourself using ng-repeat.
Clarification
The title-attribute belongs to the select-element and will show if you hover over the select. You would like the title to reveal the current selected option? Did I understand you correctly?
How to show option.Brand.Name as the title of the select field
Curious, where this detail.ProductId comes from? Is the brand preselected by product-id (see your code)?
ng-selected="option.Id === detail.ProductId"
Solution space
Your requirements/restrictions are:
without using JavaScript (maybe because you can't change the sources)
without changing the ng-model (because you need there only the BrandId for some database-reasons)
So since the title of the select-element has no access to the options inside, the only way to set it is depending on the current selection, i.e. your detail.BrandId. So the title can only set dynamically (depending on the current selection) by using standard-angularJS means, as:
{{ expression }} expressions
{{ expression | filter }} array-filter
Expected behavior
The only scope-variable changed by selecting is specified within select's ng-model as detail.BrandId. This will be set when user selects an option to its property BrandId. When user selects between options they will be visible with ther BrandName as label. After selection this BrandName (label of the option) should be shown as title of the entire select element.
So we need to get from detail.BrandId (selected ng-model) to related options BrandName (as this should show as title).
Possible Solution
Only way is to use standard angular expressions/filters/array-indexing to get the whole option by the selected detail.BrandId (ng-model)
Then we can lookup the option.BrandName by this equation after selected detail.BrandId === option.BrandId
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
$scope.products = [
{Id: 0, name: 'Watson', brandId: 1, brandName:"IBM"},
{Id: 1, name: 'DB2', brandId: 1, brandName:"IBM"},
{Id: 2, name: 'Windows', brandId: 2, brandName: "Microsoft"},
{Id: 3, name: 'Office', brandId: 2, brandName: "Microsoft"}
];
$scope.detail = { ProductId: 3, BrandId: null };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body data-ng-app="app" data-ng-controller="mainCtrl">
<table border="1">
<tr>
<th>Product Id</th><th>Product Name</th><th>Choose Brand</th><th>Brand Id</th>
</tr>
<tr>
<td>{{detail.ProductId}}</td>
<td>{{ (products | filter: {Id: detail.ProductId})[0].name }}</td>
<td>
<select class="form-control"
ng-model="detail.BrandId"
ng-init="detail.BrandId = (products | filter: {Id: detail.ProductId})[0].brandId"
ng-options="o.brandId as ('['+ o.Id +'] '+ o.name +' : '+ o.brandName +' ('+ o.brandId +')') for o in products"
title="{{ (products | filter: {brandId: detail.BrandId})[0].brandName}}"
>
<!-- default option when not preset by detail.ProductId-->
<option value="">-- please choose brand --</option>
</select>
</td>
<td>{{detail.BrandId}}</td>
</tr>
</table>
<hr/>
<p>Product is predefined. So the brand is pre-selected by product. BUT: after brand is selected, the product-details do NOT change!</p>
Selected <strong>detail</strong>:
<pre ng-model="selected">{{detail | json}}</pre>
</body>
</html>
See also
For using ng-options, see also plunkr example.
You can register the selected option object in the ng-repeat parent scope by using as alias-expression provided by ng-repeat.
In your case you just need to do something like that:
<select ng-model="detail.BrandId"
title="{{options | selectedProductFilter : detail.ProductId}}"
class="form-control"
disabled>
<option ng-repeat="option in mainCtrl.products as options"
ng-selected="option.Id === detail.ProductId"
ng-value="option.BrandId">
{{option.Brand.Name}}
</option>
</select>
The options object will be available in your controller closure and you can display the title by using a custom filter.
angular.module("app").filter('selectedProductFilter',
function () {
return function (input, id) {
if (!input) return "";
let occurence = input.filter(function (x) {
return x.Id == id;
});
return occurence.length > 0 ? occurence[0].Brand.Name: "";
}
}
);
you need to do ng-change event in your select and call function in it that change the value of label text to the select value name. something like below
In Html
ng-change="changedValue(detail.BrandId)"
In JS
$scope.changedValue = function(item) {
//change label name here
}
fill ng-model by "option" not "option.BrandId"
then you can set title like this :
mainCtrl.products['ng-model-name'].Brand.Name
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", $scope => {
$scope.selectedOption = null;
$scope.optionList = [{_id: 1, label: 'Option 1'}, {_id: 2, label: 'Option 2'}];
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<select title="{{selectedOption.label}}" class="form-control" ng-model="selectedOption">
<option ng-repeat="option in optionList" ng-value="option"> {{option.label}}</option>
</select>
</div>
Try using ng-init,
add ng-init to your select tag and put your object index value you want to be selected by default.
e.g.
Your code
<select ng-model="detail.BrandId" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
adding following code (Suppose I want index 0 by index):
ng-init="detail.BrandId = option[0].Brand.Name"
It will look like this :
<select ng-model="detail.BrandId" ng-init="detail.BrandId = option[0].Brand.Name" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
or Check these thread's
how to use ng-option to set default value of select element
How to set default value in ng-options

Dynamically show previous/next div with XQuery - recursion?

knowing community,
I want to achieve the following in short: I have a XML-file with listed pizzas inside of it (it is a kind of test file). My page has a select menu from which a user choses one pizza and the pizza size, which is then both displayed below. The content will only show up after the user has chosen. This is the function:
declare function app:showpizza2($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
let $size1 := request:get-parameter('size1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $id := $pizza/#id
return
(<a data-key="{ $id }" class="person"><div>{ $pizza1 }</div></a>,
<div>{ $size1 }</div>)
};
With a second function I now want to build previous/next buttons which take the current shown pizza, find it inside of the XML tree and then go one step further up or down. So far I am able to show one pizza above or below with these lines:
declare function app:previousPizza($node as node(), $model as map(*)){
let $pizza1 := request:get-parameter('selectMenu1', '')
return
for $pizza in $app:pizza//pizza
where $pizza/#id eq $pizza1
let $previousPizza := $pizza/preceding::pizza[1]
return
<p>{ $previousPizza }</p>
};
The problem of course is that as a "current pizza parameter" I only take the user-chosen value from the select menu. So I guess this is a typical recursion problem because I want to have a function which always takes the current parameter after clicking on a button but I kind of really have no idea how to achieve this. Can you help out?
This is my html-file where I call these functions:
<div class="row">
<div class="col-sm-4">
<!-- form for choosing pizza -->
<form action="?">
<!-- select Pizza type -->
<select name="selectMenu1" id="pizzamenu1"
data-placeholder="Pizza wählen" style="width:150px">
<option value=""></option>
<option value="pizza1">Pizza 1</option>
<option value="pizza2">Pizza 2</option>
<option value="pizza3">Pizza 3</option>
</select>
<!-- select pizza size -->
<select name="size1" data-placeholder="Größe wählen"
style="width:150px;" onchange="this.form.submit()">
<option value=""></option>
<option value="family">Familien Pizza</option>
<option value="medium">Mittel Pizza</option>
<option value="small">Kleine Pizza</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<!-- showpizza2 returns chosen pizza from select menu -->
<div data-template="app:showpizza2"/>
<!-- Show previous pizza -->
<div data-template="app:previousPizza"/>
</div>
</div>
Thanks.
Since the value of the user-selected pizza comes from the html list, it is in $model. Your Xquery function for the next/prev buttons should access the $model to start where you want to.
We would need to see how you call the xquery modules in your .html files, to give you a working code sample. But the problems you describe are likely originating there.
See the documentation for Using the Model to Keep Application Data

ng-selected not working on option element with ng-repeat

I am using a select combobox with dynamic values from an OData response. Beccause of this I need to identify the 'highest' existing period in my response and set the selectedattribute for the relevant option item.
This selectis used as a period filter. That's why I also added an entry for 'all' periods. This can be removed in the sample and makes no difference in the behaviour.
Angular seems to evaluate the conditions etc. correct, so the element which should be selected gets the attribute selected="selected" and ng-select="true".
Nevertheless the browser selects '' by default rather than the selected element. Even if I remove the option for all periods, the browser takes the 'empty' element and not the element with the selectedattribute.
I checked other answer so similiar questions, but none of them worked and many reference ng-options instead of ng-repeat.
More information
I am using AngularJS v1.4.9 and Chrome 48.0.2564.103 m
I am using a rather large OData response in JSON format as data source, so I'd need to rewrite the code here to provide an executable example.
I'll do this if it's necesary or required.
For other reasons, which I don't want to discuss here I cannot use ng-options, so please don't suggest this.
HTML snippet - commented and indented afterwards
The other logic for sorting, ordering etc. is working fine.
<select class="semester-selection" ng-model="selectedPeriod.Period_Nav.PeriodName">
<!-- This 'empty' option can be removed. ng-selected won't work then either -->
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'"
value="{{examResult.Period_Nav.PeriodName}}">
<!-- Debug information -->
{{examResult.Period_Nav.PeriodName}}
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
</option>
</select>
Generated HTML via Angular JS
The generated code looks okay, because selected="selected" and ng-select="true" as in there for the desired element.
<select class="semester-selection ng-pristine ng-valid ng-touched"
ng-model="selectedPeriod.Period_Nav.PeriodName">
<option value=""><Alle></option>
<!-- ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option selected="selected" ng-selected="true" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="WiSe 2011/12" class="ng-binding ng-scope">
WiSe 2011/12
true
15014000
</option>
<!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option ng-selected="false" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="SoSe 2007" class="ng-binding ng-scope">
SoSe 2007
false
15014000
</option><!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
</select>
Result in the browser
When I open the page in the browser the combobox has still not the selected value as active, but the first or empty one.
Reduced sample for testing / fiddling around
Oh. This reduced sample works, so I need to find the issue somewhere else in the code.
var app = angular.module('ExamResultList', [ ]);
app.controller('ExamResultController', ['$scope', function ($scope) {
// Simplified sample data -> this can contain 'duplicates'
$scope.examResultData = [
{PeriodName:'WiSe 15/16', Period:8}, // fake OData OrderBy -> Highest period is the first elem
{PeriodName:'SoSe 12', Period:1},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'SoSe 13', Period:3},
{PeriodName:'WiSe 13/14', Period:4},
{PeriodName:'SoSe 14', Period:5},
{PeriodName:'WiSe 14/15', Period:6},
{PeriodName:'SoSe 15', Period:7}
];
$scope.highestPeriod = 0;
$scope.getHighestPeriod = function() {
// first element has the highest period, because the OData request has a orderby expression
return $scope.examResultData[0].Period;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExamResultList" id="examResultListWrapper">
<div ng-controller="ExamResultController as ExamResCtrl" id="examResultList">
<select class="semester-selection">
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData"
value="{{examResult.PeriodName}}">
{{examResult.PeriodName}}
<!-- Debug info
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
-->
</option>
</select>
</div>
</div>
ng-selected does not take expression brackets. Use
ng-selected="examResult.Period == getHighestPeriod()"

Using Div and Hide option in simple html

I'm using html. I have to display a set of questions in a form when an option is selected from a drop down.
I already have a working script. Wen I duplicated it and edited it for my requirements its not working.
var selVal = ele.options[ele.selectedIndex].value;
for example given below is the list from the dropdown. When option 1 is selected it should display a set of questions and when option 2 is selected it should display a diff set of questions.
<div id='q1'>
<b> Where is the caller from ? </b>
<select id="category" onChange="selDivision(this)">
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<br />
All the form contents are displayed instead of my requirements.
First should display only the dropdown,once selected an option the question set has to be display below.
I using simple js scripts for use as backend.
Requiring further assistance on this.
part of code that is for the hide and display function
$(document).ready(function(){
//init();
//$("#q1b").hide();
$("#1q").hide();
$("#2q").hide();
$("#3q").hide();
$("#4q").hide();
$("#5q").hide();
$("#6q").hide();
$("#7q").hide();
$("#8q").hide();
$("#9q").hide();
$("#10q").hide();
$("#1a").hide();$("#1b").hide();$("#1c").hide();$("#1d").hide();$("#1e").hide();$("#1f").hide();$("#1g").hide();
$("#2a").hide();$("#2b").hide();$("#2c").hide();$("#2d").hide();$("#2e").hide();$("#2f").hide();$("#2g").hide();
setDisabled('q1',false);
setDisabled('1q',false);
setDisabled('2q',false);
setDisabled('3q',false);
setDisabled('4q',false);
setDisabled('5q',false);
setDisabled('6q',false);
setDisabled('7q',false);
setDisabled('8q',false);
setDisabled('9q',false);
setDisabled('10q',false);
clear_form_elements(document.getElementById('test'));
});
function selDivision(ele)
{
var selVal = ele.options[ele.selectedIndex].value;
if(selVal == "1")
{
$('#1q').show(); setDisabled('q1',true);
$("#1a").show();$("#1b").show();$("#1c").show();$("#1d").show();$("#1e").show();$("#1f").show();$("#1g").show();
}
if(selVal == "2" )
{
$('#2q').show(); setDisabled('q1',true);
$("#2a").show();$("#2b").show();$("#2c").show();$("#2d").show();$("#2e").show();$("#2f").show();$("#2g").show();$("#2h").show();$("#2i").show();
}
Val=selVal;
}
</script>
</head>
q1 q2 are the questions fro drop down
The other variables are the questions under the option.
Try like this
<div id='questions' style="display:none">
<div id='q1' style="display:none">
<b> Question 1? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
<div id='q2' style="display:none">
<b> Question 2 ? </b>
<b> a. ans1</b>
<b> b. ans2</b>
<b> c. ans3</b>
</div>
</div>
<select id="category">
<option value="0">-select-</option>
<option value="1">Store</option>
<option value="2" >Office</option>
</select>
<br />
<script>
$('#category').on("change",function() {
//Hide all Questions in first time
$('#questions div').hide();
//get selected value
var id=$('#category').val();
//display
$('#questions').show();
$('#q'+id).show();
});
</script>
Here working example http://jsfiddle.net/d1udL1cr/

Making an image appear in a jsp

I currently have a jsp where in m html section I have the following
<select>
<%if(size == 1)%>
<option>None selected</option>
<%if(size > 1)%>
<option>1</option>
</select>
I also have the following image.
<td style="text-align:left">
<label id="checked" style="color:grey; display:none">
<img src="images/check.png" width="20px" height="20px"/>
Checked
</label>
</td>
My question is that how do I get my image to appear only if the option none is selcted. If 1 is selected then I do not want the image to appear. How would I do this?
I think, this will give you solution for your problem, i have used JQUERY here.
$("#selectID or .selectClass").change(function () { //just use id or class name for select element
var option=$(this).val();
if(option=="None selected")
{
$("#checked").css("display","block");
}
else
{
$("#checked").css("display","none");
}
});