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();
}
Related
I have a situation that i can't handle and thats why need your help.
I have a jsp page (mention as A in below pic) where there are many rows and each of them can be edited.
At the end of the A jsp page, there is an option to print the page data.
Now, if some body clicks on the edit link/button, another page will open contain the data for that particular row and user can modify the data in the second page(i,e B).
Now, i want, as soon as the user save the B page, A page should be refreshed automatically to provid the updated data for printing.
Please guide me on how to acheive that . I'm using Spring MVC framework for the java application.
The Spring MVC way to meet your requirement is:
the Edit buttons in page A should be links calling page B with the id of the line to edit, something like Edit
the SaveAndClose button in page B should be a submit button that posts the edited values to a controller method. After server side processing, the controller method should redirect to page A. As a side effect, you use the PostRedirectGet pattern which avoids the ugly do you want to send again ... ?"
#RequestMapping(path = "...", method = RequestMethod.POST)
public String saveAndClose(...) {
...
return "redirect:/path/to/pageA";
}
Of course this will display all pages in same window.
If you want to redisplay the window containing pageA on the Save & Close from page B, still allowing the save to be known to the server, you should redirect to a special page (say pageC) that just contains javascript code asking the browser to redisplay pageA. You can either pass the name of the window containing pageA in a hidden field, or you can decide that as the programmer of the web application you know where it should be.
It can be achieved like this. Follow the steps mentioned
1] When you click on edit button in Page A, pass the id of the row to Page B as request parameter.
2]In Page B JSP receive the id of the row and store it in a hidden element.
3]Create a JavaScript function in Page A which should receive row Id and Modified data as parameter. Lets name it this function as updateRows(rowId,modifiedData). In this function write code to update the with id 'rowId' with modified data using javascript
4]Now When you click on 'Save & Close' Button in Page B. Save the data using call to server. If save succeeds then invoke the function updateRows passing it rowId stored in hidden element and modified data as parameters. This function will update the DOM with latest data.
This way you will avoid making server call to refresh the data
There is one more way if you don't want to use ajax.
In Page A define a javascript function refreshPageA(). In this function add page refreshing logic.
When you click on 'Save & Close' button in Page B save the data in server and forward to a plain jsp. In this JSP declare a onload handler. Inside onload handler add following code
opener.refreshPageA();
window.close()
This will refresh pageA and close page B window
My html page is divided in two and contains sidebar and content, in sidebar I have two dropdown boxes, one for school year and another for student name in respective school year selected in 1st dropdown and next is submit button. When I click on submit button it will redirect to next page and next page also looks same but in content page it shows selected student profile, in side bar the same two dropdowns will be there. The problem I am facing here is, first I will select school year and name. Its fine, when it goes to next page the dropdowns will be at initial stage but I want the selected year and name to be displayed on dropdown box, how can I do this?
Some one suggested me to keep the values selected in session after it goes to next page set the value of the dropdown.
Here is my code for dropdown,
<select style='width: 200px;'
id="combo_zone11" name="alfa1">
<c:forEach var="grade" items="${gradeInfo}">
<option id='syear' value="" selected="selected">
<option value=${grade.getDropDownId()}>${grade.getDropDownName()}</option>
</c:forEach>
</select>
How can I keep selected value in next page dropdown. please help me in this.
You could do this in many ways.
Since you're working in java, you can set the selected values to a hidden field, and while redirecting to next page you can set the values to request object.
Or if the target browsers support HTML5 localStorage, you can make use of it - on dropdown change, save the selected option to local storage using javascript. in the second pages load event, get the values from local storage and set the drop downs respectively.
Something like -
//Script in page1
window.onload = function(){
var dd = document.getElementById('combo_zone11');
dd.addEventListener('change',function(){
localStorage.setItem('ddValue', this.value)
});
}
//Script in page2
window.onload = function(){
var ddValue= localStorage.getItem('ddValue');
var dd= document.getElementById('combo_zone11');
for(var i = 0;i < dd.options.length;i++){
if(dd.options[i].value == ddValue ){
dd.options[i].selected = true;
break;
}
}
}
You can also make use of cookies, sessionStorage, queryStrings etc each method has it's own advantages and disadvantages...
Use select=selected by passing the id
like
<option value="${GroupLi.partyClassificationTypeId if_exists}" selected="selected"> ${GroupLi.description?if_exists}</option>
GroupLi is the list name used to iterate
as:
<#list Group as GroupLi>
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.
Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/
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}')"/>