Passing array values using Ajax & JSP

[Maya Naga]

I have created a chart application using jQuery, JSP and ajax.

<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://localhost:5432/sample";
            String user = "sample";
            String pass = "sample";
            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.

if sel_data_value='vehicle reporting' is selected how can i pass this using ajax to database so that i can retrieve array of values and pass it to chart application. I am new to ajax. can anyone help me how to send and retrieve array of values using ajax.

[Eric Pascarello]

Since you say you are using jQuery look at serialize

Eric

[Maya Naga]

Thanks Eric....