How to refresh a table without creating a separate jsp?

Question

I have a table and one search fields, based on what is entered in the search fields the contents of the table are refreshed and if nothing is entered in the search fields the full table is loaded. Here when the user clicks on Go button the ajax call is made.

Currently, I have two jsp as below:

MAIN JSP

    <script type="text/javascript">
        $(document).ready(function() {
         $( "#go-user" ).click(function() {

                 var userId =  $('#usrId').val();
                 alert(userId);

                 $.ajax({
                       url: 'popUserSelect', // action to be perform
                       type: 'POST',       //type of posting the data
                       data: { userId: userId }, // data to set to Action Class
                       dataType: 'html',
                       success: function (html) {
                         alert(html);  
                         $('#load-user').html(html);
                         //document.getElementById("leftDiv").innerHTML=html; //set result.jsp output to leftDiv 
                       },
                       error: function(xhr, ajaxOptions, thrownError){
                          alert('An error occurred! ' + thrownError);
                       }

                    });
                 return false;
            });
        });
    </script>
    <s:form theme="simple">
    User Id  : <s:textfield name="userId"  id="usrId"  theme="simple"/>
    <s:submit action="popUserSelect" key="Go"></s:submit>
    </s:form>
<div id="load-user">    
    <table width="100%">
        <thead>
            <tr>
                <th>Select</th>
                <th>ID</th>
                <th>Name</th>
                <th>Role</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody>
        <s:iterator value="userSupList" >
            <tr>
                <td><input type="radio"  class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
                <td><s:property value="USR_AMLUSRID"/></td>
                <td><s:property value="USR_AMLUSERNAME"/></td>
                <td><s:property value="USR_ROLEID"/></td>
                <td><s:property value="USR_LOCATIONID"/></td>
            </tr>
        </s:iterator>
        </tbody>
    </table>
 </div>   
    <input type="button" value="Submit" onclick="buttonClick('SubmitUser')"/>
    <input type="button" value="Cancel"  onclick="buttonClick('Close')"/>      

Refresh Jsp:

 <table width="100%">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Role</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
            <s:iterator value="userSupList" >
                <tr>
                    <td><input type="radio"  class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
                    <td><s:property value="USR_AMLUSRID"/></td>
                    <td><s:property value="USR_AMLUSERNAME"/></td>
                    <td><s:property value="USR_ROLEID"/></td>
                    <td><s:property value="USR_LOCATIONID"/></td>
                </tr>
            </s:iterator>
            </tbody>
        </table>

Is there any way that I can avoid using two jsp for refreshing and refresh the jsp on the same main jsp itself?

Answer 1

You have to give your table an ID:

<table width="100%" id="myTable">
    ...
</table>

And adapt your AJAX call:

$.ajax({
    url: 'originalPage', // use original page here
    type: 'POST',      
    data: { userId: userId }, 
    dataType: 'html',
    success: function (html) {

        // get the content of #myTable from the AJAX result
        var tableContent = $("#myTable", html).html();

        // set the content of #myTable to the result of the AJAX call
        $('#myTable').html(tableContent);

    },
    error: function(xhr, ajaxOptions, thrownError){
      alert('An error occurred! ' + thrownError);
    }
});

jQuery can take the target to use as second parameter, which is used in $("#myTable", html) . This way, it does not search the current document for #myTable , but the document returned from the AJAX call.

The disadvantage of this that the whole original page needs to be loaded through AJAX, although only one minor part of it is used.