1

テーブルと 1 つの検索フィールドがあり、検索フィールドに入力された内容に基づいてテーブルの内容が更新され、検索フィールドに何も入力されていない場合はテーブル全体が読み込まれます。ここで、ユーザーが [Go] ボタンをクリックすると、ajax 呼び出しが行われます。

現在、次のように 2 つの jsp があります。

メイン 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')"/>      

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>

2 つの jsp を使用してリフレッシュすることを避け、同じメイン jsp 自体で jsp をリフレッシュする方法はありますか?

4

1 に答える 1

0

テーブルに ID を与える必要があります。

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

そして、AJAX 呼び出しを調整します。

$.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 は、 で使用される 2 番目のパラメーターとして使用するターゲットを取得できます$("#myTable", html)。このように、現在のドキュメントでは検索しません#myTableが、AJAX 呼び出しから返されたドキュメントを検索します。

これの欠点は、元のページ全体を AJAX を介してロードする必要があることですが、使用されるのはわずか 1 つの部分だけです。

于 2013-08-06T09:17:52.907 に答える