In grails, I am trying to get a list of checked check boxes.
I have the list of check boxes, but my issues are two:
1) when I click on a single item in the list and click submit - I only get the value "on". If I click more than one check box item, I get something like this:
[Ljava.lang.String;#5a37f9f7
2). I do not get a list or the name of the item checked.
Here is my code for the check boxes in the gsp:
<g:form action="submitForm">
<ul class="columns3">
<g:each in="${name}" var="fileName" >
<g:checkBox value="${false}" name="${ 'fileName'}" /> ${fileName.replaceFirst(~/\.[^\.]+$/, '')}<br>
</g:each>
</ul>
<br>
<br>
<g:submitButton name="Submit"/>
</g:form>
and here is the controller code (groovy):
class Read_dirController {
def index() {
def list = []
def dir = new File("/home/ironmantis/Documents/business/test_files")
dir.eachFileRecurse (FileType.FILES) { file ->
list << file
}
list.each {
println it.name.replaceFirst(~/\.[^\.]+$/, '')
}
render(view: "index", model: [name:list.name])
params.list('fileName')
}
def displayForm() { }
def submitForm(String fileName) {
render fileName
//render(view: "tests_checked", fileName)
}
}
I tried to bind an id to the check boxes, but I keep getting an exception error.
Any help you can give I truly appreciate it; I am new to grails.
ironmantis7x
You can use the beautiful command object for this. For this ,first make a class RequestCO having the boolean fields.
class RequestCO {
boolean isChecked;
String name;
}
And
class RequestParentCO {
List<RequestCO> requestCOs = [].withLazyDefault { new RequestCO() }
}
Now you just simply bind all your request to RequestParentCO in your action:
def submitForm(RequestParentCO parentCO) {
println parentCO.requestCOs.findAll { it.isChecked }
}
This will give you all the checked checkboxes results.
GSP
<g:form action="process">
<ul class="columns3">
<g:each in="${["one", "two", "three"]}" var="fileName" status="i">
<g:hiddenField name="requestCOs[${i}].name" value="${fileName}"/>
<g:checkBox name="requestCOs[${i}].isChecked"/> ${fileName}<br>
</g:each>
</ul>
<g:submitButton name="Submit"/>
This way,
def submitForm() {
def values = request.getParameterValues("fileName")
//here values contains string array which are selected in checkbox
}
you can use request.getParameterValues("fileName") method, this will give selected checkbox in string array
Related
I am trying to save list of object from view to controller but i am getting NullReferenceException when list is more that 25. It works fine if list less than 25.
public async Task<IActionResult> ImportStudentExcel(IFormFile file)
{
var list = new List<StudentImport>();
//Here it contains logic for adding item to list from excel file
ViewBag.FileName = file.FileName;
return View(list.ToList());
}
I am getting all the item in my view
I am doing this to bind properties
//Containes Table for Showing List
<form id="saveForm" asp-action="SaveFromImport" asp-controller="StudentImport" method="POST">
<input type="hidden" name="filename" value="#ViewBag.FileName">
#for(int i=0; i<Model.Count; i++)
{
<input asp-for="#Model[#i].Fullname" type="hidden" value="#Model[#i].Fullname"/>
<input asp-for="#Model[#i].Gender" type="hidden" value="#Model[#i].Gender"/>
<input asp-for="#Model[#i].DOB" type="hidden" value="#Model[#i].DOB"/>
// Other 15 Properties Like Address, PhoneNumber, RegNo etc
}
<input type="submit" value="Save">
</form>
When I inspect this page all item are present
public async Task<IActionResult> SaveFromImport(List<StudentImport> students, string filename)
{
try
{
foreach (var t in students)
{
System.Console.WriteLine(t.Fullname);
//Save to DB
}
}
catch (Exception e)
{
System.Console.WriteLine(e.ToString());
}
return RedirectToAction("Index", "Student");
}
Am getting NullReference at foreach Statement. I dont know whats going on. It works as expected when list count is 13 but wont work when count is 25 or more, It also works when there is only one property in StudentImportModel and count is sttil 25.
The ExceptionMessage in my case was NullReferenceException but the actual error was InvalidDataException: Form value count limit 1024 exceeded.
However, I managed to solve this by adding this code in ConfigureServices method.
services.Configure<FormOptions>(options =>
{
options.ValueCountLimit = 6000;
});
I have four checkbox and I want to check automatically checkbox with id = 2 if checkbox with id = 4 is checked.
I did the following but did not get the output. Could someone help me with this.
{#each category in checkboxList}}
{{input id = category.CHECKBOX_ID type="checkbox" checked=category.IS_CHECKED}}
{{#if category.CHECKBOX_ID == 4 && category.IS_CHECKED == true}}
{{action 'CheckSize'}}
{{/if}}
The checkboxList is
[
{"IS_CHECKED":false,"CHECKBOX_ID":1},
{"IS_CHECKED":false,"CHECKBOX_ID":2},
{"IS_CHECKED":true,"CHECKBOX_ID":3},
{"IS_CHECKED":false,"CHECKBOX_ID":4}
]
You'll want to manage the state of the checkboxes separately.
Here is an example I did for another SO question that had a similar problem to solve:
https://ember-twiddle.com/468a737efbbf447966dd83ac734f62ad
The gist of it is
we use a single action in response to a click of any checkbox:
#action
toggleChecked(id) {
const newTree = check(this.options, id);
this.set('options', newTree);
}
In this example (taken from the ember-twiddle), all of the logic is extracted to a pure-function named check.
Check itself is pretty involved, but because the application logic is different between that example and the problem you've run in to, I'll just show the entry point function:
export function check(tree, id, transform = toggle) {
if (tree === undefined) return undefined;
if (Array.isArray(tree)) {
return tree.map(t => check(t, id, transform));
}
if (tree.id === id || id === 'all') {
return checkNode(tree, id, transform);
}
if (tree.children) {
return checkChildren(tree, id, transform);
}
return tree;
}
This is just an example of how you can immutably modify the representation of all checkboxes by using a pure function. Your logic may vary.
Hope this helps :)
I'm trying to write a simple unit test and can't seem to figure it out. I want to test a bootstrap modal to ensure it displays the correct contents when I pass certain object properties to it. Here's what my modal code looks like:
import React, { Component, PropTypes } from 'react';
import { Button, Modal } from 'react-bootstrap';
class ModalBox extends Component {
render() {
const { modalBox } = this.props;
let content;
if (modalBox.contentBody) {
content = modalBox.contentBody;
} else {
content = (
<span>
<Modal.Header closeButton onHide={this.close.bind(this)}>
<Modal.Title>{modalBox.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{modalBox.message}
</Modal.Body>
{modalBox.isConfirm &&
<Modal.Footer>
<Button onClick={modalBox.onCancel} className="modal-button cancel">{modalBox.cancelText || 'Cancel'}</Button>
<Button onClick={modalBox.onConfirm} className="modal-button confirm">{modalBox.confirmText || 'Confirm'}</Button>
</Modal.Footer>
}
</span>
);
}
return (
<Modal show={typeof modalBox != 'undefined'} onHide={this.close.bind(this)} dialogClassName={modalBox.dialogClassName || ''} backdrop={modalBox.backdrop || true}>
{content}
</Modal>
);
}
}
So for a test, I want to make sure that if I pass the prop modalBox containing the contentBody field that it just returns the contentBody for the modal body. Here's an example of what I'm trying to test:
it("renders only contentBody when provided", () => {
let modalBoxObj = {
contentBody: <div className="test-content-body">This is a test.</div>
};
let element = React.createElement(ModalBox, {modalBox: modalBoxObj});
let component = TestUtils.renderIntoDocument(element);
let modalWrapper = TestUtils.scryRenderedDOMComponentsWithClass(component, 'modal');
// modalWrapper returns an empty array, so this returns "Expected 0 to be 1"
expect(modalWrapper.length).toBe(1);
let testBody = TestUtils.scryRenderedDOMComponentsWithClass(component, 'test-content-body');
// testBody returns an empty array, so this returns "Expected 0 to be 1"
expect(testBody.length).toBe(1);
// this returns "TypeError: 'undefined' is not an object (evaluating 'testBody[0].innerHTML')"
expect(testBody[0].innerHTML).toEqual("This is a test.");
}
I've also tried doing shallow rendering with TestUtils.createRenderer and trying that approach, but had no luck with it. Based on the examples I've seen online and previous testing experience with react <0.14, I feel this test should work. I just don't know what I'm missing or misunderstanding. In the past, I did something like below and just looked at the componentNode object to find elements and such, but componentNode is returning null.
let component = TestUtils.renderIntoDocument(element);
let componentNode = findDOMNode(component);
Thanks for your help!
The solution ended up being to add a ref to the ModalBox component. Once added, we were able to target the node like this:
let component = TestUtils.renderIntoDocument(<ModalBox modalBox={modalBoxObj} />);
let componentNode = findDOMNode(component.refs.modalBox._modal);
I got rid of the original UPDATE gsp Grails offers.
I put it in the first row of my list.gsp table and change all the values of the table to g:textfield so they can be edited without going to the save.gsp
But now I'm trying to make it work, and I can't.
I added a update button in the last column of the row, of every row.
When I change the values of the g:textfields and click the update button it tells me
Density #ID updated
but the values do not change.
I think I am doing something wrong with def update in the controller.
Here is the code:
def update = {
log.info "Entering Action ${actionUri}"
def densityInstance = Density.get(params.id)
if (densityInstance) {
if(params?.Rcommodity) {
println "${params.Rcommodity}"
}
if (params.version) {
def version = params.version.toLong()
if (densityInstance.version > version) {
densityInstance.errors.rejectValue("version", "default.optimistic.locking.failure", [message(code: 'density.label', default: 'Density')] as Object[], "Another user has updated this Density while you were editing")
render(view: "list", model: [densityInstance: densityInstance])
return
}
}
densityInstance.properties = params
if (!densityInstance.hasErrors() && densityInstance.save(flush: true)) {
flash.message = "${message(code: 'default.updated.message', args: [message(code: 'density.label', default: 'Density'), densityInstance.id])}"
redirect(action: "list", id: densityInstance.id)
}
else {
redirect(action: "list", id: densityInstance.id)
}
}
else {
flash.message = "${message(code: 'default.not.found.message', args: [message(code: 'density.label', default: 'Density'), params.id])}"
redirect(action: "list")
}
}
The Rcommodity is the name of the textfields created, I put a println to see if the value was right, now I don't know how to make the value of the textfield be the one entered, it gives me the same value it had before but it gives me the message saying that it was updated.
The controller is DensityController and the domain is density
Any help would be greatly appreciated. Thanks :D
Looks from the flash message being printed as though the instance is being updated (though the "#ID" bit looks odd - have you replaced the actual id?).
It might be that
densityInstance.properties = params
is not actually be matching any instance properties, so none are actually being changed before the save. Are you sure you've named your gsp input fields to match the names of your Density class fields? Is Rcommodity a property of Density, for example?
Might help to add the form bit of your gsp page, as well as the Density domain class.
This code:
Html.CheckBoxList(ViewData.TemplateInfo.HtmlFieldPrefix, myList)
Produces this mark-up:
<ul><li><input name="Header.h_dist_cd" type="checkbox" value="BD" />
<span>BD - Dist BD Name</span></li>
<li><input name="Header.h_dist_cd" type="checkbox" value="SS" />
<span>SS - Dist SS Name</span></li>
<li><input name="Header.h_dist_cd" type="checkbox" value="DS" />
<span>DS - Dist DS Name</span></li>
<li><input name="Header.h_dist_cd" type="checkbox" value="SW" />
<span>SW - Dist SW Name </span></li>
</ul>
You can check multiple selections. The return string parameter Header.h_dist_cd only contains the first value selected. What do I need to do to get the other checked values?
The post method parameter looks like this:
public ActionResult Edit(Header header)
I'm assuming that Html.CheckBoxList is your extension and that's markup that you generated.
Based on what you're showing, two things to check:
The model binder is going to look for an object named Header with string property h_dist_cd to bind to. Your action method looks like Header is the root view model and not a child object of your model.
I don't know how you are handling the case where the checkboxes are cleared. The normal trick is to render a hidden field with the same name.
Also a nit, but you want to use 'label for="..."' so they can click the text to check/uncheck and for accessibility.
I've found that using extensions for this problem is error prone. You might want to consider a child view model instead. It fits in better with the EditorFor template system of MVC2.
Here's an example from our system...
In the view model, embed a reusable child model...
[AtLeastOneRequired(ErrorMessage = "(required)")]
public MultiSelectModel Cofamilies { get; set; }
You can initialize it with a standard list of SelectListItem...
MyViewModel(...)
{
List<SelectListItem> initialSelections = ...from controller or domain layer...;
Cofamilies = new MultiSelectModel(initialSelections);
...
The MultiSelectModel child model. Note the setter override on Value...
public class MultiSelectModel : ICountable
{
public MultiSelectModel(IEnumerable<SelectListItem> items)
{
Items = new List<SelectListItem>(items);
_value = new List<string>(Items.Count);
}
public int Count { get { return Items.Count(x => x.Selected); } }
public List<SelectListItem> Items { get; private set; }
private void _Select()
{
for (int i = 0; i < Items.Count; i++)
Items[i].Selected = Value[i] != "false";
}
public List<SelectListItem> SelectedItems
{
get { return Items.Where(x => x.Selected).ToList(); }
}
private void _SetSelectedValues(IEnumerable<string> values)
{
foreach (var item in Items)
{
var tmp = item;
item.Selected = values.Any(x => x == tmp.Value);
}
}
public List<string> SelectedValues
{
get { return SelectedItems.Select(x => x.Value).ToList(); }
set { _SetSelectedValues(value); }
}
public List<string> Value
{
get { return _value; }
set { _value = value; _Select(); }
}
private List<string> _value;
}
Now you can place your editor template in Views/Shared/MultiSelectModel.ascx...
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<WebUI.Cofamilies.Models.Shared.MultiSelectModel>" %>
<div class="set">
<%=Html.LabelFor(model => model)%>
<ul>
<% for (int i = 0; i < Model.Items.Count; i++)
{
var item = Model.Items[i];
string name = ViewData.ModelMetadata.PropertyName + ".Value[" + i + "]";
string id = ViewData.ModelMetadata.PropertyName + "_Value[" + i + "]";
string selected = item.Selected ? "checked=\"checked\"" : "";
%>
<li>
<input type="checkbox" name="<%= name %>" id="<%= id %>" <%= selected %> value="true" />
<label for="<%= id %>"><%= item.Text %></label>
<input type="hidden" name="<%= name %>" value="false" />
</li>
<% } %>
</ul>
<%= Html.ValidationMessageFor(model => model) %>
Two advantages to this approach:
You don't have to treat the list of items separate from the selection value. You can put attributes on the single property (e.g., AtLeastOneRequired is a custom attribute in our system)
you separate model and view (editor template). We have a horizontal and a vertical layout of checkboxes for example. You could also render "multiple selection" as two listboxes with back and forth buttons, multi-select list box, etc.
I think what you need is how gather selected values from CheckBoxList that user selected and here is my solution for that:
1- Download Jquery.json.js and add it to your view as reference:
2- I've added a ".cssMyClass" to all checkboxlist items so I grab the values by their css class:
<script type="text/javascript" >
$(document).ready(function () {
$("#btnSubmit").click(sendValues);
});
function populateValues()
{
var data = new Array();
$('.myCssClas').each(function () {
if ($(this).attr('checked')) {
var x = $(this).attr("value");
data.push(x);
}
});
return data;
}
function sendValues() {
var data = populateValues();
$.ajax({
type: 'POST',
url: '#Url.Content("~/Home/Save")',
data: $.json.encode(data),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function () { alert("1"); }
});
}
</script>
3- As you can see I've added all selected values to an Array and I've passed it to "Save" action of "Home" controller by ajax 4- in Controller you can receive the values by adding an array as argument:
[HttpPost]
public ActionResult Save(int[] val)
{
I've searched too much but apparently this is the only solution. Please let me know if you find a better solution for it.
when you have multiple items with the same name you will get their values separated with coma