Develop Reference

How to keep selected dropdown box value in next page dropdown

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>

JavaScript only loads once per tab? (Multiple "pages" with tables in single page)

Alright, so I'm creating a script to avoid activating a link in a parent div. I've added an image of the website to give you an idea of what it looks like and to make it easier for me to explain. The white tabs are controlled by Ajax and all of them are loaded when the Orders/Subscriptions page is loaded.
All the rows in the table are clickable, and the blue cogwheel shows a dropdown when you hover over it. This dropdown contains several links that need the javascript/jquery code to not activate the row link instead. The problem is that when you switch tabs, the js code won't run unless you reload the page (the active tab stays when reloaded), but the users of the website shouldn't have to reload the page every time they switch between the tabs.
I have absolutely no idea why the .js file only works on the active tab. Everything is written in Wicket/Java using a lot of Ajax events for this page.
JavaScript:
$(document).ready( function () {
$('.dropdown-menu > li > a').on('click', function(event) {
event.stopPropagation();
alert('Propagination Stopped');
});
EDIT:
Alright, so I now know it works if I add
location.reload();
when the tabs are clicked, but I kinda want to avoid this since that adds unnecessary loading time.

I figured out what the problem was. Since I use Ajax for the tabs I had to add
$(document).ajaxComplete(function { myFunction });
and put the onClick in there. That way it would load properly every time I switched tabs.
The invisible tables in the inactive tabs had display: none; which mean when they are set to display: visible; it isn't part of the DOM. So the script won't run unless page is reloaded.
Don't like answering my own question, but felt like the info should be shared.
Thanks for the help anyways guys!

You haven't shown how your script elements are defined and added to the DOM, so it's hard to be specific.
Once a script element has been added to the DOM (directly, or via markup), it is run once. If you want any functions defined by that script to be run again, you have to run them. So in your tab-switching code, add code to call a function if you want it to be run for that tab.
You also haven't shown how you're loading the tab content, or whether the tab content defines script tags. It's best not to have the tab content contain any more script than necessary. Instead, have a main script file loaded with the page that defines the main functions, and then at most have a single script in the dynamically-loaded tab content that executes a single function call to that already-loaded code. If you're loading via jQuery's load, it'll call the scripts for you unless you use a fragment identifier with load. (If you use a fragment identifier with load, it disregards scripts in the content entirely.)

I think this will help you!
the html code example
<ul id="ajaxContainer">
<li>the default content in your app</li>
</ul>
<nav id="pagination">
<ul>
<li><a class="active" href="/ajaxpath1">1</a></li>
<li>2</li>
<li>2</li>
</ul>
</nav>
<script src="jquerypath/jquery.js"></script>
<script src="appjspath/app.js"></script>
Code in your app.js as bellow
$(function() {
var $ajaxContainer = $('#ajaxContainer'),
CLSA = "active",
DOT = ".",
$pagination = $('#pagination'),
hasElMakeShow = function($el) {
//just make elment show hide
$el.show().siblings().hide();
},
appendNewEl = function($el) {
//new data requested should be append to container element
$ajaxContainer.append($el);
hasElMakeShow($el);
},
initBindEl = function(){
//init bind first active pagination el with its data elment
var $li = $ajaxContainer.find('>li'),
$active = $pagination.find(DOT + CLSA);
$active.data('el', $li);
},
switchNavA = function($el) {
//do some pagination switch active class work
$el.addClass(CLSA).closest('li').siblings().removeClass(CLSA);
};
initBindEl();//first bind current pagination
$pagination.delegate('>li a', 'click.page', function(e){
e.preventDefault();//prevent default jump
var $me = $(this),
isActive = $me.is(DOT + CLSA),
$targetEl = $me.data('el');
if(!isActive) {
if($targetEl.length) {
hasElMakeShow($targetEl);
} else {
var url = $me.attr('href');
$.get(url, function(data){
var $respondEl = $(data);
$me.data('el', $respondEl);
appendNewEl($respondEl);
switchNavA($me);
});
}
}
});
});

Save State of Checkbox in form table apache click

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();
}

Changing dropdown options

I am developing a musical store. In that application in makepayment.jsp I have four links for user choice and based on user choice I want change the options in my dropdown. How can I do that?

Look at the onChange event of the input component, and JavaScript.

get the combobox object by id or name in the javascript.
<select id="myCombo" name="myCombo">
</select>
var opt = document.createElement("option");
opt.text="something"
opt.value="something"
document.getElementById("myCombo").options.add(opt);
also you can assign id to options.

How to manipulate the history of the web page?

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/