We Keep Coding

Pagination issue with JSP

I am able to display a table when a user clicks a search button. But now I want to split the table into chunks of 20 rows where the user can click next or previous to go forward and backward through all of the data. I am not allowed to use JavaScript for this assignment. Only JSP, Java, HTML.
The two debugging out.print() calls are not showing up. A different page is being loaded after one of the buttons is clicked, but the two debugging out.print calls are not displaying any HTML. I have checked out How to know which button is clicked on jsp this post but had no luck.
<form method="GET">
<center>
<input type="submit" name="previous_table" value="Previous" />
<input type="submit" name="next_table" value="Next" />
</center>
</form>
</br>
<%
String val1 = request.getParameter("previous_table");
String val2 = request.getParameter("next_table");
try {
if ("Previous".equals(val1)) { // Get previous results
out.println("<h1>HELLO 1</h1>");
buildTable(rs, out, false);
}
else if ("Next".equals(val2)) { // Get next results
out.println("<h1>HELLO 2</h1>");
buildTable(rs, out, true);
}
} catch(Exception e) {
out.print("<center><h1>"+e.toString()+"</h1></center>");
}
%>
I also have a follow up question. If the user clicks next or previous button, will my current table on the page be overwritten by the new one? That is my intent but I don't know if it will work that way.
I WAS ABLE TO FIX IT BY DOING THIS:
<form method="POST">
<center>
<input type="submit" name="previous_table" value="Previous" />
<input type="submit" name="next_table" value="Next" />
</center>
</form>
</br>
<%
String val1 = request.getParameter("previous_table");
String val2 = request.getParameter("next_table");

you should add name with value for button after that you can get by parameter click value.
`<input type="hidden" name="myprevious" value="previous"/>
<input type="hidden" name="mynext" value="next" />
<%
String val1 = request.getParameter("myprevious");
String val2 = request.getParameter("mynext");
try {
if (val1 == "previous") { // Get previous results
out.println("<h1>HELLO 1</h1>");
buildTable(rs, out, false);
}
else if (val2 == "next") { // Go next results
out.println("<h1>HELLO 2</h1>");
buildTable(rs, out, true);
}
} catch(Exception e) {
out.print("<center><h1>"+e.toString()+"</h1></center>");
}
%>
`
I hope it will help you.
Thanks.

Try to use the subList() method of a List<>().
As explained here.
HOW TO IMPLEMENT IT ##
you can put an hidden input in your form to give you the last index for your list like :
<input type="hiden" value="${last_index_of_your_list + 1}" name="index">
Then in your servlet part you put like this :
int index = Interger.ParseInt(request.getParameter("index"));
if(index <= 0){
datalist = datalist(0, 19>datalist.size()? datalist.size() : 19);
}else{
if(clicked_on_next){
datalist = datalist(index, index+19>datalist.size()? datalist.size() : index+19 );
}else{
datalist = datalist(index - 40, index-20>datalist.size()? datalist.size() : index-20 );
}
}

You are using hidden fields but you need to use submit button for next and previous.
<input type="submit" name="myprevious" value="previous"/>
<input type="submit" name="mynext" value="next" />
Make sure both are define in form. when we submit form after that you will get button value in parameter.same my previous answer. because we can not get parameter value without submit form.
Thanks.

Why am I getting parameter value as null?

I hooked login.jsp and wrote following code in it:-
<script>
function a(){
var otp=document.getElementById("otpText").value;
document.location.href="?otp="+otp;
<% System.out.println(request.getParameter("otp")); %> //printing null
return false;
}
</script>
<form name="otp" method="post" action="" >
Enter otp:
<input type="text" name="otpText" id="otpText"/>
<input type="submit" value="Submit" onClick="return a()"/>
</form>
I typed some value inside otpText and that value is displayed in the url when I submitted the form. But when I am printing that value as in above code,it is printing null. I need that value as I want to store the same into session.Please help, any help would be appreciated.

If you change your code to
var otp=document.getElementById("otpText").value;
console.log (otp); // or alert (otp);
document.location.href="?otp="+otp;
you will see the value.

Switch returns no value

I have a form that includes a radio button, and I'm trying to turn the radio button into a "bootstrap switch" (http://www.bootstrap-switch.org/). This is how I'm currently doing it:
<input type="radio" name="myRadio" value="true">
<script>
$ ('[name="myRadio"]').bootstrapSwitch();
</script>
My radio button gets replaced with a bootstraps switch, but it's value is set to null regardless of wether the switch is turned on or off. If I remove the script and use a plain radio button, everything works as it's supposed to.
I want to retrieve the radio button value in a servlet like this:
String value = request.getParameter("myRadio");
What is wrong, and how can I fix it?

Attach switchChange event to bootstarp switch and then get it's state like
$("[name='my-checkbox']").bootstrapSwitch();
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
});

This is for those who have paired radio buttons with Enable/Disable kind of values
Original HTML:
<INPUT TYPE="RADIO" NAME="radio_active" VALUE="Yes" onClick="trunOff(0)" checked>Activated
<INPUT TYPE="RADIO" NAME="radio_active" VALUE="No" onClick="turnOff(1)">Deactivated
Replace above with HTML:
<input type="hidden" name="radio_active" data-on="Yes" data-off="No" value="Yes" data-onchange="trunOff">
<input type="checkbox" class="bs-switch-radio" data-hidden="radio_active" data-size="small" data-label-width="auto" data-on-text=" Activated " data-off-text=" Deactivated " checked />
jQuery:
jQuery('.bs-switch-radio').bootstrapSwitch();
jQuery('.bs-switch-radio').on('switchChange.bootstrapSwitch', function(e,state){
var hidden = jQuery(this).attr('data-hidden');
var jhidden = jQuery("input[name='"+hidden+"']");
var on = (jhidden.attr('data-on'))? jhidden.attr('data-on'): 1;
var off = (jhidden.attr('data-off'))? jhidden.attr('data-off'): 0;
var state_val = (state)? on : off;
jhidden.val(state_val);
var fnOnchange = jhidden.attr('data-onchange');
var fn = window[fnOnchange];
if(typeof fn === 'function') {
fn(state);
}
});

Detect dropdown change in JSP?

In jsp, is there any attribute to provide the information that values in the dropdown got changed?
Say Example:
I have dropdown country - On page load it have "US" in the dropdown and I'm changing to "UK" and then again changing to "US". In this case I have not done any change so I have nothing to save but if I click save button my page is getting submitted. Is there anyway to avoid this page submission.?

Yes, it is. But you have to use javascript, not jsp. Example code
html:
<form class="checked">
<input type="hidden" id="countrySelectInitial" value="UK" /> <!-- we need this element to store initial value -->
<select name="country" class="checkedInput" id="countrySelect">
<option value="US">US</option>
<option value="UK" selected>UK</option>
</select>
<input type="submit" class="submitButton" disabled />
</form>
js:
$(".checkedInput").change(function() {
var newValue = $(this).val();
var idValue = $(this).attr('id'); // we need id to retrieve initial value. Initial value is stored in element with id <id>Initial
var oldValue = $("#" + idValue + "Initial").val();
if(newValue === oldValue) {
// if value don't changed - disable button. user have no possibility to submit form
$(this).parents("form.checked").find(".submitButton").attr("disabled", true);
} else {
// if value changed - remove "disabled" attribute. User can click button and submit form
$(this).parents("form".checked).find(".submitButton").removeAttr("disabled");
}
});

Dynamically adding duplicate (unique ID) form Div elements using javascript

I have a form having fields like:
<div class="row">
<div class="field">
<input class="" type="text" name="college" id="college"/>
</div>
<div class="field">
<input class="" type="text" name="city" id="city"/>
</div>
<div class="field">
<input class="" type="text" name="zip" id="zip"/>
</div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>
I have a Add extra address button that add's another copy of div "row" to the page. I need to send all data from the page as a request to the Controller. How do I write a script that add's extra div copy onclick of the button and also appends a unique id to each of the new fields?

See working example in Dojo: http://jsfiddle.net/phusick/PeQCN/
And the same code in plain vanilla JavaScript: http://jsfiddle.net/phusick/Rceua/
The Dojo version employs dojo/_base/lang::clone as #Peter Rader mentioned:
// var lang = require("dojo/_base/lang");
// var array = require("dojo/_base/array");
// var query = require("dojo/query");
// var domAttr = require("dojo/dom-attr");
var counter = 0;
function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
counter++;
var out = lang.clone(sourceNode);
if (domAttr.has(out, "id")) { out.id = bump(out.id); }
query("*", out).forEach(function(node) {
array.forEach(attributesToBump, function(attribute) {
if (domAttr.has(node, attribute)) {
domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
}
})
});
function bump(/*String*/str) {
return str + "_" + counter;
}
return out;
}
How to use the aforementioned duplicate function:
// var dom = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");
var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);
domConstruct.place(node, sourceNode, "after");

I have written code to achieve this.
Logic:
1) get the innerHTML of desired parent
2) replace id in the text
3) Insert the new html
See a working code
Pardon me for bad style of coding on JS part. I am not use to coding directly on DOM. I prefer JQuery.

Try
to use this snipplet (see usage)
http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone