I'm having a GSP page like below. The requirement is like a list of reports will be shown - the user has the option to select one report and can export the report to excel.
How to read the selected radio button and pass the selected value as "params" ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
</head>
<body>
<div class="nav">
<span class="menuButton"><g:link class="create"
action="excelExport" params="['id':{ radId.value}]">Export To Excel</g:link>
</span>
</div>
<div class="body">
<div class="message">Select the report and click 'Excel Export'</div>
</div>
<g:form method="post">
<g:render template="displayUploadedReportsTemplate"
model="['uploadedReports':uploadedReports]" />
</g:form>
</body>
</html>
where displayUploadedReportsTemplate is:
<tbody>
<g:each in="${uploadedReports}" var="bbkRat">
<tr>
<td valign="top"><g:radio name="radId"
value="${fieldValue(bean:bbkRat,field:'id')}" /></td>
<td valign="top"><label> ${fieldValue(bean:bbkRat,field:'cmpName')}
</label></td>
<td valign="top"><label> ${fieldValue(bean:bbkRat,field:'reportCreationDate')}
</label></td>
<%--<td valign="top">
<label> ${fieldValue(bean:bbkRat,field:'cmpName')}
</label>
</td>
--%>
<tr>
</g:each>
</tbody>
How should the params value be below??
<g:link class="create"
action="excelExport" params="['id':{ radId.value}]">
i would recommand to use a radio button group. instead of using g:readio tag you can replace it with plain html input tag within you each tag, e.g.
<input type="radio" name="myGroup" value="1" checked="checked" />
<input type="radio" name="myGroup" value="2" />
<input type="radio" name="myGroup" value="3" />
you have already defined a form around your displayUploadedReportsTemplate. so you need to add a submit button to this form and a action where the params should be tramsitted, e.g.
<g:form method="post" action="test">
within test action you can print your params.myGroup and you will recieve to selected report.
<g:link is processed on server-side, so you can't use it on client side, you have to use javascript instead.
It would be like:
<a href="#" class="excelExport" onclick="doExport(); return false">
<script type="text/javascript">
function doExport() {
var id= $('input:radio[name=radId]:checked').val();
window.location = '${g.createLink(action:'excelReport')}?id=' + id;
}
</script>
ps I assume that you are using jQuery
Related
I am reading a page using Thymeleaf.
In "Edit page", there is a "Back" button for going back to "User List Page". The strange thing for me is this button has "href" and "th:href" at the same time.
image detail of the button
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>user</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
<form class="form-horizontal" th:action="#{/edit}" th:object="${user}" method="post">
<input type="hidden" name="id" th:value="*{id}" />
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">userName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}" placeholder="userName"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" th:value="*{password}" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit" class="btn btn-info" />
Back
</div>
</div>
</form>
</div>
</body>
</html>
It is obvious that "th:href" is for going back. Is there any opition on what is the function of the atrribute "href"?
ThymeLeaf is designed to use the same file for both as prototype you can view in your browser as well as a working template file. What this means in practice is that if you want, you can open the template file in a browser without actually running it and it still looks okay. For example, in this code:
Back
If you open the file directly in a browser, the browser will ignore the th:href (because it doesn't know what to do with it) and instead use href="/toAdd". However, when you run it through the templating engine on a server, href="/toAdd" is replaced with the result of the dynamic expression th:href="#{/list}".
This is more easily shown with a table. Like this:
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
When you open that in a browser, you'll see a table with a single row (Onions, 2.41, yes). But when you run it through the server, the actual content of the table is replaced with whatever data exists in the ${prods} variable.
I am using Struts2 framework in my application, I have one button on my JSP page. That is
<s:submit type="button" name="btnSave" />
Now, I want this button to behave as normal HTML button type should not submit the form and execute the Scripting
function on onclick event. That function submit the form using Ajax.
But what happens is Struts2 convert it to
<input type="submit" id="add_btnSave" name="btnSave" value="Save"/>
And my form is submitted.
1) If I use the HTML button tag it will mess the GUI. As theme of my form is Ajax.
This is a head tag with script
<head>
<s:head theme="ajax"/>
<script type="text/javascript">
$("btnSave").click(function(){
alert("aaa");
$.ajax({
url:
type:"POST",
dataType: "json",
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('Error ' + textStatus);
alert(errorThrown);
alert(XMLHttpRequest.responseText);
},
success: function(){
alert('SUCCESS');
}
});
});
</script>
</head>
My body tag is as followers :
<body>
<table border="1" width="80%" align="center">
<tr>
<td width="100%">
<s:tabbedPanel id="EmpDetail" useSelectedTabCookie="true">
<s:div id="one" label="Emp Reg." theme="ajax" tabindex="0" labelposition="top">
<center>
<s:form name="frmEmpReg" namespace="/" method="post">
EMPLOYEE REGISTRATIOM TAB<br>
<s:actionmessage />
<input type="hidden" name="empbean.id" value="<s:property value="empbean.id"/>"/>
<s:textfield label="Employee First Name" name="empbean.firstName"></s:textfield>
<s:textfield label="Employee Middle Name" name="empbean.middleName"></s:textfield>
<s:textfield label="Employee Last Name" name="empbean.lastName"></s:textfield>
<s:textfield label="Address" name="empbean.address"></s:textfield>
<s:textfield label="State" name="empbean.state"></s:textfield>
<s:textfield label="Employee Designation" name="empbean.designation"></s:textfield>
<s:submit name="btnSave" type="submit" value="Save" align="center"/>
</s:form>
</center>
</s:div>
<s:div>
..
..
Other Tabs
</s:div>
</s:tabbedPanel>
</td>
</tr>
</table>
</body>
any one have any idea of handling it with Struts2 then please help.
Your help will be really appreciated.
If you are using s:submit tag the rendered HTML output is either input or button tag but the type is submit except for the image type. You can use the code to execute javascript onclick event that doesn't submit the form.
<s:submit type="button" onclick="return false;"/>
Have you tried preventDefault()?
$("btnSave").click(function(e){
e.preventDefault();
//..rest of the code
});
How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.
I'm working on some backend project and want to load form via jQueryUI tabs
<div id="parameters_tabs" style="width:920px;">
<ul>
<li><?=$this->lang->line('tab_name')?></li>
</ul>
</div>
in response I produce few forms as in example below:
<?
for ($i = 0; $i < count($groups); $i++)
{
?>
<form id="group_form<?=$i?>" method="POST" action="<?=base_url()?>update_group">
<input type="hidden" name="<?=$this->config->item('csrf_token_name')?>" value="<?=$token?>" />
<input type="hidden" name="id" value="<?=$groups[$i]['id']?>" />
<tr>
<td>
<input type="text" value="<?=$groups[$i]['name']?>" name="name" />
</td>
<td>
<input type="text" value="<?=$groups[$i]['short_name']?>" name="short_name" />
</td>
<td>
<textarea cols="80" rows="4" name="desc"><?=$mgroups[$i]['desc']?></textarea>
</td>
<td style="width: 30px">
<a class="save" onclick="$('#group_form<?=$i?>').submit();"><?=$this->lang->line('save')?></a>
</td>
</tr>
</form>
<?
}
?>
when clicking on "save" I got standard error about CSRF protection:
"An Error Was Encountered
The action you have requested is not allowed."
Can anyone help me and tell where I made mistake? Of course in source I see proper csrf_token_name.
This article helped me when I was experiencing the same issue. Using the built-in form helper form_open() function might also help solve the problem (as it generates the hidden CSRF field for you).
This is the GSP code generated by Grails for the view of the edit action for a Person domain object which is part of my model, and also happens to be the primary class for authentication by the ACEGI security plug-in. I have snipped out a bunch of properties to keep it short. The file resides in the standard location, grails-app/views/person/edit.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'person.label', default: 'Person')}" />
<title><g:message code="default.edit.label" args="[entityName]" /></title>
</head>
<body>
<div class="nav">
<span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
<span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
<span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
</div>
<div class="body">
<h1><g:message code="default.edit.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<g:hasErrors bean="${personInstance}">
<div class="errors">
<g:renderErrors bean="${personInstance}" as="list" />
</div>
</g:hasErrors>
<g:form method="post" >
<g:hiddenField name="id" value="${personInstance?.id}" />
<g:hiddenField name="version" value="${personInstance?.version}" />
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="username"><g:message code="person.username.label" default="Username" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: personInstance, field: 'username', 'errors')}">
<g:textField name="username" value="${personInstance?.username}" />
</td>
</tr>
...SNIP...
a bunch of props
</tbody>
</table>
</div>
<div class="buttons">
<span class="button"><g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
<span class="button"><g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
</div>
</g:form>
</div>
</body>
</html>
My question is, how does the field personInstance get set up and populated?
I suspect this is a basic question which belies a fundamental lack of understanding on my part about how Grails works, but I need to know nonetheless.
This stems from the desire to create my own composite pages which access a Person object and its associated data, which is the heart of my app. I was expecting to be able to create a new page alongside this one, let's call it map.gsp, and get at the personInstance in some magic way. I can't figure out how to do that in spite of trying the obvious, and I think I have a gap right at the centre of my understanding.
PersonInstance will be populated on the controller.
When you submit your form, the associated controller will receive a map containing the fields present on your form.
So, in your controller you'll find a command like
personInstance.properties = params
where params is a map containing the fields submited for the controller, which the keys are the names of the input elements you defined on your gsp file.