CODEWITHSUNDEEP
jqueryasp.net-mvc
User9895
User9895

Reputation: 313

How to select first row from table after change using JQuery?

I want to select first row from table after change using JQuery. ABC is dropdown and when user change in dropdown, it loads another set of data in table.

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');
    });

parent view

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

partial view

<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>

Upvotes: 0

Views: 352

Answers (1)

user3559349
user3559349

Reputation:

Ajax (your .load() function) is async, and your $('#SPartial').find('#tbl tbody tr:first').addClass('select'); line of code is being executed before the partial view is returned and loaded in the DOM.

You need to execute that line of code in the success callback

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');
    });
});

Upvotes: 2

Related Questions