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>
Related
How can I loop through each option in dropdown, while each option opens a new link on computer and after finishing working with the current option, I need to go to the next option of dropdown. Now, to get to the next option I am coming back to the window, where there is a dropdown and I am clicking next option from there. So, is it possible, to get to the next option right after I have finished working with the current one?
When option is selected, the linked document is opened in the parent frame, it means the link is opened in the same page. It has _parent tag, it acts the same like <a href="https://www.w3schools.com" target="_parent">
<select id="ab" name = "ab"
onchange = "javascript: var sel = getElementById('ab').selectedIndex;
var val = getElementById('ab').options[sel].value;
parent.location='http://ab/football/player_detail.php'+val;">
<option value='?rez=77777playerNid=1&controls=2:4:5'>Nike.com</option>
<option value='?rez=464677playerNid=4&controls=2:4:5'>diablo.com</option>
You can try following code:
UPDATED:
Select select=new Select(driver.findElement(By.id("ab")));
for(int i =0; i<select.getOptions().size();i++){
select = new Select(driver.findElement(By.id("ab")));
//selecting options
select.selectByIndex(i);
/*you can do nour work here depending upon option selected
* .
* .
* .
*/
driver.navigate().back();
}
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 register form in which i want when the user selects an item from a first Select to create dynamically a second select with items from the database which are compatible with first selection.
For example i have 2 select Lists the first with Lessons and the second with professors.When i select from the first Select a lesson the Second Select Lists must have only professors of this lesson.
I am using jsp,java and i want to avoid ajax is this possible?
Thank you!
Yes it's possible.
However without AJAX, you would have to load all of the data with the page. That means storing the list of professors associated with each lesson in either a Javascript array or in a hidden HTML element from which you can retrieve the data later on.
You may avoid ajax by using one of those solutions:
Load all the professors of all the lessons when displaying the form, and store them in some JavaScript structure. When the selection of lesson changes, get the associated professors from this JavaScript structure. This might mean loading too much data at once, though
When the lessons selection changes, submit the form and redisplay it with the select box of professors populated.
Both of the solutions need JavaScript, and I really don't see what you gain by not using AJAX, though.
You might avoid JavaSCript completely with the second solution, but the user would have to click a submit button to load the second form.
Yes it is possible,
create two select boxes with the professor and lessons list and hide them by default. So attach event "onchange" on your first select box, when professors are selected show list with professors, when Lessons are selected show list with Lessons and hide Professors. e.g.
<select id="cbOne" onchange="show(this);">
<option value="0">Select</option>
<option value="1">Professors</option>
<option value="2">Lessons</option>
</select>
<select id="cbLessons" style="display: none;">
... your list
</select>
<select id="cbProfessors" style="display: none;">
... your list
</select>
This is method for JavaScript show
<script language="javascript">
function show(el)
{
var professors = document.getElementById('cbProfessors');
var lesssons = document.getElementById('cbLessons');
if(el.value == "0")
{
professors.style.display = 'none';
lessons.style.display = 'none';
}
else if(el.value == "1")
{
professors.style.display = '';
lessons.style.display = 'none';
}
else if(el.value == "2")
{
professors.style.display = 'none';
lessons.style.display = '';
}
}
</script>
I hope that this will help you.
I have a combobox with an option "other". user can select an entry from the list or select option "other". if they select "other" a text box will disply below to enter a new account number. see the code below:
<td>1. Account Number<span class="bodyCopy"><font color="#ff0000"> * </font></span>:
<html:select name="reDataForm" property="Member.accountNumber" styleClass="formContent"
style="width:80px" onchange="showfield(this.options[this.selectedIndex].value)">
<html:options collection="<%= WorkConstants.NewDropdowns.PACCT %>" property="value" labelProperty="label" styleClass="formContent"/>
</html:select>
<div id="div1"></div>
It works fine. But when the page refreshes, the text box disappears as no code to keep it there.
1)how do I keep the text box if the use was selected "Other" and entered a new account number in the text box ? OR if we can add the text box value into the dropdown list, that will also work.
2) Also how to set the text box value into the same variable Member.accountNumber ?
please help me !!!!
Use a little bit of javascript on an onLoad event to check if other is selected, and display the text box
You can't submit the value as the same name as the select box. instead, submit as a second name and process accordingly in your ActionForm on the serverside.
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/