I'm using Apache BeeHive. My JSP contains a form (<netui:form>) with a dropdown box (<netui:select>) and a submit button (<netui:button>). When the submit button is pressed, the form's default action ("doAction1) will be submitted. I want a different action ("doAction2") to be submitted when an option is selected from the dropdown. (See Figure 1).
My first inclination was to create a JavaScript function that changes the form's action attribute to the new action name and then submits the form (see Figure 2), but this didn't work. I found out that the tag translates "doAction1" to a full URL like http://localhost:7001/app/doAction1.do.
The "doAction2" string that I pass to the JavaScript submitForm(form, newAction) method can't convert "doAction2" to an appropriate URL (well it could, but only in a kludgey way). I went looking for a netui tag that could convert a plain action name into a URL, but I couldn't find one.
So, what's the right way to accomplish this?
Figure 1 - JSP code snippet
<netui:form action="doAction1" method="post">
<netui:select dataSource="actionForm.field1"
optionsDataSource="${actionForm.field1Selections}"
onChange="submitForm(this.form, 'doAction2')"/>
<p/>
<netui:button>Submit</netui:button>
</netui:form>
Figure 2 - JavaScript function to change the form action and submit the form
<netui:scriptBlock placement="before">
function submitForm(form, newAction) {
form.action = newAction;
form.submit();
}
</netui:scriptBlock>
function submitForm(form, newAction) {
form.action = newAction + ".do";
form.submit();
}
or
<c:url var="newActionUrl" value="/the/path/to/the/action/doAction2.do"/>
<netui:select dataSource="actionForm.field1"
optionsDataSource="${actionForm.field1Selections}"
onChange="submitForm(this.form, '${newActionUrl}')"/>
Related
I am rendering a html page with a list of things with an option to edit any one of them.
Draft:
On clicking on any of the item, makes a server call and effectively an update in the database.
Now, What i want to do is, When the list is long and the page is scrolled all the way to the bottom (for eg. ITEM 1000) and the user makes any server request,
after the page is reloaded, the user should be scrolled down at the exact item. Is this possible?
What is a good way to approach this functionality?
I am aware of anchor tag and name attribute and then posting url.com/#anchorTagName. But in case of server call, we dont provide any urls, its just a form.submit
Any suggestions are much appreciated!
Anchor tag is the best approach url.com/#anchorTagName but as you said the server doesn't provide it.
Here are some other alternatives:
1. Session attribute:
Once the server call is made and the data is loaded successfully in the DB, set a session variable. (session variable will contain tag)
In the UI using scriplet, assign the session variable to a javascript variable.
Now on page load, let the javascript to get the variable and scroll to the particular location.
example:
<script type="text/javascript">
window.onload = function() {
var scrollNow = "#<%=session.getAttribute('')%>"
window.location.href = scrollNow; // this will take to the particular element based on the ID
}
</script>
Another option, is to append the location in query string. Same way get the location and let the javascript do its part just like before :)
Another option,
In the form submit, handle the event via javascript before submitting the form.
Construct the action url dynamically with the hash tag and send it to the server.
So when the server receives it, it will ignore the anchor tag and will process the data.
When the page refershes again, the page scroll to the previous location as the anchor tag will be there in the URL :)
I am using jquery FormWizard and would like to use submit button on last screen as a way to submit the form and go to next screen.
Issue is I am embedding this jquery script in my Java code. Right now I have a "submit" button from jquery form wizard and I have a "continue" button from my Java code. So user submits the form by pressing "submit" and then press "continue" to go to next screen. Not an ideal situation for user.
If I just use "continue" without pressing submit, it doesn't store any information of the form. Once I press "submit" and then "continue", all information on the form will be saved in the database. How can I use continue button as submit and also to proceed to next screen so that I don't need that submit button on last screen.
Script sc = new Script();
sc.add("$(function(){$('#formScreenQuestions').formwizard({formPluginEnabled: true,validationEnabled: true,focusFirstInput : true,disableUIStyles : true});});");
HEADER.add(sc);
Form form = new Form("criteria");
form.set(ID, "formScreenQuestions");
Div dh = new Div();
dh.set(ID, "lastStep");
dh.set(CLASS,"step");
Table vt = new Table();
vt.row();
vt.cell(text("Please press SUBMIT before pressing CONTINUE"));
==== showing some questions with checkboxes to select =====
dh.add(vt);
Div db = new Div();
db.set(ID,"navigation");
Table bt = new Table();
bt.row();
bt.cell("<input type='reset',id='back',value='Back' />");
bt.cell("<input type='submit',id='next',value='Next' />");
db.add(bt);
form.add(dv);
form.add(db);
You could add an "on submit" event to your form.
http://api.jquery.com/submit/
Make a server-side redirection if submit is ok, to the next page.
OR
On the submit callback make a
$("#continueButton").click();
If I understand correctly, formWizard just helps you divide your form in multiple steps using a wizard.
You cannot just bind click the button because it would trigger when ever one clicks next.
What you should do is use this event from formWizard, then you wouldn't be adding complexity since you wouldn't be overriding any of the functionalities of the plugin you're using :
$("#demoForm").bind("after_remote_ajax", function(event, data){
if(event.success && event.currentStep === finalStep) {
windows.location.href="URL to be forwared to";
}
});
Propably the best way is to use jQuery's submit event and using AJAX submit it to server:
$("#form-name").submit(function(){
$.post("submit-path", function(result){
// do something with result
});
return false;
});
If you are using JQuery -- why not used the Power of AJAX and make it more better user experience -
Define a jQuery event on Continue button :
$("#continue-button").click(function(){
windows.location.href="URL to be forwared to";
}):
Submit an AJAX Request on click of Submit Button(Look at the documentation of AJAX method of jquery has how to show processing icon"
AJAX Request :
$.ajax({
url : actionURL,
dataType : <your dataType>,
contentType : <your Content Type>,
type : 'post',
data : <bla bla>,
success : function(data) {
//Show Continue button
}
});
};
wouldnt it be better if you use the continue button in the jquery form, and remove the submit button from Java?
$(function(){
// bind a callback to the before_step_shown event
$("#demoForm").bind("before_step_shown", function(event, data){
if(!data.isBackNavigation){
doSubmit();
}
});
});
I think this is a design issue. If you are trying to create a multistep form where data are saved between each step, you should have a submit button on every step of the form, submit the data to the server, keep the track of the step using an input hidden value then send the next part of the form to the client. It is safer because your form will work even if javascript is not enabled client side. In such design, the process could be improved later to add an AJAX functionality.
If you do not need the data to be send between each steps, then you can do a single form with some kind of panel for each subforms that would be shown or hidden depending where the client is.
I have a apache click page having a form table with action links and a checkbox. Table also have paginator. once user select some entries from table by selecting checkboxes he can perform operations by selecting submit button on form. But checkboxes are not preserving their state when user move from one table page to other. I tried saving selected entries in static arraylist but it is not getting populated.
Click is a stateless framework. Quoting the documentation:
Control state is not saved and restored automatically by Click.
Instead, state saving and restoring is under full control of the
developer through a public API.
As you can see from the Stateful interface's doc, several controls implements that contract and using the "Search Table Page" example as a reference you can implement your use case.
Hth,
Gilberto
Try following steps:
1. make a hidden field on java page. add it to the form.
2. onclick of every checkbox set the value of hiddenfield using javascript function.
3. add dummy form to you htm page with dummy hidden submit. like
<form name="dummyForm" action="" method="POST" >
<input type="hidden" name="dummyHiddenCBSelected" value="" />
</form>
4. on java page table paging link call the javascript function to submit the above dummy form.
eg:
table.getControlLink().setAttribute("onclick", "tableAction(this); return false;");
and javascript function like:
function tableAction(_anchorObj) {
var linkHref;
linkHref = _anchorObj.getAttribute("href");
//Set the value in hidden field
var hiddenCBSelected = document.getElementById('your hiddenfield');
document.getElementsByName("dummyHiddenCBSelected")[0].value = hiddenCBSelected.value;
//Set the form href and submit form
document.getElementsByName('dummyForm')[0].action = linkHref;
document.getElementsByName('dummyForm')[0].submit();
}
i have a question about using request.getParameter(), i knew that it can use to post the value using request.getParameter, Is it necessary match request.getParameter and <input>???
My original code in HTML:
<INPUT type=submit name="submit" value="download">
In JSP:
String start = request.getParameter("submit");
Now I want to change a button and use div
div name="submit"id="submit" class="btnStyleFunc"
onclick="document.body.style.cursor='wait';this.disabled='true';
document.getElementById('form').submit();">
But it doesn't work, anyone can help me ?
Now i use the method below, but another problem is raised...the action does not stop...
String start = request.getParameter("submit1");
<input type=hidden name=submit1 value=download>
<div class="btnStyleFunc" onclick="document.body.style.cursor='wait';
this.disabled='true';document.getElementById('form').submit();">
Does anyone know what the problem is ?
A clicked submit button is a successful form control and its name/value pair will be submitted to the server in the form data.
If you submit a form with JavaScript, there is no clicked submit button, so it won't appear in the data. A div cannot have a name and is not a form control anyway — it isn't a submit button, even if it triggers JavaScript that submits the form.
Using a div with JavaScript also breaks the form for:
Anyone not using a mouse/trackpad/etc to navigate the page (a div won't get the focus when tabbing through interactive elements)
Anyone with JavaScript disabled
Anyone using a screen reader in forms mode (div elements are not form controls).
Use a real submit button instead.
My java webApp (struts2 and jQuery) has a jsp with a form:
<s:form id="theForm" action="stampaPosizioneFinanziaria" target="_new">
and a jQuery button:
<a id="stampaPerCliente">Stampa standard</a> // rendere by $('#tampaPerCliente').button();
On button click:
$('#stampaPerCliente').click(function(){ avviaStampa(0); });
...
function avviaStampa(tipoStampa) {
$('[name=tipoStampa]').val(tipoStampa); // I set a hidden field
$('#theForm').submit();
// tried document.forms[0].submit(); too, same behavior.
}
So, the new page opened (the form target is _new) calls an action that read the paramters form and displays a pdf.
Everything works fine BUT: on IE when I click the button first time it works, second time doesn't, third time does and so on.
The 'doesn't work' means the action has every input parameters null! I monitored the request and on IE there aren't request parameters! (even times, not odd times!)
It works fine on Chrome and FF.
Help please.
I solved using GET method for submission:
<s:form id="theForm" action="stampaPosizioneFinanziaria" target="_new" method="GET">
The POST method (default for struts2 s:form) caused this issue (?!!!?).