send argument from jsp to struts2 action class's method

Question

this is the continuation of the following 2 links .... due to I was unable to post any comments for these...

1. Populating a table based on values chosen from a drop down in struts2 application

and

2. Struts2 parameter to javascript

I too have the same scenario where i need to print a table based on the selected value from the drop down list, in my google search I got this page and I used suggestions here. But when I select a value in my drop down list I get on table printed and the page still staying in the same page without any updation and below is my code ...help me out in this...

javascript

<script type="text/javascript">

function showAllocationStatusJavaScript(){

    var batchURL1="<s:property value="#batchURL"/>";
    $.ajax({
        url:batchURL1,
        type: 'get',
        beforeSend: function(){
            $("#loading").show();
            alert("parsed");
        },  
        success: function(result){
            if(result!=''){
        $('myTableWrapper').html(result);
            } else {
                alert(result);
            }
        },
      });
       }

</script>

inside the jsp body

<s:select label="Select Batch" headerKey="-1" headerValue="Select a Batch..."list="%{#session.Batchs}" Value="batch"  name="batch"  onchange="showAllocationStatusJavaScript()" id="batch"/>

URL Tag

<s:url action="doShowAllocationStatus" var="batchURL"><param value="%{batch}"/></s:url>

this the table to print my list

<div id="myTableWrapper">
<table align="center" border="2">
  <tr>
    <th>TAN</th>
    <th>Curator</th>
    <th>Curator Status</th>
    <th>QC</th>
    <th>QC Status</th>
  </tr>
  <s:iterator value="allocationList" >
  <tr>
    <td><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>
</div>

struts.xml

 <action name="doShowAllocationStatus" class="controller.AllocateTAN" method="showAllocationStatus" >
  <result name="success" type="dispatcher" >Allocation.jsp</result>  

AllocateTAN action class

//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 List<String> Tans = new ArrayList<String>();
    private String user;
    private List<String> users = new ArrayList<String>();

//and all getters and setters....

.....

//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;
    }

    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 {
        Map<String, Object>session=ActionContext.getContext().getSession();
        //setBatch(batch_value);
        session.put("Batch",batch);

        showTANlist(batch);
        System.out.println("Processing Allocation List... ");
        this.allocationList=(List<BatchInfo>)dao1.status(batch);
        System.out.println("Finished...");
        return SUCCESS;
        }

//execute method form allocating a TAN for a user...    
    public String execute(){

        return SUCCESS;
}

Answer 1

At last I found the Answer... there are some corrections I did in my jquery-ajax code and struts.xml...here they are...

jquery-ajax code

<head>
<script type="javascript" src="jquery-1.7.js"></script>
<head>

<script type="text/javascript">
$(document).ready(function()
        {
            $('#batchID').change(function(event) {
                var batch=$('#batchID').val();
                alert("inside change fn."+batch);
                $.ajax({
                    url     : "doShowAllocationStatus.action",
                    data    : "batch="+batch,
                    success : function(html) {
                        alert("success");
                                $("#table").html(html);
                                },
                    error   : function(html) {
                                alert("error");
                                }
                      });
            });
        });     
</script>

now here I wrote the table code that which I shown in above question, in a new jsp page(AllocationStatusTable.jsp) and included it...

<div id=table>
<s:include value="AllocationStatusTable.jsp" />
</div>

Later in struts.xml I re-wrote the action configuration as,

<action name="doShowAllocationStatus" class="controller.AllocateTAN" method="showAllocationStatus" >
  <result name="input" >Allocation.jsp</result> 
   <result name="error" >Allocation.jsp</result>
  <result>AllocationStatusTable.jsp</result>
   </action>

so the result of the action is pointed to the new jsp page (AllocationStatusTable.jsp).

Finally when I select a batch in my brop down list I will get my table according to my batch selected... :)

Answer 2

Your jQuery selector is incorrect:

$('myTableWrapper').html(result);

DOM element IDs are specified by a leading # character; this should be:

$('#myTableWrapper').html(result);

You also have an extraneous trailing comma in your $.ajax arguments, which will break on some browsers and should always be eliminated.

function showAllocationStatusJavaScript() {
    $.ajax({
        url: "<s:property value='#batchURL'/>",
        type: 'get',
        beforeSend: function() {
            $("#loading").show();
        },
        success: function(result) {
            if (result != '') {
                $('#myTableWrapper').html(result);
            }
            $("#loading").hide();
        }
    });
}