CODEWITHSUNDEEP
javajquerystruts2
Sathish Kumar k k
Sathish Kumar k k

Reputation: 1842

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

<%@ 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.

image 1 image 2

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;

    }

}

Upvotes: 2

Views: 5857

Answers (1)

LoD.
LoD.

Reputation: 74

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.

Upvotes: 1

Related Questions