Passing array values using Ajax & JSP
- by Maya
This is my chart application...
<script type="text/javascript" >
function listbox_moveacross(sourceID, destID)
{
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true)
{
option = src.options[count];
newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption,null); //Standard
src.remove(count,null);
alert("New Option Value: " + newOption.value);
}
catch(error)
{
dest.add(newOption); // IE only
src.remove(count);
alert("success IE User");
}
count--;
}
}
}
function printValues(oSel)
{
len=oSel.options.length;
for(var i=0;i<len;i++)
{
if(oSel.options[i].selected)
{
data+="\n"+ oSel.options[i].text + "["+ "\t" + oSel.options[i].value + "]";
}
}
type=document.getElementById("typeId");
type_text=type.options[type.selectedIndex].text;
type_value=document.getElementById("typeId").value;
}
function GetSelectedItem()
{
len = document.chart.d.length;
i = 0;
chosen = "";
for (i = 0; i < len; i++) {
if (document.chart.d[i].selected) {
chosen = chosen + document.chart.d[i].value + "\n"
}
}
return chosen
}
$(document).ready(function() {
var d;
var current_month;
var month;
var str;
var w;
var sel;
var sel_data;
var sel_data_value;
$('.submit').click(function(){
// to get current month
d=new Date();
month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
current_month=d.getMonth();
str=month[d.getMonth()];
w=document.chart.periodId.selectedIndex; // to get selected index value....
sel=document.chart.periodId.options[w].text; // to get selected index value text...
for(i=sel;i>=1;i--)
{
alert(month[i]);
}
sel_data=document.chart.d.selectedIndex;
sel_data_value=document.chart.d.options[sel_data].text;
var data_len=document.chart.d.length;
var j=0;
var chosen="";
for(j=0;j<data_len;j++)
{
if(document.chart.d.options[i].selected)
{
chosen=chosen+document.chart.d.options[i].value;
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: document.chart.chartTitle.value
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: month
},
yAxis: {
min: 0,
title: {text: 'Count' }
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: sel_data_value,
data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
});
</script>
<%! Connection con = null;
Statement stmt = null;
ResultSet rs = null;
String url = "jdbc:postgresql://192.168.1.196:5432/autocube3";
String user = "autocube";
String pass = "autocube";
String query = "";
int mid;
%>
<%
ChartCategory chartCategory = new ChartCategory();
chartCategory.setBar_name("vehicle reporting");
chartCategory.setMonth("3");
chartCategory.setValue("1000");
if (request.getParameter("mid") != null) {
mid = Integer.parseInt(request.getParameter("mid"));
} else {
mid = 0;
}
Class.forName("org.postgresql.Driver");
con = DriverManager.getConnection(url, user, pass);
System.out.println("Connected to Database");
stmt = con.createStatement();
rs = stmt.executeQuery("select code,description from plant");
%>
</head>
<body>
<form method="post" name="chart">
<fieldset>
<legend>Chart Options</legend>
<br />
<!-- Plant Select box -->
<label for="hstate">Plant:</label>
<select name="plantId" size="1" id="plantId" >
<!--onchange="selectPlant(this)" -->
<% while (rs.next()) {
%>
<option value="<%=rs.getString("code")%>"><%=rs.getString("description")%></option>
<%
}
String plant = request.getParameter("hstate");
System.out.println("Selected Plant" + request.getParameterValues("plantId"));
%>
</select>
<br />
<label for="hcountry">Period</label>
<select name="periodId" id="periodId">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
</select>
<br/>
<!--Interval -->
<label for="hstate" >Interval</label>
<select name="intervalId" id="intervalId">
<option value="day">Day</option>
<option value="month" selected>Month</option>
</select>
</fieldset>
<fieldset>
<legend>Chart Data</legend>
<br/>
<br/>
<table >
<tbody>
<tr>
<td>
 <select multiple name="data" size="5" id="s" style="width: 230px; height: 130px;" >
<%
String[] list = ReportField.getList();
for (int i = 0; i < list.length; i++) {
String field = ReportField.getFieldName(list[i]);
%>
<option value="<%=field%>"><%=list[i]%></option>
<%
//System.out.println("Names :" + list[i]);
//System.out.println("Field Names :" + field);
}
%>
</select>
</td>
<td>
<input type="button" value=">>" onclick="listbox_moveacross('s', 'd')" /><br/>
<input type="button" value="<<" onclick="listbox_moveacross('d', 's')" />  
</td>
<td>  
<select name="selectedData" size="5" id="d" style="width: 230px; height: 130px;">
</select></td>
<%
for (int i = 0; i <= 4; i++) {
String arr = request.getParameter("selectedData");
System.out.println("Arrya" + arr);
}
%>
</tr>
</tbody>
</table>
<br/>
</fieldset>
<fieldset>
<legend>Chart Info</legend>
<br/>
<label for="hstate" >Type</label>
<select name="typeId" id="typeId">
<option value="" selected>select...</option>
<option value="bar">Bar</option>
<option value="pie" >Pie</option>
<option value="line" >Line</option>
</select>
<br/>
<label for="uname" id="titleId">Title </label>
<input class="text" type="text" name="chartTitle"/>
<br />
<label for="uemail2">Pin to Dash board:</label>
<input class="text" type="checkbox" id="pinId" name="pinId"/>
</fieldset>
<input class="submit" type="button" value="Submit" />
<!--onclick="printValues(s)"-->
</form>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
using javascript function, am storing the selected listbox values in 'sel_data_value'. I need to pass this selected array values to database to retrieve values regarding selection. How can i do this using ajax. i don know how to pass array values in ajax and retrieve it from database.
Thanks.
