I am using a Spring form with tabs, each tab again has a form.
The problems are
1)After the form submission, the error messages are displayed but the form content is cleared which should not happen
2)After the form submission the control immediately goes to the default tab which is the first tab in my case. I want the control to stay on current tab after transaction and not go to default tab.
This is the first time I am working using Spring MVC, JSP, jQuery. Please let me know if I have to make any changes.
administrator.jsp
Below is the code for Manage Users tab functionality.
jQuery:
$(document).ready(function() {
$('#btnManage').click(function() {
if($.trim($('#userId').val()) == ''){
$('#area5').html("User Id is a required field.");
}else if($.trim($('#region').val()) == 'NONE'){
$('#area5').html("Region is a required field.");
}else{
$('#manageUserForm').submit();
}
});
$('#btnCancel5').click(function(e) {
$('#manageUserForm').trigger("reset");
$('#area5').html("");
});
});
administrator.jsp:
<div id="tab5" class="tab">
<div class="devices" >
<form:form method="post" id="manageUserForm" modelAttribute="adminUser" action="/DeviceManager/admin/manageUser">
<div align=center class="message" id="area5">${serverError5}</div>
<div>
<div class="plLabelSearch">User Id:</div>
<div class="plinput"><form:input path="userId" type="text" size="29"/></div>
</div>
<div>
<div class="plLabelSearch">Region:</div>
<div class="plselect">
<form:select path="region">
<form:option value="NONE" label="------- Select One -------" />
<form:option value="A" label="A"/>
<form:options items="${regionList}"/>
</form:select>
</div>
</div>
<br>
<br>
<div>
<div class="plLabelSearch"> </div>
<div class="plinput"><a id="btnManage" class="abutton">OK</a></div>
<div class="plinput"><a id="btnCancel5" class="abutton">Cancel</a></div>
</div>
</form:form>
</div>
</div>
You need to re-render the page with the data from the original form submission.
In your case this probably means your form should contain a few hidden fields to allow you to determine which tab you are on, your JSP will need to be able to understand this data and use it to select the appropriate tab.
because you submission is not asynchronous,after you submit,the administrator.jsp is reset,so the error message is display ,owing to this code <div align=center class="message" id="area5">${serverError5}</div>
Related
My Java/Springboot/Thymeleaf app has a form called direct bind. On this form there is a modal that pops up when you click a button, in this modal you can attach a file. The submit button to the modal, does not seem to be registering or sending to the #Requestmapping. Any idea why and how to fix this?
I've tried setting the controller up like this instead #RequestMapping(value="/attachDoc", params="document"). I've also tried adding formnovalidate="formnovalidate" on the submit input. As well as moving it to the same controller file as the original form. Not sure what else to try.
HTML:
<div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="#{/attachDoc}" method="post" th:object="${newDocument}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="submit" name="attachNewDoc" value="Submit" class="btn btn-docModal"/></div>
</form>
</div>
</div>
Controller:
#RequestMapping(value="/attachDoc")
public String attachDoc(Model model, #ModelAttribute(value="newDocument") Document newDocument, #RequestParam("document") MultipartFile file){
Document doc=documentRepository.save(newDocument);
doc.setStorage(storageService.store(file));
documentRepository.save(doc);
return "directBind";
}
Define method=RequestMethod.POST in your mapping.
By default if you are not specifying any method in request mapping then it will be GET.
You are using post method in your thymeleaf but the mapping in the controller is for GET(By default)
So you have to change requestmapping like below.
#RequestMapping(value="/attachDoc",method=RequestMethod.POST) by specifying POST method.
So i have FormControl inside Repeating View and i set html for Repeating view as Wicket:container
I am trying to refresh formControl but because i am stripping wicket tags in output
it gives JS error.
i know wicket:container can not be refreshed. but i am not able to refresh control inside it. I tried setting
control.setOutputMarkupPlaceholderTag(true);
control.setOutputMarkupId(true);
And Html is Something like this
<form wicket:id="form">
<wicket:container wicket:id="repeatingContainer">
</wicket:container>
</form>
here is error i am getting
Cannot bind a listener for event "change" on element "id1a3" because the element is not in the DOM
i want to remove repeatingContainer html tag from output so it follows bootstrap form layout.
Update:
This code is inside the RepeaterView
<wicket:panel>
<div wicket:id="componentGroup">
<wicket:child/>
</div>
</wicket:panel>
This code wicket Child
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
ok so i am able to tackle this down.
I updated component Group div to wicket:container and leave the Repeater as div. So now i am able to refresh. and it works alright.
So this is how it will look like
<form wicket:id="form">
<div wicket:id="repeatingContainer">
<wicket:container wicket:id="componentGroup">
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
</wicket:container>
</div>
</form>
I have the following HTML-Code:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
</div>
And the following jQuery/Java-Code:
$(".slide-button").on('click', function() {
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
The toggle itself works perfectly. When I click on the slide-button the content will slide-down. However, after the slide-down animation is finished the content somehow "jumps up" to its final position.
How can I avoid this "jump" and get the content stays where it is after the slide-down animation is finished?
Thanks for any help :-)
I don't know exactly what your circumstances are, and whether you need <p>aragraph tags or not, but if you switch the <p> tags inside your "panels" to <span> tags it seems to fix your issue.
The HTML code I used which fixed the jump looks like this:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<!-- Here is the first change from a paragraph to a span tag -->
<span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<!-- Here is the second change from a paragraph to a span tag -->
<span>Test jquery menu2</span>
</div>
Also, just a friendly tip, Java is not the same as JavaScript. (: Keep that in mind when tagging your questions.
This is my first on posting here. I hope you understand my question!
<script language="JavaScript">
function setVisibility(id, visibility)
{
document.getElementById(id).style.display = visibility;
}
</script>
<% for(cart c: cart) {%>
<td> ......</td>
<td> ......</td>
<td> ......</td>
<td> ......</td>
<td>
<input type=button name=type value='Edit' onclick="setVisibility('DivQTY', 'inline');">
<div id="DivQTY" style="display: none">
<input type="text" name="qty">
<form action="doEditCart.jsp?id=<%= c.getID() %>" method="post">
<input type="submit" value="Save">
</form>
</div>
</td>
<% }%>
This Shows a table and, in every row, shows a "Edit" button.
My problem here is that, if i press any "Edit" button in any row, "TextBox" and "Save" button appears only in the first row.
In this capture I pressed Edit in the fourth row.
How to show TextBox and Save button in the row that I pressed the edit button?
Thank you.
Your for statement is creating different <div> elements with the same id attribute, what is not allowed.
As a solution, you could use the cart's id (c.getID()) as part of the div's id:
(...)
<input type=button name=type value='Edit' onclick="setVisibility('DivQTY<%=c.getID()%>', 'inline');">
<div id="DivQTY<%=c.getID()%>" style="display: none">
(...)
The problem is at below line where you are using same id for each div
<div id="DivQTY" style="display: none">
Element IDs should be unique within the entire document. Use different dynamic IDs for each element in HTML.
HTML 4.01 specification says ID must be document-wide unique.
Read more about it here Two HTML elements with same id attribute: How bad is it really?
This question already has answers here:
How can I retain HTML form field values in JSP after submitting form to Servlet?
(2 answers)
Closed 7 years ago.
Here is my code, how can i retain the values of the form when i click on the hyper reference link.(a href: bottom of the code)
<form action="APPServlet">
<div class="">
<div class="">Search For:</div>
<div class="">
<input type="text" size="45" align="right" name="searchRequest">
</div>
</div>
<div class="">
<div class="">Exclude:</div>
<div class="">
<input type="text" size="45" align="right" name="excludeWords">
</div>
</div>
<div class="">
<div class="">In Modules:</div>
<div class="">
<select name="modules">
<option name="module" value="all">All modules</option>
<c:forEach var="module" items="${modelObj.modules}">
<option name="module" value="${module}">${module}</option>
</c:forEach>
</select>
</div>
</div>
</form>
<!-- ahref outside the form , this does not work
&searchRequest=${searchRequest} <- Guess the value is out of scope
-->
<div class="div-table-row">
<div class="div-table-single-col">
${question.id} ${question.topic}
</div>
</div>
You have several possibilities, and all involve JavaScript.
When clicking on the link, change its href using JavaScript by appending all the values of the inputs of the form as parameters of the URL
When clicking on the link, add a hidden field to the form containing the question ID, change the action of the form to make it go to MCQApp instead of going to APPServlet, and submit the form
The cleanest one: when clicking on the link, send an AJAX request to a URL which responds with an HTML fragment (or data), and replace the section of the page that you want to update with this HTML fragment, thus leaving the form as it is in the page.
There are two ways, if you're working with a session, store it as an attribute of your session. But if you're not using sessions, you can use Cookies, just store the values you want in a new cookie and then call the cookie and obtain the values.
Sessions are cookies as well, but they have another functions, the cookies are simplier and help you to store values that you can reuse later. Best regards
Keep the data passed in a model and use it in the jsp like,
Keep all your Input variables in search model object and update it whenever search is called.Keep searchRequest in the request attribute before rendering the response.