Databases
StackOverflow2013
Postsdbo
POpopulate html table data based on dropdown list using jquery and java
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POpopulate html table data based on dropdown list using jquery and java
    text
    copied!<pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;%@taglib uri="/struts-tags" prefix="s"%&gt; &lt;%@ taglib prefix="sj" uri="/struts-jquery-tags"%&gt; &lt;jsp:include page="checkLogin.jsp" /&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt; &lt;title&gt;Allocate Tans&lt;/title&gt; &lt;script type="javascript" src="jquery-1.7.js"&gt;&lt;/script&gt; &lt;sj:head jqueryui="true" jquerytheme="cupertino" /&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; $(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"); } }); }); }); &lt;/script&gt; &lt;body&gt; &lt;div id=table&gt; &lt;s:form action="doAllocate" name="allocate" executeResult="true"&gt; &lt;s:actionerror /&gt; &lt;s:actionmessage /&gt; &lt;s:select label="Select Batch" headerKey="-1" headerValue="Select a Batch..." list="%{#session.Batchs}" Value="batch" name="batch" id="batchID" /&gt; &lt;s:select label="Select User" headerKey="-1" headerValue="Select an User..." list="%{#session.users}" name="user" value="user" /&gt; &lt;s:radio list="#{'Curator':'Curator','QC':'QC'}" name="user_work_as" /&gt; &lt;s:submit value="Allocate" id="AllocateID" /&gt; &lt;table align="center" border="2" width="800"&gt; &lt;tr&gt; &lt;th&gt;TAN&lt;/th&gt; &lt;th&gt;Curator&lt;/th&gt; &lt;th&gt;Curator Status&lt;/th&gt; &lt;th&gt;QC&lt;/th&gt; &lt;th&gt;QC Status&lt;/th&gt; &lt;/tr&gt; &lt;s:iterator value="allocationList" var="tableID"&gt; &lt;tr&gt; &lt;td&gt;&lt;s:checkbox name="Tans" fieldValue="%{#tableID.tan}" theme="simple" /&gt; &lt;s:property value="tan" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:property value="curator" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:property value="curator_status" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:property value="qc" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:property value="qc_status" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/s:iterator&gt; &lt;/table&gt; &lt;/s:form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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.</p> <p><img src="https://i.stack.imgur.com/o39t7.jpg" alt="image 1"> <img src="https://i.stack.imgur.com/Qq66y.jpg" alt="image 2"></p> <p>my aim is to display the table based on the batch selected and the submit should do what it actually has to do.</p> <p>server side code...</p> <pre><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&lt;BatchInfo&gt; allocationList =new ArrayList&lt;BatchInfo&gt;(); private String batch; private List&lt;String&gt; batchs = new ArrayList&lt;String&gt;(); private String TAN; private String Tans[]; private String user; private List&lt;String&gt; users = new ArrayList&lt;String&gt;(); private String user_work_as; //getters and setters.... public List&lt;BatchInfo&gt; getAllocationList() { return allocationList; } public void setAllocationList(List&lt;BatchInfo&gt; allocationList) { this.allocationList = allocationList; } //@RequiredStringValidator(message = "Batch Not Selected") public String getBatch() { return batch; } public void setBatch(String batch) { this.batch = batch; } public List&lt;String&gt; getBatchs() { return batchs; } public void setBatchs(List&lt;String&gt; 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&lt;String&gt; getUsers() { return users; } public void setUsers(List&lt;String&gt; 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&lt;String, Object&gt;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&lt;String, Object&gt;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&lt;String, Object&gt;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&lt;BatchInfo&gt;)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)&amp;&amp; "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&lt;BatchInfo&gt;)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&lt;BatchInfo&gt;)dao1.status(getBatch()); return SUCCESS; } } return ERROR; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload