I have displayed a table using struts iterator tag. Now every row has an edit link at the end. I need to be able to send that row into action when the edit button is clicked .
But I am unable to understand how to do that. I have
<s:form action="/execute" id="frm" name="frm" method="POST">
<table style="width: 800px; ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions </th>
</tr>
</thead>
<s:iterator value="listToIterate" var="row" status="stat" begin="0" >
<tbody>
<tr>
<td><s:property value="ID" /></td>
<td><s:property value="Name" /></td>
<td><s:a href="#" onclick="document.forms['frm'].submit();">
edit<s:param name="Name" value="%{#row[2]}"/></s:a></td>
</tr>
</tbody>
</s:iterator>
</table>
</s:form>
Using the param tag I want to set the row as a parameter so that I can retrieve it in my action . How do I do this ?
Assuming your form is displaying id's correctly... then substitute your s:a with one following this form:
<s:a namespace="/yournamespace" action="the-edit-action">
edit<s:param name="ID" value="ID"/>
</s:a>
I would rather ID be called id. the-edit-action will need a getter and setter for id.
Related
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</form>
I've got form wherefields are generated dynamically, but also I want to put into them values - it's kind a form where user can edit and accept before parsed text. So I'm doing
th:value="${event.value.eventDescription}"
and I got only string representing object like
com.myPackage.model.ConferenceEvent#4a78868b
instead of real description which is inside this object.
Form:
<form action="#" th:action="#{/approveEvents}" th:object="${conferenceTimetable}" method="post">
<table>
<tr>
<td><label>Key</label></td>
<td><label>EventDate</label></td>
<td><label>EventDescription</label></td>
</tr>
<tr th:each="event: *{conferenceTimetableMap}">
<td><span th:utext="${event.key}">Description</span></td>
<td><span th:utext="${event.value.eventDate}">Description</span></td>
<td><input type="text" th:field="*{conferenceTimetableMap[__${event.key}__]}" th:value="${event.value.eventDescription}"/></td>
</tr>
<tr>
<td>
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
th:field writes the name, value and id of the input it's on. So *{conferenceTimetableMap[__${event.key}__]} is the expressions that evaluates to com.myPackage.model.ConferenceEvent#4a78868b and not ${event.value.eventDescription} (which is never used).
Instead, you should write the complete path to the variable you are submitting in th:field. I can't be sure without know what conferenceTimetableMap contains, but something like this might work:
<input type="text" th:field="*{conferenceTimetableMap[__${event.key}__].eventDescription}" />
I have a login form as such:
<form [formGroup]="loginForm" (ngSubmit)="login();" novalidate>
<table>
<tr>
<td> Username: </td>
<td> <input type="text" formControlName="username"></td>
</tr>
<tr>
<td> Password: </td>
<td> <input type="password" formControlName="password"></td>
</tr>
<tr>
<td> </td>
<td> <button type="submit" [disabled]="loginForm.pristine" md-raised-button>Login</button></td>
</tr>
</table>
</form>
On the submit button, I have [disabled]="loginForm.pristine". But when I type something in either of the input field and backspace to delete everything, it loses it's "pristine" status. How do I handle this?
Taken from the official docs,
"pristine" means the user hasn't changed the value since it was
displayed in this form
Once you start interacting with the form, you loses the "pristine" status. It doesn't matter even if you delete what you type.
I think it would be better to check if the form is valid and disable the button if not.
You can do it like this
<td> <button type="submit" [disabled]="!loginForm.valid" md-raised-button>Login</button></td>
I have a spring-mvc jsp table with a few input elements in the thead to be able to do some filtering. The thead does have a form as child first element.
<table>
<thead>
<form:form action="." modelAttribute="accountWrapper.theAccount">
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><form:input path="firstName"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><form:input path="lastName"/></div></td>
<td>email</td></tr>
</form:form>
</thead>
<tbody>
When checking the source I see:
<thead>
<form id="accountWrapper.theAccount" action="." method="post">
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><input id="theAccount.firstName" name="theAccount.firstName" type="text" value="search"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><input id="theAccount.lastName" name="theAccount.lastName" type="text" value="search"/></div></td>
<td>email</td></tr>
</form>
</thead>
<tbody>
As I'm expecting it should be.
But when I'm checking the javascript DOM, the form element is an empty element directly under <thead>, the <input> elements are outside the form. And form submission goes wrong.
<thead>
<form id="accountWrapper.theAccount" action="." method="post"></form>
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><input id="theAccount.firstName" name="theAccount.firstName" type="text" value="search"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><input id="theAccount.lastName" name="theAccount.lastName" type="text" value="search"/></div></td>
<td>email</td></tr>
</thead>
<tbody>
You cannot have a <form> element inside a <thead> element. This rule applies to all <table> sub elements except <th> and <td>. For whatever reason, Spring serializes renders the HTML with the <form> immediately closed.
Wrap your whole table with the <form>.
I'm developing a web application in asp(mobile).
When using the iPhone browser for entering some search text in the search text box (<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False></mobile:TextBox>) , the iPhone launches the search keypad and when I click the search button using the iPhone keypad it refreshes the full page, but clicking the search button below the textbox it is working fine.
Can anyone tell me how to fix this?
Here's my code so far:
<body>
<mobile:Form ID="frmSearch" Runat="server" Font-Name="NotSet" Font-Size="Small">
<mobile:DeviceSpecific ID="dsSearch" Runat="server">
<Choice Filter="isHTML32">
<ScriptTemplate>
<link href="StyleSheets/Common.css" rel="stylesheet" type="text/css"></link>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="Meta1" name="viewport" content="width=device-width; initial-scale=1.0;" />
</ScriptTemplate>
<HeaderTemplate>
<table cellspacing="2" width="100%">
<tr>
<td width="100%">
<uc1:Header ID="ucHeader" runat="server" />
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">
Find :
</td>
<td>
<mobile:DeviceSpecific>
<Choice="isHTML32">
<ContentTemplate>
<asp:DropDownList ID="lstGroups" runat="server" OnSelectedIndexChanged="LstGroups_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</ContentTemplate>
</Choice>
</mobile:DeviceSpecific>
</td>
</tr>
<tr>
<td align="right"> Search by:</td>
<td>
<mobile:SelectionList ID="lstSearchPreferences" Runat="server" BreakAfter=False>
<Item Selected=True Text="select" />
</mobile:SelectionList>
</td>
</tr>
<tr>
<td> </td>
<td>
<mobile:SelectionList ID="lstSearchOptions" Runat="server" BreakAfter=False>
</mobile:SelectionList>
</td>
</tr>
<tr>
<td> </td>
<td>
<mobile:TextBox ID="txtSearchData" Runat="server" BreakAfter=False>
</mobile:TextBox>
</td>
</tr>
<tr id="trContractorFilter" runat="server" visible="False">
<td align="right">
<mobile:Label id="lblContractorFilter" BreakAfter=False Runat="server" Visible="True" >
Results:
</mobile:Label>
</td>
<td>
<mobile:SelectionList ID="lstContractorFilter" Runat="server" BreakAfter="True" Visible ="True" >
<Item Selected="True" Text="Active Permits" />
<Item Text="All Permits" />
</mobile:SelectionList>
(your permits only)
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<mobile:DeviceSpecific>
<Choice="isHTML32">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Search" UseSubmitBehavior=true OnClick="BtnSearch_Click"/>
</ContentTemplate>
</Choice>
</mobile:DeviceSpecific>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<mobile:Label ID="lblError" Runat="server" Font-Bold="True" ForeColor=Red Visible="false" BreakAfter=False></mobile:Label>
</td>
</tr>
</table>
</HeaderTemplate>
</Choice>
</mobile:DeviceSpecific>
</mobile:Form>
</body>
In conjunction with this question and its answer using jQuery, you can write this same code in your page and do the client processing before firing the submit.
Additionally, you can use $.ajax() library functions to submit the form asynchronously(within the above discussed code block and not firing the form.submit() at all), which will eliminate any page refresh (no matter from where the form submit event is fired.)
<form id="hello-world" action="sayhello">
<input type="submit" value="Hello!">
</form>
You can attach an event handler like this:
$('#hello-world').submit(function(ev) {
ev.preventDefault(); // to stop the form from submitting
/* Validations go here */
//this.submit(); // If all the validations succeeded
$.ajax({
url:'your_form_target',
data:formData,
success:function(data,textStatus, jqXHR){
}
});
});
Set the Action attribute of mobile:Form to #.
That should cancel the default postback action of the form, which is executed when the Search button on the keyboard is hit.
Ref
By default ASP.NET controls make full page postback, to send page data to the server.
For handling AJAX request on asp.net you should use an ScriptManager and UpdatePanel controls or using a client side mechanism like jQuery AJAX.
The reason is that your search BUTTON isn't actually firing the form submission, it's firing a JS function: onClick="BtnSearch_Click"
BtnSearch_Click is probably preventing the default action (Submitting the form and reloading the page) from occurring which is what you need to do to your form's default submit action.
I'm not familiar with ASP, so i'm probably way off the mark but you should be able to put a
onSubmit="Btn_Click"
on the form, which the "search" button on iOS will trigger.