Populate html table data based on dropdown list using jQuery and Java

Question

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<jsp:include page="checkLogin.jsp" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Allocate Tans</title>
<script type="javascript" src="jquery-1.7.js"></script>
<sj:head jqueryui="true" jquerytheme="cupertino" />
</head>
<script type="text/javascript">
$(document).ready(function()
        {
            $('#batchID').change(function(event) {
                var batch=$('#batchID').val();
                $.ajax({
                    url     : "doShowAllocationStatus.action",
                    data    : "batch="+batch,
                    success : function(html) {
                                $('#table').html(html);
                                },
                    error   : function(html) {
                                alert("error");
                                }
                      });
            });
        });     
</script>

<body>


    <div id=table>
        <s:form action="doAllocate" name="allocate" executeResult="true">

            <s:actionerror />
            <s:actionmessage />
            <s:select label="Select Batch" headerKey="-1"
                headerValue="Select a Batch..." list="%{#session.Batchs}"
                Value="batch" name="batch" id="batchID" />
            <s:select label="Select User" headerKey="-1"
                headerValue="Select an User..." list="%{#session.users}" name="user"
                value="user" />
            <s:radio list="#{'Curator':'Curator','QC':'QC'}" name="user_work_as" />
            <s:submit value="Allocate" id="AllocateID" />


            <table align="center" border="2" width="800">
                <tr>
                    <th>TAN</th>
                    <th>Curator</th>
                    <th>Curator Status</th>
                    <th>QC</th>
                    <th>QC Status</th>
                </tr>
                <s:iterator value="allocationList" var="tableID">
                    <tr>
                        <td><s:checkbox name="Tans" fieldValue="%{#tableID.tan}"
                                theme="simple" />
                            <s:property value="tan" /></td>
                        <td><s:property value="curator" /></td>
                        <td><s:property value="curator_status" /></td>
                        <td><s:property value="qc" /></td>
                        <td><s:property value="qc_status" /></td>
                    </tr>
                </s:iterator>
            </table>
        </s:form>
    </div>
</body>
</html>

In this when I use the for all content inside the dropdown select works fine as i expected for dropdown list and table but it react different I mean the table is appended with same rows once again when I submit and if I select some thing in batch dropdown list then the table comes to it correct list. If I used only for table, it prints the full page once again. I can understand what had happen, but could not find solution to achieve what I need.

My aim is to display the table based on the batch selected and the submit should do what it actually has to do.

server side code...

package controller;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import model.BatchInfo;
import model.CationDAO;
//import org.apache.struts2.interceptor.SessionAware;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class AllocateTAN extends ActionSupport  {


    //Fields that hold data...
    private List<BatchInfo> allocationList =new ArrayList<BatchInfo>();
    private String batch;
    private List<String> batchs = new ArrayList<String>();
    private String TAN;
    private String Tans[];
    private String user;
    private List<String> users = new ArrayList<String>();
    private String user_work_as;


    //getters and setters....   
    public List<BatchInfo> getAllocationList() {
        return allocationList;
    }

    public void setAllocationList(List<BatchInfo> allocationList) {
        this.allocationList = allocationList;
    }
    //@RequiredStringValidator(message = "Batch Not Selected")
    public String getBatch() {
        return batch;
    }


    public void setBatch(String batch) {
        this.batch = batch;

    }

    public List<String> getBatchs() {
        return batchs;
    }


    public void setBatchs(List<String> batchs) {
        this.batchs = batchs;

    }
    //@RequiredStringValidator(message = "TAN Not Selected")
    public String getTAN() {
        return TAN;
    }


    public void setTAN(String tAN) {
        TAN = tAN;

    }

    public String[] getTans() {
        return Tans;
    }


    public void setTans(String[] tans) {
        Tans = tans;

    }
    //@RequiredStringValidator(message = "Worker Not Selected")
    public String getUser() {
        return user;
    }


    public void setUser(String user) {
        this.user = user;

    }

    public List<String> getUsers() {
        return users;
    }


    public void setUsers(List<String> users) {
        this.users = users;

    }
    //@RequiredStringValidator(message = "Select Any One")
    public String getUser_work_as() {
        return user_work_as;
    }


    public void setUser_work_as(String user_work_as) {
        this.user_work_as = user_work_as;

    }


    //variable used to access DataBase...
    CationDAO dao1 = new CationDAO() ;



    //flow 1.: making all details available for the allocate TAN page...when page page is loaded 1st time


    public String AllocatingTANpageDetails() throws SQLException{

        Map<String, Object>session=ActionContext.getContext().getSession();
        this.batchs=dao1.Batch_List();
        session.put("Batchs", batchs);
        //Tans=dao1.Tan_list(getBatch());
        this.users=dao1.Users_List();
        session.put("users", users);

        return SUCCESS;
    }


    /*TAN list
    private void showTANlist(String Batch1) throws SQLException{
        Map<String, Object>session=ActionContext.getContext().getSession();
        Tans=dao1.Tan_list(Batch1);
        session.put("Tans", Tans);

    }*/
    //flow 2.: showing Allocation Status in Table form...in same page


    public String showAllocationStatus() throws SQLException {

        System.out.println("Inside Show Allocation Status");
        if(batch==null||"-1".equals(batch)){
            addActionMessage("Please!... Select a Batch");
            return ERROR;
        }
        Map<String, Object>session=ActionContext.getContext().getSession();
        //setBatch(batch_value);
        String bth=getBatch();
        if (bth==null || bth=="-1"){
            System.out.println("batch is empty "+bth);
        }
        System.out.println(bth);
        session.put("Batch",bth);

    //  showTANlist(bth);
        System.out.println("Processing Allocation List... ");
        this.allocationList=(List<BatchInfo>)dao1.status(bth);
        System.out.println(allocationList); 
        session.put("AllocationList",allocationList);
        System.out.println("Finished...");
        return SUCCESS;
    }

    //execute method form allocating a TAN for a user...    
    public String execute(){
        String statusTable=null;
        String er = null;
            if(Tans==null||"-1".equals(Tans)){
                addActionError("Please!... Select a TAN"); er="er";
            }
                if (user==null||"-1".equals(user)){
                    addActionError("Please!... Select an Worker");er="er";
                }
                    if (user_work_as==null||user_work_as==""||"-1".equals(user_work_as)){
                        addActionError("Please!... Select either Curation or QC");er="er";
                    }
                    try {
                         statusTable=showAllocationStatus();
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }

                    if(!"er".equals(er)&& "success".equals(statusTable)){
                        System.out.println("inside Execute metho of AllocateTAN.java");

                        if ("QC".equalsIgnoreCase(user_work_as)){
                            try {
                                if(!"Complete".equalsIgnoreCase(dao1.CheckCurator(batch,Tans))){
                                    addActionMessage("Curation Not yet completed");
                                    return ERROR;
                                }
                                dao1.AllocateTANforUser( batch,  Tans,  user,  user_work_as);
                                this.allocationList=(List<BatchInfo>)dao1.status(getBatch());
                                return SUCCESS;
                            } catch (SQLException e) {
                                e.printStackTrace();
                            }


                        }else if("Curator".equalsIgnoreCase(user_work_as)){
                            try {
                                dao1.AllocateTANforUser( batch,  Tans,  user,  user_work_as);
                            } catch (SQLException e) {
                                e.printStackTrace();
                            }
                            this.allocationList=(List<BatchInfo>)dao1.status(getBatch());
                            return SUCCESS;
                        }
            }

        return ERROR;

    }

}

I like to do some thing like this link and in this they have used local variable("data.d"). I need to use arraylist which has a list of bean class object. I dont know how to bring it in side this code instead of that local javascript variable. — Sathish Kumar k k
– Sathish Kumar k k, Commented Feb 21, 2012 at 7:07

LoD. · Accepted Answer · 2012-02-23 16:51:45Z

1

First, I would suggest that you change your structure as you are using AJAX hardly at all (you only use one on load and that's it, and that is not different than passing all those values from the very beginning from the action). As you only have 3 values to pass, is fairly easy to capture them with jQuery("#myid").val() and pass them with jQuery.ajax. something like

<s:button value="Allocate Me!!!" onclick="allocating_you()"/>

and then

function allocationg_you(){
    var val1 = jQuery("#value1").val();
    var val2 = jQuery("#value2").val();
    var val3 = jQuery("#value3").val();
    jQuery.ajax({
        url: "allocator",
        data: "val1=" + val1 +"&val2=" + val2 + "&val3=" + val3 + "&r=" //dont forget to add a random number
        success: function(data){
                        jQuery("#mytable").html(data).load();
                 }
});
}

finally, you should reduce the ajax refreshment to the minimun necessary, as it will be easier to mantain and to give aesthetics. so for example your template should be divided like this

<your form>
<your table header>
<div id="mytable">

with this template you would only have to refresh the actual content and everything else will remain intact (true AJAX), so in your JSP response for your AJAX call there should be only the iterator part. you will even be able to create the table with a scrollbar and a static header, only needing to put some matching sizes in your ajax cells along with the table tag.

Hope this helps you. If you manage to crack this you will be able to do wonders. jQuery + Struts2 + (seems that you are not using Hbernate, but oh well) it's a monstrous combination.

edited Feb 23, 2012 at 16:51

answered Feb 23, 2012 at 7:22

LoD.

742 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sathish Kumar k k Over a year ago

I understand your answer and I would like to know the reason why the table is printed with past request values and present allocated values in my code. please clarify this.

LoD. Over a year ago

It's difficult to say from what information you have given, but I will give you the possibilities: 1. there is a problem with the page you are using to refresh the table (that is, the jsp result of the doShowAllocationstatus.action) where the <div id="table"> is bad positioned. 2. you are having a subtle error with your DAO's you should check if the data stored is as you expect it. I'll also suggest to implement sessionaware instead of using that long way to access the session as it is cleaner and easier to use

Sathish Kumar k k Over a year ago

1. While I place <table> inside <div>. the whole page is printed once again and it is inside the <div>. so I change the place as it is in above code. 2. I checked my DAO and it is correct and also while I refresh manually, this table comes back to correct structure. so the every thing is the problem due to improper use of jquery. will you please help me out.

Collectives™ on Stack Overflow

Populate html table data based on dropdown list using jQuery and Java

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related