in a Spring MVC 2.5 application i'm using a spring <form:form> component and in this form a table with c:forEach is rendered.
In each row a submit button is placed in. If i start a submit by clicking a button i would like to knwo, which button has processed the submit.
<form:form commandName="formObject">
<table class="data-table" cellpadding="1" cellspacing="1" border="0">
<thead>
<tr>
</tr>
</thead>
<c:forEach items="${list}" var="document" varStatus="row">
<tr>
<td>
<input type="submit" value="${document.title}"/>
<td>
</tr>
</c:forEach>
</table>
</form:form>
THX.
Give the submit button a name. You can handle the request parameter from that button like any other parameter. Some browser might handle the value they give differently though.
<input name="submittype" type="submit" value="${document.title}" />
Related
I use the below code to repeat the selectList and like to access the individual onchange event of each slectlist. But it allows us to only create a common onChange event. Please refer the screenshot below.
screenshot of what i am trying to achieve
Here I have 2 selectList added to this visual force page.
The number of selectList is known only when the page is getting loaded.
Now when I change anyone of the selectList it automatically changes the selected value of other selectList, since event="onchange" action="{!getRoleSelectionChange}" is same for all selectList. - As it is added only in apex:repeat
The templateRoles collection here is updated in the constructor of SampleController with a RestAPI call. So the size and data for the templateRoles will be unknown initaly and we will get it only when the page is loaded.
Sample code I use
<apex:page controller="SampleController">
<apex:form enctype="multipart/form-data">
<table>
<tbody>
<tr>
<td>
<apex:panelGrid style="padding: 64; text-align: center; background-color: #F2F2F2">
<apex:repeat var="templateRole" value="{!templateRoles}">
<apex:outputPanel title="Role" style="padding: 32">
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<apex:outputText value="{!templateRole.name}" id="roleValue" />
</td>
<td>
<apex:selectList value="{!roleSelectedObject}" size="1">
<apex:selectOptions value="{!objList}" />
<apex:actionSupport event="onchange" action="{!getRoleSelectionChange}">
<apex:param name="roleName" value="{!templateRole.Name}" assignTo="{!mappedRoleName}"/>
</apex:actionSupport>
</apex:selectList>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</apex:outputPanel>
</apex:repeat>
</apex:panelGrid>
</td>
</tr>
</tbody>
</table>
</apex:form>
</apex:page>
I am trying to add mutiple selectList in a visual force page dynamically and do some changes based on the selection changes in the selectList. I also tried changing the design with apex:pageBlock but id doesnt work well for my case.
I'm having a table with multiple elements that are generated from a List and every table element from that list has a button.By clicking that button there is a post submit request which should bind the values from that table data element to a #ModelAttribute object in spring boot.
The problem is that i'm able to map the whole list but I want to bind only the table element where the button was pressed.
<div class="table-responsive">
<form th:action="#{/saveAd}" th:object="${object}" method="POST">
<table class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th>Image</th>
<th>Title</th>
<!-- <th style="width: 16.66%">Link</th> -->
<th>Price</th>
<th>City</th>
</tr>
</thead>
<tbody id="myTable">
<th:block th:each="element, itemStat: *{lista}">
<tr
th:onclick="'javascript:rowClicked(\'' + *{lista[__${itemStat.index}__].url} + '\');'">
<input type="hidden" readonly="readonly"
th:name="?"
th:value="${element.getUrl()}" />
<td>
<input type="hidden" readonly="readonly" th:name="img" th:value="${element.getImg()}" />
<img th:src="*{lista[__${itemStat.index}__].img}" class="size" name="img" />
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getTitle()}" />
<span th:text="*{lista[__${itemStat.index}__].title}"></span>
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getPrice()}" />
<span th:text="*{lista[__${itemStat.index}__].price}"></span>
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getCity()}" />
<span th:text="*{lista[__${itemStat.index}__].city}"></span>
</td>
<td><input class="btn btn-danger" type="submit"
value="Save"></td>
</tr>
</th:block>
</tbody>
</table>
</form>
</div>
The Controller:
#RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(#ModelAttribute("Value") ListCreationAutovitDto listCreationAutovitDto) {
return "home";
}
I have a hidden input type for every td which should map the values but i've tried naming it in different ways but i can't make it work.Are there any ways to bind only the values where the button was pressed?
Idea 1: Make each td contain a form pointing to your controller method. Then bind the values you want to pass to the model by using hidden input fields in the form. Each button would then do a submit for the form it is in.
Idea 2: If you're mapping json to your java objects in your app, you can construct the json request body in JavaScript to contain only the stuff you want for that request
Maybe the title is more confusing than the problem it self. Here's my situation, with Thymeleaf I show a table with a list of clients. It shows Name, LastName, a button to delete it and a checkbox to display it's state (if the user is active or inactive)
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : ${clientList}">
<td th:text="${client.name}"></td>
<td th:text="${client.lastName}"></td>
<td>
<a th:href="#{/delete_client/} + ${client.id}" class="btn btn-danger">Delete</a>
</td>
<td>
<input type="checkbox" name="my-checkbox" th:checked="${client.state} ? 'checked'">
</td>
</tr>
</tbody>
So far, no problem. But what I don't know how to do is communcate the controller when the user click the checkboxes, in order to disable or enable that particular client.
Something like what the button does to delete the client, but to change it's state.
I was told to use AJAX, but don't know how.
Thank you!
You can avoid ajax. For deleting-alike effect you can apply following steps to the td element containing a checkbox:
wrap up the checkbox in the form tag
provide the proper action attribute in the form. The action is an endpoint which handles updating of a client's state (similarily to/delete_client/)
provide onclick="submit();" attribute in the checkbox, which will trigger mentioned endpoint when the user clicks it
E.g.
<td>
<form th:action="#{/switch_client_state/} + ${client.id}">
<input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="${client.state} ? 'checked'">
</form>
</td>
I just learned about parsley.js and I'm trying to add it's validation capabilities to my project that is already wired up with knockout.js bindings. Here is the markup:
<form id="form-add-gift" data-bind="submit: addGift" data-validate="parsley">
<table class="table table-striped">
<thead>
<tr>
<th>Gift</th><th>Description</th><th>Url</th><th></th>
</tr>
</thead>
<tfoot>
<tr>
<td><input id="txtName" name="txtName" type="text" data-required="true" data-bind="value: newGift().name" /></td>
<td><input id="txtDescription" name="txtDescription" type="text" data-bind="value: newGift().description" /></td>
<td><input id="txtUrl" name="txtUrl" type="text" data-type="url" data-bind="value: newGift().url" /></td>
<td><button id="btnAdd" name="btnAdd" class="btn" type="submit" data-bind="disable: newGift().name.length > 0">Add gift</button></td>
</tr>
</tfoot>
<tbody data-bind="foreach: gifts">
<tr>
<td id="tdName" data-bind="text: name"></td>
<td id="tdDescription" data-bind="text: description"></td>
<td id="tdUrl" data-bind="text: url"></td>
<td><a id="btnRemove" class="btn btn-danger" href="#" data-bind="disabled: $parent.isClaimed, click: $parent.removeGift">Remove</a></td>
</tr>
</tbody>
</table>
</form>
When I click the "Add gift" button, my knockout.js addGift() function fires and the parsley.js validation occurs afterward. Obviously this is incorrect. Is there any way to get parsley.js to play nice with the knockout.js bindings?
I don't think parsley.js meant to work directly with KnockoutJs, but this can't stop you from using them both nicely.
Quick look through the Documentation -> Javascript - > Form you can use this method:
$('#form').parsley('isValid');
Useful if you want to integrate the form validation process inside
custom functions, without triggering error messages.
UPDATE
you can try this too:
$( '#form' ).parsley( 'validate' );
Useful if you want to integrate the form validation process inside
custom functions.
Below Spring form submits data to a Spring controller and works as expected.
How can I convert the checkboxes to buttons ? So instead of three checkboxes : 'isTest1,isTest3,isTest3' three buttons are displayed.
This then means instead of having one submit button I have three submit buttons with each button.
Here is my form currently :
<form:form method="post" modelAttribute="searchobj" action="redirect">
<table>
<tr>
<td><form:input path="param" /></td>
<td><input type="submit" value="Search"/></td>
</tr>
</table>
<table>
<td>isTest1</td>
<td><form:checkbox path="isTest1" /></td>
<td>isTest2</td>
<td><form:checkbox path="isTest2" /></td>
<td>isTest3</td>
<td><form:checkbox path="isTest3" /></td>
</tr>
</table>
</center>
</form:form>
I've tried linking the form directly to the submit button so instead of
<td><form:checkbox path="isTest1" /></td>
use
<td><input type="submit" value="isTest1"/></td>
but I dont how to access the value in the controller ?
I used :
<form:input type="submit" path="myPath" value="Tester"/>