I want to place two separate file upload panels on page, one is for images, another for other files. Each panel contains a form with AjaxButton inside. First I developed the first panel, it worked as expected. But when I added another one, the second AjaxButton inside a form is not responding when clicked. Instead, when I click on the first button, the second one responds. What could be the reasons for that?
Here's the first panel's HTML:
<wicket:panel>
<div wicket:id="form-container-img">
<form wicket:id="form-img">
<img wicket:id="releaseImage" class="thumbnail" />
<p>
<label>Select file :</label>
<input wicket:id="fileUpload-img" size="40" type="file"/>
<input wicket:id="uploadButton-img" id="uploadButton" type="submit" value="Upload" />
</p>
</form>
</div>
</wicket:panel>
And the second one:
<wicket:panel>
<div wicket:id="form-container-album">
<form wicket:id="form-album">
<span wicket:id="releaseName" />
<p>
<label>Select file :</label>
<input wicket:id="fileUpload-album" size="40" type="file" />
<input wicket:id="uploadButton-album" id="uploadButton" type="submit" value="Upload" />
</p>
</form>
</div>
</wicket:panel>
So now, when both panels are in place, clicking uploadButton-album does nothing but it responds by clicking uploadButton-img.
EDIT:
<wicket:panel>
<div wicket:id="uploadPanelReleaseImg"></div>
<div wicket:id="uploadPanelReleaseAlbum"></div>
</wicket:panel>
In html markup, the id attribute should always be unique on the page. I'm not sure it's required by any spec, but it's generally regarded as good practice, and things tend frequently to depend on it.
If you need to control the id (because you're referencing it in JavaScript and it's easier than figuring out what id Wicket generated), you need to manage this manually.
If you simply omit the id attribute, Wicket will generate one based on the wicket id, and guarantee uniqueness on the page.
Based on the comment thread, this appears to have been the problem.
Related
I am building a web app that includes some features that can take a few seconds to complete such as importing 2000+ entities after clicking on a link.
One such feature first has the user choose a CSV file, uploads it to the server and then iterates through it line by line to create the associated entities and save them in the database.
Here is an example of how the JSP page looks :
JSP
<form method="POST" enctype="multipart/form-data" action="<c:url value="/import/importFormulary" /> " class="form-style-7">
<ul>
<li>
<label> File : </label>
<input type="file" name="file" accept=".csv"/>
</li>
</ul>
<input type="submit" value="Upload and Import" />
<input type="reset" value="Reset" />
</form>
I would like the submission of this form to trigger some sort of "please wait" overlay on the page. Something like this would be REALLY nice : http://tobiasahlin.com/spinkit/
I understand the "waiting for localhost" message is the controller doing its thing in the background which means the page this form is on is technically not active anymore. Knowing that fact, i'm struggling to figure out how to implement this. I have a place in my app where i do an AJAX request every second to refresh the content of a table and I have a feeling this is a direction to explore in order to achieve the result i want but seeing an example of a similar thing being done would be very helpful.
How does one show a spinning circle of please wait on the current page while waiting for the underlying controller to finish processing?
I settled with something like this, courtesy of font awesome :
<a th:href = "#{'/export/formularyAdd/' + ${facility.id}}" class="btn btn-outline-info eBtn"
title="Export Formulary Add Messages" onclick="showPleaseWait()">
Wrote this function in an included JS file :
function showPleaseWait()
{
$('.modal').modal('show');
}
<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 200px;">
<span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>
<p class="please-wait-message">Please wait</p>
</div>
</div>
</div>
The following import is on my page :
<link rel="stylesheet" th:href="#{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>
And finally this maven import :
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.7.0</version>
</dependency>
This lets the controller do its thing and displays the progress spinner until the page is redirected.
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>
<center>
<form class="form-horizontal" action="${pageContext.servletContext.contextPath}/LargeLandmarkListGet" method="post">
<div class="form-group">
<label class="control-label col-sm-2" for="SLLRID">SLLRID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="SLLRID" placeholder="Enter SLLRID...">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</center>
That is the particular definition of the action in the JSP.
String SLLRID = request.getParameter("SLLRID");
This is how I am trying to get it in the servlet, within the doPost method. However, SLLRID is always null. I've tried everything I can think of but I cannot get it to return the inputted value. However, if I hardcode the value, everything works perfectly, so I think there is something wrong when communicating between the JSP and the servlet.
What I Have Tried:
Changing the name in for in the label definition, so that id and for are named differently
Adding an id value to the button
Hardcoding the value to verify the servlet
Trying a get rather than a post (though that seemed wildly inappropriate)
Testing other servlets with the same JSP (this worked, though not with this particular submission id)
Ensuring that everything that needed entries in web.xml had said entries made
The form sends the data based on the name attribute. So instead put: <input type="text" class="form-control" id="SLLRID" name="SLLRID" placeholder="Enter SLLRID...">
Kinda new to wicket and im wondering if its possible to use a AjaxButton in order to get form values from forms within the first form...
For example, using the "ajaxButton" below would it be possible to also get the value of "anothervalue" even though its not in the same form?
<form>
<input type="submit" wicket:id="ajaxButton" />
<input type="text" wicket:id="aValue" />
<panel>
<form>
<input type="text" wicket:id="anothervalue" />
</form>
</panel>
</form>
Wicket supports nested forms. When you submit the outer form, the inner one should also processed (validate params, update models).
in my jsp, when i navigate through tab key it skips my Save and Reset button. and move to next component in my page. even though i have not used tabindex in my jsp files. please suggest what could be the reason. thanks
code is like:
<div>
<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"/>
<input type="submit" class="button" name="_eventId_search" value="Search"/>
<span class="save_button_common" onClick="submitForm('save')">Save</span>
<span class="reset_button_common" onClick="submitForm('reset')">Reset</span>
</div>
May be because it is not input type , you can explicitly try setting tabIndex
Try:
<div>
<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}"/>
<input type="submit" class="button" name="_eventId_search" value="Search"/>
<input type="button" class="save_button_common" onClick="submitForm('save')">Save</input>
<input type="button" class="reset_button_common" onClick="submitForm('reset')">Reset></input>
</div>
Note if it's a form you need input type="button" rather than just using <button> which you can otherwise just for straight links that don't submit a form. This is particularly relevant with Internet Explorer that treats the button tag somewhat differently to other browsers (submitting the "value=" rather than the enclosed text or something like that)