I have a requirement for a grails application to display a list of questions on the screen with 6 grade options listed below each of the questions. The information for these questions and grades is coming from a lookup table in the database. I have the questions and grades displaying on the screen but I'm not sure how to go about getting the lookup information to save in the database. I would also like to know if there is a way to have a certain grade selected by default for each of the questions. I tried the checked="S" but this only selects the S grade for the very bottom questions.
My code for the view is
<label for="questions"></label>
<ul class="one-to-many">
<!-- Evaluation Questions -->
<g:each in="${cdeEvaluationInstance?.questions}" var="evalQuestion" status="i">
<g:hiddenField name="cdeEvaluation.questions[${i}].id" value="${evalQuestion.id}"/>
<legend>
${evalQuestion.areaOfEval.title}
</legend>
<p>
<strong>Focus areas: ${evalQuestion.areaOfEval.focusArea}</strong>
</p>
<p>
<em> ${evalQuestion.areaOfEval.description}
</em>
</p>
<p>
<g:each in="${evalQuestion.areaOfEval.grades.sort{it.grade}}"
var="grade" ><div class="radio">
<span class="clear long">
<input type="radio"
name="radioGroup" value="${evalQuestion.grade}" checked="S" />
<label class="long"><strong> ${grade.grade}
</strong> ${grade.description}</label>
</div>
</g:each>
My code for the controller is
def evalQuestions = EvaluationService.fetchActiveEvaluationQuestions();
//def evaluation = new CdeEvaluation(questions: evalQuestions)
def evaluation = new CdeEvaluation(params)
evaluation.setQuestions(evalQuestions)
My domain for the table that the questions and answers are
package gov.mt.mdt.cde.domain.evaluation
import java.util.Date;
class CdeEvalQuestion extends Base{
CdeAreaOfEvaluation areaOfEval
CdeAreaOfEvalCriteria grade
String comments
static belongsTo = [cdeEvaluation: CdeEvaluation]
static mapping = {
id column: 'cevqu_id_seq'
id generator: 'sequence', params: [sequence: 'cevqu_id_seq']
areaOfEval column: 'caoe_id_seq'
grade column: 'caoec_id_seq'
}
static constraints = {
comments(blank:true, nullable:true, maxSize:2000)
createdBy(blank: false, nullable:false, maxSize:13)
dateCreated(blank: false, nullable:false)
lastUpdatedBy(blank: false, nullable:true, maxSize:13)
lastUpdated(blank: false, nullable:true)
}
}
I am just starting to learn grails/groovy so any help or examples you could point me to would be great. Thanks!
So selecting a particular question by default you would do something like:
<g:radioGroup name="myGroup" labels="evalQuestion.areaOfEval.grades" values="evalQuestion.areaOfEval.grades*.grade" value="evalQuestion.grade">
${it.radio} <label class="long"><strong>${it.label.grade}</strong> ${it.label.description}</label>
</g:radioGroup>
That doesn't require you write the inner each. Basically you pass an array of labels and a parallel array of values. The value attribute is the default value from the values attribute. The inner body of the radioGroup will be repeated for each label and value pair. The *. (aka spread operator) basically is the same thing as using the collect() method.
I removed the spread operator for label and I passed the full object in for the label. Then inside the body of the tag when I do it.label I have the full object and can use different fields it.label.description and it.label.grade.
As for setting the default to grade S. You'll need to write the code to find grade S from evalQuestion.areaOfEval.grades. Something like:
evalQuestion.areaOfEval.grades.find { it.grade == 'S' }
And pass that to value attribute of the tag. You could do this:
<g:set var="defaultGrade" value="evalQuestion.areaOfEval.grades.find { it.grade == 'S' }"/>
<g:radioGroup name="myGroup"
labels="evalQuestion.areaOfEval.grades"
values="evalQuestion.areaOfEval.grades*.grade"
value="defaultGrade">
Related
On a rails 6 installation, I have the following:
Controller:
# app/controllers/foo_controller.rb
def bar
#items = [["firstname", "{{ FIRSTNAME }}"], ["lastname", "{{ LASTNAME }}"], ["company", "{{ COMPANY }}"]]
end
View:
# app/views/foo/bar.html.erb
<p>Quia <span data-field="firstname">{{ FIRSTNAME }}</span> quibusd <span data-field="firstname">{{ FIRSTNAME }}</span> am sint culpa velit necessi <span data-field="lastname">{{ LASTNAME }}</span> tatibus s impedit recusandae modi dolorem <span data-field="company">{{ COMPANY }}</span> aut illo ducimus unde quo u <span data-field="firstname">{{ FIRSTNAME }}</span> tempore voluptas.</p>
<% #items.each do |variable, placeholder| %>
<div data-controller="hello">
<input
type="text"
data-hello-target="name"
data-action="hello#greet"
data-field="<%= variable %>"
value="<%= placeholder %>">
</div>
<% end %>
and the relevant stimulus code (vanilla JS):
//app/javascript/controllers/hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
var elements = document.body.querySelectorAll('[data-field="' + this.nameTarget.dataset.field + '"]');
for (var i = 0; i < elements.length; i++) {
elements[i].innerText = this.nameTarget.value;
};
}
}
Now, as you might have guessed, the idea is to generate one <input> field per item from the #items hash, pre-filled with the relevant value and "linked" with a <span>, which it updates on value change. So far, everything works.
Here's my issue though. This part is plain old dirty vanilla js, which doesn't feel too 'stimulusy':
var elements = document.body.querySelectorAll('[data-field="' + this.nameTarget.dataset.field + '"]');
for (var i = 0; i < elements.length; i++) {
elements[i].innerText = this.nameTarget.value;
};
Surely there's some way to improve this. Any suggestion as to how to refactor this code in a more elegant way would be most welcome.
An approach would be to have two controllers, one for the 'thing that will change the content' (let's call this content) and another for the 'thing that will show any updated content somewhere else' (let's call this output).
Once you set up two controllers, it becomes a bit easier to reason about them as being discrete. One does something when a value updates from user interaction and the other should so something when it knows about an updated value.
Stimulus recommends cross controller coordination with events. JavaScript event passing is a powerful, browser native, way to communicate across elements in the DOM.
First, let's start with the simplest case in HTML only
In general, it is good to think about the HTML first, irrespective of how the content is generated on the server side as it will help you solve one problem at a time.
As an aside, I do not write Ruby and this question would be easier to parse if it only had the smallest viable HTML to reproduce the question.
Below we have two div elements, one sits above and is meant to show the name value inside the h1 tag and the email in the p tag.
The second div contains a two input tags and these are where the user will update the value.
I have hard-coded the 'initial' data as this would come from the server in the first HTML render.
<body>
<div
class="container"
data-controller="output"
data-action="content:updated#window->output#updateLabel"
>
<h1 class="title">
Hello
<span data-output-target="item" data-field="name">Joe</span>
</h1>
<p>
Email:
<span data-output-target="item" data-field="email">joe#joe.co</span>
</p>
</div>
<div data-controller="content">
<input
type="text"
data-action="content#update"
data-content-field-param="name"
value="Joe"
/>
<input
type="text"
data-action="content#update"
data-content-field-param="email"
value="joe#joe.co"
/>
</div>
</body>
Second - walk through the event flow
Once an input is updated, it will fire the conten#update event on change.
The data-content-field-param is an Action Parameter that will be available inside the event.params given to the class method update on the content controller.
This way, the one class method has knowledge of the element that has changed (via the event) and the field 'name' to give this when passing the information on.
The output controller has a separate action to 'listen' for an event called content:updated and it will listen for this event globally (at the window) and then call its own method updateLabel with the received event.
The output controller has targets with the name item and each one has the mapping of what 'field' it should referent in a simple data-field attribute.
Third - create the controllers
Below, the ContentController has a single update method that will receive any fired input element's change event.
The value can be gathered from the event's currentTarget and the field can be gathered via the event.params.field.
Then a new event is fired with the this.dispatch method, we give it a name of updated and Stimulus will automatically append the class name content giving the event name content:updated. As per docs - https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events
The OutputController has a target of name item and then a method updateLabel
updateLabel will receive the event and 'pull out' the detail given to it from the ContentController's dispatch.
Finally, updateLabel will go through each of the itemTargets and see if any have the matching field name on that element's dataset and then update the innerText when a match is found. This also means you could have multiple 'name' placeholders throughout this controller's scoped HTML.
class ContentController extends Controller {
update(event) {
const field = event.params.field;
const value = event.currentTarget.value;
this.dispatch('updated', { detail: { field, value } });
}
}
class OutputController extends Controller {
static targets = ['item'];
updateLabel(event) {
const { field, value } = event.detail;
this.itemTargets.forEach((element) => {
if (element.dataset.field === field) {
element.innerText = value;
}
});
}
}
An alternate approach is to follow the Publish-Subscribe pattern and simply have one controller that can both publish events and subscribe to them.
This leverages the recommended approach of Cross-controller coordination with events.
This approach adds a single controller that will be 'close' to the elements that need to publish/subscribe and is overall simpler to the first answer.
PubSubController - JS code example
In the controller below we have two methods, a publish which will dispatch an event, and a subscribe which will receive an event and update the contoller's element.
The value used by this controller is a key which will serve as the reference for what values matter to what subscription.
class PubSubController extends Controller {
static values = { key: String };
publish(event) {
const key = this.keyValue;
const value = event.target.value;
this.dispatch('send', { detail: { key, value } });
}
subscribe(event) {
const { key, value } = event.detail;
if (this.keyValue !== key) return;
this.element.innerText = value;
}
}
PubSubController - HTML usage example
The controller will be added to each input (to publish) and each DOM element you want to be updated (to subscribe).
Looking at the inputs you can see that they have the controller pub-sub and also an action (defaults to triggering when the input changes) to fire the publish method.
Each input also contains a reference to its key (e.g email or name).
Finally, the two spans that 'subscribe' to the content are triggered on the event pub-sub:send and pass the event to the subscribe method. These also have a key.
<body>
<div class="container">
<h1 class="title">
Hello
<span
data-controller="pub-sub"
data-action="pub-sub:send#window->pub-sub#subscribe"
data-pub-sub-key-value="name"
>Joe</span
>
</h1>
<p>
Email:
<span
data-controller="pub-sub"
data-action="pub-sub:send#window->pub-sub#subscribe"
data-pub-sub-key-value="email"
>joe#joe.co</span
>
</p>
</div>
<div>
<input
type="text"
data-controller="pub-sub"
data-action="pub-sub#publish"
data-pub-sub-key-value="name"
value="Joe"
/>
<input
type="text"
data-controller="pub-sub"
data-action="pub-sub#publish"
data-pub-sub-key-value="email"
value="joe#joe.co"
/>
</div>
</body>
this is a tricky one to explain, so I'll try bullet pointing.
Issue:
Dynamic rows (collection) available to user on View (add/delete)
User deletes row and saves (POST)
Collection passed back to controller with non-sequential indices
Stepping through code, everything looks fine, collection items, indices etc.
Once the page is rendered, items are not displaying correctly - They are all out by 1 and therefore duplicating the top item at the new 0 location.
What I've found:
This happens ONLY when using the HTML Helpers in Razor code.
If I use the traditional <input> elements (not ideal), it works fine.
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpGet]
public ActionResult Index()
{
List<Car> cars = new List<Car>
{
new Car { ID = 1, Make = "BMW 1", Model = "325" },
new Car { ID = 2, Make = "Land Rover 2", Model = "Range Rover" },
new Car { ID = 3, Make = "Audi 3", Model = "A3" },
new Car { ID = 4, Make = "Honda 4", Model = "Civic" }
};
CarModel model = new CarModel();
model.Cars = cars;
return View(model);
}
[HttpPost]
public ActionResult Index(CarModel model)
{
// This is for debugging purposes only
List<Car> savedCars = model.Cars;
return View(model);
}
Index.cshtml:
As you can see, I have "Make" and "Actual Make" inputs. One being a HTML Helper and the other a traditional HTML Input, respectively.
#using (Html.BeginForm())
{
<div class="col-md-4">
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div id="car-row-#i" class="form-group row">
<br />
<hr />
<label class="control-label">Make (#i)</label>
#Html.TextBoxFor(m => m.Cars[i].Make, new { #id = "car-make-" + i, #class = "form-control" })
<label class="control-label">Actual Make</label>
<input class="form-control" id="car-make-#i" name="Cars[#i].Make" type="text" value="#Model.Cars[i].Make" />
<div>
<input type="hidden" name="Cars.Index" value="#i" />
</div>
<br />
<button id="delete-btn-#i" type="button" class="btn btn-sm btn-danger" onclick="DeleteCarRow(#i)">Delete Entry</button>
</div>
}
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" value="Submit" />
</div>
</div>
}
Javascript Delete Function
function DeleteCarRow(id) {
$("#car-row-" + id).remove();
}
What's happening in the UI:
Step 1 (delete row)
Step 2 (Submit form)
Step 3 (results)
The reason for this behavior is that the HtmlHelper methods use the value from ModelState (if one exists) to set the value attribute rather that the actual model value. The reason for this behavior is explained in the answer to TextBoxFor displaying initial value, not the value updated from code.
In your case, when you submit, the following values are added to ModelState
Cars[1].Make: Land Rover 2
Cars[2].Make: Audi 3
Cars[3].Make: Honda 4
Note that there is no value for Cars[0].Make because you deleted the first item in the view.
When you return the view, the collection now contains
Cars[0].Make: Land Rover 2
Cars[1].Make: Audi 3
Cars[2].Make: Honda 4
So in the first iteration of the loop, the TextBoxFor() method checks ModelState for a match, does not find one, and generates value="Land Rover 2" (i.e. the model value) and your manual input also reads the model value and sets value="Land Rover 2"
In the second iteration, the TextBoxFor() does find a match for Cars[1]Make in ModelState so it sets value="Land Rover 2" and manual inputs reads the model value and sets value="Audi 3".
I'm assuming this question is just to explain the behavior (in reality, you would save the data and then redirect to the GET method to display the new list), but you can generate the correct output when you return the view by calling ModelState.Clear() which will clear all ModelState values so that the TextBoxFor() generates the value attribute based on the model value.
Side note:You view contains a lot of bad practice, including polluting your markup with behavior (use Unobtrusive JavaScript), creating label element that do not behave as labels (clicking on them will not set focus to the associated control), unnecessary use of <br/> elements (use css to style your elements with margins etc) and unnecessary use of new { #id = "car-make-" + i }. The code in your loop can be
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div class="form-group row">
<hr />
#Html.LabelFor(m => m.Cars[i].Make, "Make (#i)")
#Html.TextBoxFor(m => m.Cars[i].Make, new { #class = "form-control" })
....
<input type="hidden" name="Cars.Index" value="#i" />
<button type="button" class="btn btn-sm btn-danger delete">Delete Entry</button>
</div>
}
$('.delete').click(function() {
$(this).closest('.form-group').remove();
}
this is a tricky one to explain, so I'll try bullet pointing.
Issue:
Dynamic rows (collection) available to user on View (add/delete)
User deletes row and saves (POST)
Collection passed back to controller with non-sequential indices
Stepping through code, everything looks fine, collection items, indices etc.
Once the page is rendered, items are not displaying correctly - They are all out by 1 and therefore duplicating the top item at the new 0 location.
What I've found:
This happens ONLY when using the HTML Helpers in Razor code.
If I use the traditional <input> elements (not ideal), it works fine.
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpGet]
public ActionResult Index()
{
List<Car> cars = new List<Car>
{
new Car { ID = 1, Make = "BMW 1", Model = "325" },
new Car { ID = 2, Make = "Land Rover 2", Model = "Range Rover" },
new Car { ID = 3, Make = "Audi 3", Model = "A3" },
new Car { ID = 4, Make = "Honda 4", Model = "Civic" }
};
CarModel model = new CarModel();
model.Cars = cars;
return View(model);
}
[HttpPost]
public ActionResult Index(CarModel model)
{
// This is for debugging purposes only
List<Car> savedCars = model.Cars;
return View(model);
}
Index.cshtml:
As you can see, I have "Make" and "Actual Make" inputs. One being a HTML Helper and the other a traditional HTML Input, respectively.
#using (Html.BeginForm())
{
<div class="col-md-4">
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div id="car-row-#i" class="form-group row">
<br />
<hr />
<label class="control-label">Make (#i)</label>
#Html.TextBoxFor(m => m.Cars[i].Make, new { #id = "car-make-" + i, #class = "form-control" })
<label class="control-label">Actual Make</label>
<input class="form-control" id="car-make-#i" name="Cars[#i].Make" type="text" value="#Model.Cars[i].Make" />
<div>
<input type="hidden" name="Cars.Index" value="#i" />
</div>
<br />
<button id="delete-btn-#i" type="button" class="btn btn-sm btn-danger" onclick="DeleteCarRow(#i)">Delete Entry</button>
</div>
}
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" value="Submit" />
</div>
</div>
}
Javascript Delete Function
function DeleteCarRow(id) {
$("#car-row-" + id).remove();
}
What's happening in the UI:
Step 1 (delete row)
Step 2 (Submit form)
Step 3 (results)
The reason for this behavior is that the HtmlHelper methods use the value from ModelState (if one exists) to set the value attribute rather that the actual model value. The reason for this behavior is explained in the answer to TextBoxFor displaying initial value, not the value updated from code.
In your case, when you submit, the following values are added to ModelState
Cars[1].Make: Land Rover 2
Cars[2].Make: Audi 3
Cars[3].Make: Honda 4
Note that there is no value for Cars[0].Make because you deleted the first item in the view.
When you return the view, the collection now contains
Cars[0].Make: Land Rover 2
Cars[1].Make: Audi 3
Cars[2].Make: Honda 4
So in the first iteration of the loop, the TextBoxFor() method checks ModelState for a match, does not find one, and generates value="Land Rover 2" (i.e. the model value) and your manual input also reads the model value and sets value="Land Rover 2"
In the second iteration, the TextBoxFor() does find a match for Cars[1]Make in ModelState so it sets value="Land Rover 2" and manual inputs reads the model value and sets value="Audi 3".
I'm assuming this question is just to explain the behavior (in reality, you would save the data and then redirect to the GET method to display the new list), but you can generate the correct output when you return the view by calling ModelState.Clear() which will clear all ModelState values so that the TextBoxFor() generates the value attribute based on the model value.
Side note:You view contains a lot of bad practice, including polluting your markup with behavior (use Unobtrusive JavaScript), creating label element that do not behave as labels (clicking on them will not set focus to the associated control), unnecessary use of <br/> elements (use css to style your elements with margins etc) and unnecessary use of new { #id = "car-make-" + i }. The code in your loop can be
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div class="form-group row">
<hr />
#Html.LabelFor(m => m.Cars[i].Make, "Make (#i)")
#Html.TextBoxFor(m => m.Cars[i].Make, new { #class = "form-control" })
....
<input type="hidden" name="Cars.Index" value="#i" />
<button type="button" class="btn btn-sm btn-danger delete">Delete Entry</button>
</div>
}
$('.delete').click(function() {
$(this).closest('.form-group').remove();
}
I have the following domain classes.
Address
String number
String roadName
String country
Person
String fName
String age
Address address
I have a view called PersonViewSave i want the user to be able to save Person information from this view. When creating a Person record the user needs to create a Address record as well.
My Person controller looks like this:
PersonViewSave ={
def ad = new Address(number: '11', roadName: 'round road', country:'France').save()
new Person(fName: 'Alex', age: '23', address:ad).save()
}
1.) How do i collect parameters from the view and bring it to the PersonViewSave method ? (And can someone show me a sample GSP view file with the Person and Address textfields)
2.) Incase if there's an error in the Address created, how do i prevent creating a Person object with an address as shown in this line new Person(fName: 'Alex', age: '23', address:ad).save()
UPDATE
<g:form name="myForm" method="post" action="doIt">
<p>Person info:</p>
<label for="firstName">First Name</label>
<g:textField name="firstName" id="firstName" />
<p>Address Info:</p>
<label for="roadName">Street Number</label>
<g:textField name="roadName" id="roadName" />
<g:submitButton name="submit" value="Submit" />
Here, i have only used few objects from the Domain classes just to see if it works.
I also have a parameter called createdDate in both Domain classes. That as well needs to be auto inserted.
My Service Class is as follows:
def saveService () {
def ad = new Address(params)
if (ad.save(flush: true)) {
def p = new Person(params)
p.address = ad
p.save()
} else {
// display validation errors
}
}
1.) I get an error and it is > No such property: params for class: pro.PersonService
2.) What hapence i have 2 domain class with parameters that has the same Name. For example Animal and Person domain classes have an parameter called firstName. According to your previous solution how will grail distinguish to what domain class it belongs to ?
I am using Grails 2.2.4
Here is a way to check that the Address saved correctly:
def ad = new Address(params)
if (ad.save(flush: true)) {
def p = new Person(params)
p.address = ad
p.save()
} else {
// display validation errors
}
This returns the Address if it saved properly, which results in true, otherwise it returns null (or false).
Also, you can use data binding via the params map to create your objects from parameters. As long as the key in params matches up to a property name in your Address and Person class, the value of the parameter will be assigned to the object.
So, for instance, to map your Person, you will need fields like the following:
<g:form name="personForm" method="post" action="PersonViewSave">
<p>Person info:</p>
<label for="fName">First Name</label>
<g:textField name="fName" id="fName" />
<label for="age">Age</label>
<g:textField name="age" id="age" />
<p>Address Info:</p>
<label for="number">Street Number</label>
<g:textField name="number" id="number" />
<label for="roadName">Road</label>
<g:textField name="roadName" id="roadName" />
<label for="country">Country</label>
<g:textField name="country" id="country" />
<g:submitButton name="submit" value="Submit" />
</g:form>
you can try this
def ad = new Address(number:params.number , roadName:params.roadName , country: params.country)
if (ad.save(flush: true)) {
def p = new Person(fName:params.fName , age: params.age, address:ad)
p.save()
} else {
// display validation errors
}
I have just entered into the Grails arena.
I have a requirement where I want to put one drop down and one button on one page, and by clicking on button only that drop down values should be changed, other controls on the page should remain unchanged.
My code is as follows :
_connType.gsp
<div id="mappedDeviceDiv">
<select id="mappedDevice" name="mappedDevice" value="" style="width:200px">
<g:each in="${deviceList}" status="i" var="dl">
<option value="${dl}">${dl}</option>
</g:each>
</select>
<g:submitToRemote class="blackButton" update="mappedDeviceDiv"
url="${[controller:'resource',action:'getDeviceList']}"
value="Get Devices"/>
</div>
ResourceController.groovy
def getDeviceList = {
println "Getting NV devices.. + Nirmal" + params
def model = buildAccessRequestModel()
List<NVDeviceBean> deviceList = NVUtil.getDevices(params.datasource, null);
Collections.sort(deviceList);
List<String> devices = []
for(NVDeviceBean deviceBean : deviceList) {
devices.add(deviceBean.getName())
}
println "list = "+devices
model.putAt('deviceList', devices)
render (template:'config/connType',model:model)
}
So, in above scenario, it's setting the values in the devices perfectly, but at the view side in a drop down m getting whole connType page, instead of only list values which is in devices variable of controller.
Any help would be highly appreciated..
You might want to create/modify one of the controller actions to return a list of HTML options. You could even have this action render a template, too.
def getDeviceOptions = {
def options = []
// code that creates the option list goes here.
render(template:'config/optionList', model: [optionList: options ])
}
And the template...
<!-- config/_optionList.gsp -->
<g:each in="${optionList}" status="i" var="dl">
<option value="${dl}">${dl}</option>
</g:each>
Then, tell the g:submitToRemote tag to update the select object.
<g:submitToRemote class="blackButton" update="mappedDevice"
url="${[controller:'resource',action:'getDeviceOptions']}"
value="Get Devices"/>
That should get you started in the right direction.