bugfix> jquery > 投稿

JQueryを使用して、変更後のテーブルから最初の行を選択したい。 ABC はドロップダウンであり、ユーザーがドロップダウンで変更すると、テーブルに別のデータセットを読み込みます。

JQuery

 $('#ABC').change(function () {
        let data = {
             abc: $('#ABC').val()                
         }
      var url = '@Url.Action("Partial", "S")'
        $('#SPartial').load(url, data)
$('#SPartial').find('#tbl tbody tr:first').addClass('select');
    });

親ビュー

<div id="SPartial">                  
  @Html.RenderPartial("_Partial", Model);                
 </div>

部分図

<table class="table", id="tbl">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(m => m.D)</th>
            <th>@Html.DisplayNameFor(m => m.R)</th>
            <th></th>         
        </tr>
    </thead>
    @foreach (var item in Model)
    {
        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.D)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.R)                 
                </td>
            </tr>
        </tbody>
     }
</table>

回答 1 件
  • Ajax(あなたの .load()  関数)は非同期で、あなたの $('#SPartial').find('#tbl tbody tr:first').addClass('select');  部分ビューが返されてDOMにロードされる前に、コード行が実行されています。

    成功コールバックでそのコード行を実行する必要があります

    var partial = $('#SPartial'); // cache it
    $('#ABC').change(function () {
        let data = { abc: $('#ABC').val() };
        var url = '@Url.Action("Partial", "S")'
        partial.load(url, data, function(response) {
            partial.find('#tbl tbody tr:first').addClass('select');
        });
    });
    
    

あなたの答え