I am implementing a Web-based Java app using Spring MVC.
What I am doing now is to provide a page which allow users to select from a set of radio buttons and export a set of data in CSV by clicking the "Submit" button.
However, I have encountered a situation.
After users download one CSV, whenever they want to download another one, if they click "Submit" button again, the download process will not be fired and a dialog saying "Action already submitted. Wait until the action is complete." will show up.
Here is my codes:
<form:form action="handle_export?user_id=${userId}" method="post">
<div>
<table>
<tr>
<td>
<input id="set0" type="radio" name="exportType" value="0"/>
</td>
<td>
<label for="set0">dataset0 Export</label>
</td>
</tr>
<tr>
<td>
<input id="set1" type="radio" name="exportType" value="1"/>
</td>
<td>
<label for="set1">dataset1 Export</label>
</td>
</tr>
</table>
</div>
<input type="button" class="submit button-1" value="Download" name="bottom_Download" />
</form:form>
Any chance that I can fire the "Submit" button multiple times?
Thanks a lot.
I've been struggling with blackboard and I have solved doing:
-Remove "action" from FORM
-Create a function on JS, by example: generateCSV()
-Function would be like that:
var userid = document.getElementById('userid');
window.open('handle_export?user_id=' + userid);
On handle_export, retrieve the values following:
String userid = request.getParameter("userid");
// ...
// generate and download file
This way, its opened in a new window and blackboard not show up the dialog saying "Action already submitted. Wait until the action is complete." .
I hope this helps, regards.
Related
I have a Spring MVC Form that I am building in a JSP, which will require entering an account number in a field. When I enter that number, I want to run a query to the database to pull back related information for that specific number. This data will then populate other fields on the form.
This is my Spring bind code in the JSP for the account number that will be entered. So, as soon as I enter this number, a DB query should trigger, to bring back the data for the other fields.
<spring:bind path="strExpenseAcctNum">
<div class="form-group ${status.error ? 'has-error' : ''}">
<label class="col-sm-2 control-label">Expense Account Number :</label>
<div class="col-sm-10">
<form:input path="strExpenseAcctNum" type="string" class="form-control " id="strExpenseAcctNum" placeholder="strExpenseAcctNum" />
<form:errors path="strExpenseAcctNum" class="control-label" />
</div>
</div>
</spring:bind>
From my research, I am thinking a combination of Javascript and JQuery might be the best approach, but being new at this, I am not sure how to configure it.
Any help would be greatly appreciated.
Thanks,
Dave
#Dave
First implement your form using spring form tags, something like below.
<form:form method="POST" action="/spring-mvc-example" modelAttribute="example">
<table>
<tr>
<td><form:label path="number">Account Number</form:label></td>
<td><form:input path="number" id="number"/></td>
</tr>
<tr>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form:form>
Then use Jquery's focusout method to make an Ajax call in the background as soon as the user focus outs from account number field. Then in the success block, just parse it if needed and bind to your other fields using jquery's val method like below.
$("#number").focusout(function(){
$.ajax({
type:"POST",
url:"https://example.com/getDetails",
success: function(data) {
//Response from the controller comes here
var json = JSON.stringify(data);
//Bind it to fields like these
$("#firstname").val(json.firstname);
}
});
});
Hope this works for you, let me know if any questions.
I am dynamically filling a table which contains a radio button in each row. How can I go about determining in which row the radio button has been selected using Java?
<form action='ReceptionManagerController' method='POST'>
<table >
<tr style="text-align:center">
<th>Check-In</th>
<th>Check-Out</th>
<th>Type</th>
<th>Assign Room?</th>
</tr>
<c:forEach var="item" items="${unassignedBookings}">
<tr>
<td>${item.checkIn}</td>
<td>${item.checkOut}</td>
<td>${item.size}</td>
<td><input type="radio" name="checked"></td>
<td><input type="hidden" name="id${count}"></td>
<td><input type="hidden" name="checkIn${count}" value="${item.checkIn}"></td>
<td><input type="hidden" name="checkOut${count}" value="${item.checkOut}"></td>
<td><input type="hidden" name="type${count}" value="${item.size}"></td>
<c:set var="count" value="${count + 1}" scope="page"/>
</tr>
</c:forEach>
</table>
<input type="submit" name="action" value="Assign Booking"/>
</form>
If I give each radio button the same name, then only one can be selected at a time. However, this stops me from determining uniquely which button has been pressed.
Any suggestions?
Thank you for your help.
I had a similar problem last year while working on a struts 1.3 based web application. You can refer to the this link. I hope it will help you. If still its not clear to you, let me put some try on it.
You can take an ArrayList of your bean type(Using Generics) having the setter and getter for it and keep the appropriate values for all the bean objects and add all those objects one by one in your ArrayList. After that iterate the ArrayList in your JSP to display the properties along with radio button. Rest of all is explained in given link.
Note: Your bean class must have a property with proper getter/setter for the radio button.
By the form that I can see, Check-Box seems to be appropriate choice rather than Radio Button. As far as capturing the selection is concerned, you can follow same strategy that you are doing for rest of the form elements, suffix count value to radio-Button or check-box to give them uniqueness.
Am using Liferay portal 6.1.1 CE.
In my liferay portlets jsp page - view.jsp, I have a form with 2 textfields and 2 radio buttons (user can select only one) and a submit button.
When I click on any of the radio buttons, control goes to a script function which is working properly.
Now I want to pass the values of 2 textfields to the script function. I tried a lot, but no use.
How can I achieve this?
Help me..Thanks in advance.
<script>
function dif()
{
}
</script>
<form name="<portlet:namespace/>fm" method="post" action="<%=updateBookURL.toString()%>">
<table>
<tr>
<th>Leave Application</th>
</tr>
<tr>
<td>Employee <font color=red>*</font></td>
<td>
<input type="text" name="<portlet:namespace/>name"/>
<input type="text" name="<portlet:namespace/>eid" />
</tr>
<td>
Date <font color=red>*</font>
<input type="text" id="<portlet:namespace/>fd" name="<portlet:namespace/>
</td>
<td>
<input type="radio" name="<portlet:namespace/>f" id="f" value="1st half" onClick="f()"/>
First Half&=
<input type="radio" name="<portlet:namespace/>f" id="f" value="2ndhalf" onClick="f()"/>
Second Half
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="save data" size="100px"/></td>
</tr>
</table>
</form>
Getting the value of the text in javascript function is nothing new in liferay it is plain old javascript, following are some links and examples which would help you (the code which I have written would go in your custom function you define within the <script> ... </script> tags):
Get input text value using:
var fdTextValue = document.getElementById("<portlet:namespace/>fd").value;
Get input text value using jQuery (the only problem with this is you have to include jQuery library in your portlet or theme, since starting from Liferay-6 you have Alloy UI included by default):
var fdTextValue = $("#<portlet:namespace/>fd").val();
/* or */
var fdTextValue = $("#<portlet:namespace/>fd").attr('value');
Get input text value using Alloy UI of Liferay:
AUI().use(function(A) {
var fdTextValue = A.one('#<portlet:namespace/>fd').get('value');
/* or */
var fdTextValue = A.one('#<portlet:namespace/>fd').val();
});
Some of the following links might also help you using Alloy UI:
Working with Elements and Events with Alloy UI.
Alloy UI API
It is very simple.
on click event of then in js define this function.
<script>
function callFun()
{
// Here you can use jquery easily
var name = $("#name").val();
alert(name);
}
</script>
I am implementing a search functionality in a website I am building, which involves searching by the md5 hash of the name of the file submitted and searching by the notes associated with each submitted file. So, I should detect as to which button is pressed "Search by MD5" or "Search by Notes". This is the code I have:
JSP code for the form:
<form id="search" name="search" action = "search.do"
method="POST" enctype="multipart/form-data">
<table align = "center">
<tr>
<th colspan="4" bgcolor="#004276"><font color="white">
Search for Sample
</th>
</tr>
<tr>
<td><input name="md5" type="text" value="${form.md5}"/></td>
<td><input name="md5search" type="submit" value="Search by MD5"/>
</tr>
<tr>
<td><input name="notes" type="text" value="${form.notes}"/></td>
<td><input name="notessearch" type="submit" value="Search by Notes"/>
</tr>
</table>
</form>
search.do is mapped to SearchResultsAction.java. Code in Java action class (SearchResultsAction) which handles the request is:
if(request.getParameter("md5search").toString().equals("Search by MD5")){
searchSubmissionsList = submissionsDAO.searchSubmissionsByMD5(form.getMD5());
}
if(request.getParameter("notessearch").toString().equals("Search by Notes")){
searchSubmissionsList = submissionsDAO.searchSubmissionByNotes(form.getNotes());
}
But the problem I am facing here is that, request.getParameter("md5search") and request.getParameter("notessearch") return null for some reason. I have been working on this for a while and have not been able to figure it out. The weird thing is that it once worked for me sometime back when I was working on another project. Am I missing something here?
It's null because you used multipart/form-data form encoding instead of (default) application/x-www-form-urlencoded. Basically, you have to (let Struts) extract the text fields from the multipart form data body the same way as you (or Struts) extracted the uploaded file. Or, as there is actually no <input type="file"> field in your form at all, just remove the enctype attribute altogether.
See also
Does form with enctype="multipart/form-data" cause problems accessing a hidden field
I'm working in a very simple and small web application, it is a jsp that handles a shopping cart.
What I do at this point is to iterate through all the products that are stored in the car and add them one by one to the jsp with each iteration.
This is the code that adds a row to the jsp in each iteration:
<tr>
<td>
<input type=text name=Quantity value=<%=quantity%>>
</td>
<td>
<input type=text name=id value=<%=id%>>
</td>
<td>
<input type=submit value="Delete" onclick=<%CustomSubmit(request, id); %>>
</td>
</tr>
As you can see I add to the end of each row a submit type control with a custom method for handling Click events, the use of this control is to remove from the car the respective product.
The problem that I have is that when I click in the delete button of a product, the id that is passed to the CustomSubmit(...) method is not the id of the product that I'm trying to remove but the id of the last product added to the jsp.
So, my question is how can I get the correct id from the item that I'm trying to remove?
The way i use to do it is as follows:
Replace
<input type=submit with a button
<input type="button" value="Delete" onclick="deleteIt('yourid');" />
add the deleteIt javascript function, in the function you fill a hidden input field with the id.
Then submit the page and the correct id gets passed to your page
Little sidenote its always prudent to escape all your Strings
dont use <input type=submit but use <input type="submit"
maybe like
<td>
<input type="text" name="id" value="<%=id%>">
</td>
<td>
<input type="button" value="Delete" onclick="deleteItem('<%=id%>')">
</td>
I assume your cart is a list of objects, each having the attributes id and quantity. So I would expect you code to look something like this (noting Peter's answer about using a 'button'):
<input type="button" value="Delete" onclick="CustomSubmit('<%=cartItem.id%>');"/>
I'm not entirely sure what you are trying to do with the 'request' parameter in your original code but if this is the HTTP request all you will get when you try to write it to the JSP is the result of the request.toString method.