Issue using jsp along with sql query

Question

I want to reload a particular section of my page,without reloading the my entire page. This reloading should happen when i click a particular button. On clicking that button values from the database should be fetched and relative changes be made on my page. I have no experience with ajax and some experience with servelt .

<%
                    Integer x = (Integer) session.getAttribute("x_pass");
                    Statement stmt;
                    ResultSet rs;
                    stmt = con_pie.createStatement();
                    String project_name_1 = "", project_name_2 = "";
                    int used = 0, unused = 0, total = 0, p_cat, table_count = 0;
                    int progress_percentage = 0;

                    String sql = "SELECT  * FROM project_head_n";
                    rs = stmt.executeQuery(sql);
                    while (rs.next()) {
                        int var_progress = 0;
                        //Retrieve by column name
                        p_cat = rs.getInt("p_cat");
                        project_name_1 = rs.getString("project_no");
                        project_name_2 = rs.getString("project_name");
                        table_count++;
                        //used=Integer.parseInt(rs.getString(16));
                        total = rs.getInt("t_cost");
                        used = rs.getInt("u_cost");
                        unused = total - used;
                        //boolean b=rs.getDate("ifa");
                        if (p_cat == x) {
                            for (int i = 4; i < 16; i++) {
                                if (rs.getDate(i) != null) {
                                    var_progress++;
                                }
                            }

%>

this is my code for connection with database, i have used a different file that contains all the conections and is include at the top

Now i want the values to be uploaded in the following manner

<div class="row">
<!-- row starts here  -->
<div class="col-md-1 h6">
    <!-- col 1 row 1 contains project name -->
    <%
        out.println(project_name_1);
    %>
    <div class="row h6">
        <!-- row 2 of col 1 contains project name  -->
        <%
            out.println(project_name_2);
        %>
    </div>
</div>
<div class="col-md-1 col-md-push-0">
    <!--  col 2 row 1 contains the progress bar for cost-->
    <%
        //used=used+5; unused=unused+5;
                progress_percentage = (used * 100) / total;
    %>
    <div class="progress progress-striped active" id="pb">
        <div class="progress-bar" role="progressbar" aria-valuenow="45"
            aria-valuemin="0" aria-valuemax="100"
            style="width: <%out.println(progress_percentage);%>">
            <%
                out.println(progress_percentage + "%");
            %>
            Complete
        </div>
    </div>

    <div class="row">
        <!-- row 2 of col 2 conatins cost used/unsed ratio in words -->
        <%
            out.println(used + "/" + total);
        %>
    </div>
</div>
<div class="col-md-3 col-md-push-1" style="width: 80%">
    <!-- contains the main progress bar for the project completion -->
    <div class="progress progress-striped active">
        <%
            out.println((var_progress * 100) / 12);
        %>
        complete
        <div class="progress-bar" role="progressbar" aria-valuenow="45"
            aria-valuemin="0" aria-valuemax="100"
            style="width: <%out.println((var_progress * 1000) / 12);%>">
            <%
                out.println((var_progress * 100) / 12);
            %>
            Complete
        </div>
    </div>
</div>

I have used bootstrap for styling. The issue at hand is that if i click any of the button the value of the progress bars should change, if i cahnge the value of x here

if (p_cat == x) {
        for (int i = 4; i < 16; i++) {
        if (rs.getDate(i) != null) {
        var_progress++;
            }
    }

and then refresh the page i get new values. i want to get these values to be changed when i click on the buttons. My project is stuck on this issue plz help.

Answer 1

Eg you have a defult data on that page with this sample tag and on click of that you want more data.so jsut call a method in js say moredata()

<div class="x">
 xyz 
</div>
<div id="inner"></div>
<a href="javascript:void(0);">
 <div class="loadmore" id="showload" onclick="moredata();  showLoadMore('<%=path%>')" > load more</div>
  </a>

// to show loadmore

function showLoadMore(path) {
    alert("hiii");
        var imgUrl = path+"images/loadMore.gif";
        document.getElementById("showload").innerHTML='<img src='+imgUrl+' border="0" style="margin-top:10px;"/>';
}

//to hide load more

function hideLoadMore() {
    document.getElementById("showload").innerHTML='load more';
}

var pageIndex = 1; function moredata(path) {

     var pageCount = 2;
     var page="pagename.jsp";
     var userPage = "page.jsp";
     var userPersonalPage = "page1.jsp";
    pageIndex++;
var url = path+"**page name where you are getting data ex (getdata.jsp)**";
var params ="index="+pageIndex+"&onPage="+page;
alert(params);
var http = new XMLHttpRequest();
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() 
{//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        var old =   document.getElementById("inner").innerHTML;
        document.getElementById("inner").innerHTML=old+http.responseText;
        hideLoadMore(); **//this will set the data in that div** 
    }
};
http.send(params);
}

and on getdata.jsp page jsut get the value of pageindex and other fields you are passsing from here and pass it to get data from DB or anywhere else eg .getdata(pageindex); //everytime your pageindex will get incremented and you will gt more data in that div