Accessing Map values in gsp page Grails using variables as key - grails

I am trying to create multiple divs on the fly using a template which is called for a number of times and each time i create a new div ... which seems to be working fine below is the code. I am passing a map tempMap from the controller to the gsp page which is of the below format
tempMap = [key_1:v1,key_2:v2,key_3:v3] //from the controller
//this is the gsp part
<g:set var="counter" value="${1}" />
<g:while test="${counter <= tempMap.counter}">
<g:render template="travelDetailsToShow" />
<g:set var="counter" value="${counter + 1}" />
</g:while>
I need to set the ids of the elements based on the counter which also is working ... But i am unable to set the values of the fields.
<div class="col-sm-6" id="key_${counter}"> // This sets the id to key_1, key_2 depending on the counter value
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<g:set var="temp" value="kep_${counter}" />
**<input type="text" name="key_${counter}" class="form-control" value="${tempMap?.key_${counter}}" readonly></input> // this does not work**
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
I searched a lot but with no luck ... can anyone tell me where am i going wrong with this .. Any help is appreciated ... Thanks in advance people

The render tag has a model attribute. It works like the model passed from controller to view. You can use it to pass data into the template.
view
<g:each in="${1..tempMap.counter}" var="counter">
<g:set var="key" value="key_${counter}">
<g:render template="travelDetailsToShow" model="${[id: key, value: tempMap[key]]}"/>
</g:each>
template
<div class="col-sm-6" id="${id}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<input type="text" name="${id}" class="form-control" value="${value}" readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>

Thanks Emmanuel for your answer ... but i think i wasnt clear enough and misled you to think that the "key" would be static ... As your logic would expect the static value "key" ..... The proper structure of the map is below ...
tempMap = [key_1:v1,anotherkey_1:v2,yetanotherkey_1:v3,key_2:v4,anotherkey_2:v5,yetanotherkey_2:v6]
I havent tried out the solution posted by you but got another solution to work.... code for which is below ...
<div class="col-sm-6" id="key_${counter}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<input type="text" name="key_${counter}" class="form-control" value='${tempMap?."${'key_' + counter}"}' readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
<div class="col-sm-6" id="anotherkey_${counter}">
<div class="form-group">
<label>Return Date</label>
<span class="input-icon-right input-group">
<input type="text" name="anotherkey_${counter}" class="form-control" value='${tempMap?."${'another_' + counter}"}' readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
</div>
The problem was that i was not referencing the value in the Map properly... The code that fails is stated below.
<div class="col-sm-6" id="departureDate_${counter}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
**<input type="text" name="departureDate_${counter}" class="form-control" value="${tempMap?.${departureDate_counter}"} readonly></input>** // THIS CODE DOES NOT WORK. This will look for a key ${departureDate_counter} and will through a gsp error that tags have not been closed
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
Although i have found a solution to my problem it would be nice if we posted more solutions as i feel that not a lot of solutions are present on the net for grails and gsp ...

Related

How to access the control directly by its formGroupName

In This form I have to access the control of formControlName="last" to show errors of it.
<div [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First name">
<input formControlName="last" placeholder="Last name">
<span *ngIf="name['controls'].last.invalid">invalid</span>
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</div>
This code has thrown an error 'controls' of undefined(Bold Formatted line).
control could be accessible by form['controls'].name['controls'].last.invalid , but is there any way I could access the control directly by its formGroupName ?
Thanks in Advance
Try this
<div *ngIf="!form.controls.name.controls.last.valid">
Invalid last name !!
</div>
Could you try below snippet
<span *ngIf="form.get('last').invalid">invalid</span>
#sravanponugoti: we cannot use [formGroup] with in angular.
Try this code
<form [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First">
<input formControlName="last" placeholder="Last">
<span *ngIf="form.controls['name'].controls.last.valid">invalid</s‌​pan>
</div>
<input formControlName="email" placeholder="Email">
<button type="submit">Submit</button>
</form>

Angular Rails Not Resolving

We currently have some hardcoded code:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[6]" ng-value= "[42198]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[42199]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
Ideally it will be dynamic so it should be something like this:
ng-form class="form-horizontal" name="genderForm">
<div data-fields="">
<div class="form-field-gender control-group form-field" data-field="">
<div class="controls" data-input="">
<label class="radio">
<input type="radio" ng-model="appuser.traits[{{genderQuestion.id}}]" ng-value= "[{{genderQuestion.traits[0].id}}]" name="field-input-gender" id="field-input-gender-0" required>
<i class="fa fa-male fa-fw"></i> {{genderQuestion.traits[0].value_text}}
</label>
<label class="radio">
<input type="radio" name="field-input-gender" ng-model="appuser.traits[6]" id="field-input-gender-1" ng-value="[{{genderQuestion.traits[1].id}}]" required>
<i class="fa fa-female fa-fw"></i> {{genderQuestion.traits[1].value_text}}
</label>
</div>
<div class="controls">
<div class="text-error" data-error="">
</div>
</div>
</div>
</div>
</ng-form>
But something about going from ng-model="appuser.traits[6]" to ng-model="appuser.traits[{{genderQuestion.id}}]" and ng-value="[42199]" to ng-value="[{{genderQuestion.traits[1].id}}]" seems to make it spazz out and not resolve any of the {{}} fields.
Any idea where I'm going wrong? Technically genderQuestion.id = 6 and genderQuestion.traits[1].id = 42199 but in this format it doesn't seem to like those.
Maybe I'm missing like a toString format or something?
2 way data binding with the ngModel directive doesn't need {{ }} again. You can directly refer to the scope object with genderQuestion.id
appuser.traits[genderQuestion.id].
Ta

ng-model not working for certain attributes in angularJS

Hi I encountered a problem with ng-model. I want to create an edit page for admin user to edit the rest of the user's permission level.
So, I listed out all the user's attributes in the edit page, and these attributes should display the current values.
I can update all the attributes correctly, however, the problem is that when visiting the edit page, only certain attributes are displayed while some are not. I think it is the problem with ng-model.
code snippets from my _form.html.erb
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['email'].$invalid }">
<label class="control-label">Email</label>
<div class="input-icon right">
<i ng-show="form['email'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['email']}}" data-container="body"></i>
<input ng-model= "user.email" name="email" type="text" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['events'].$invalid }">
<label class="control-label">Event Permission Level : {{user.activities.events}}</label>
<div class="input-icon right">
<i ng-show="form['events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['events']}}" data-container="body"></i>
<input ng-model= "user.activities.events" name="activities.events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
<div class="col-md-12 space-1" ng-class="{ 'has-error' : form['admin_events'].$invalid }">
<label class="control-label">Admin Event Permission Level : {{user.activities.admin_events}}</label>
<div class="input-icon right">
<i ng-show="form['admin_events'].$invalid" class="fa fa-warning tooltips" data-original-title="{{errors['admin_events']}}" data-container="body"></i>
<input ng-model= "user.activities.admin_events" name="activities.admin_events" type="range" max="2" min="0" class="form-control">
</div>
</div>
<br>
The code above shows 3 different ng-models, 1.user.email, 2.user.activities.events 3.user.activities.admin_events
The way I process them is the same, but when visiting the edit page, only email and events attributes displayed the current value, but not admin_events. I can update their values alright, but I cannot get admin_events to display its current value when visiting the edit page. This is weird isn't it. I mean if I can see the value of events, why can't I see the value of admin_event since they all belong to the user variable.
Can anyone explain why is it like this? It is very confusing for me. Thank you very much.
As it solved the problem, I quote myself from the comments :
If only user.activities.admin_events is not working, it may be related to the _ notation. Try camel case user.activities.adminEvents or user.activities['admin_events'].

When using Angular.js, how to retain form data after submit?

I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.

How to handle Twitter Bootstrap fields with Thymeleaf Spring and less code

I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.

Resources