Không chạy enent click sau khi ajax load table

#1

Sau khi update thông tin. Dùng ajax load lại table. Nhưng khi muốn edit thông tin thì popup lại hiện thông tin row cũ không thẻ chọn row khác?
code javascript:

$(".click").click(function () {
    //Gán giá trị mặc định cũ
    var val = $(this).closest("tr").find("#fusername").text().replace(/\s/g, ''); 
    console.log(val);
    $.ajax({
        url: "/User/UpdateUser",
        type: "GET",
        data: { username: val },
        dataType: 'json',
        success: function (responde) {
            $('#name').val(responde.Name);

            //set value for date input
            var dob = new Date(parseInt(responde.DoB.replace(/\D/g, '')));
            var formatdob = formatDob(dob);
            $('#dob').val(formatdob);

            $('#email').val(responde.Email);
            $('#phoneNumber').val(responde.PhoneNumber);
            $('#username').val(responde.UserName);
            $('#password').val(responde.Password);
            $('#active').prop('checked', responde.Status);
        },
        error: function () {
            alert("fail");
        }
    });
});

Mình check code 2 code html trước và sau update thì giống nhau. Có bắt log thì phát hiện là biến var val = $(this).closest("tr").find("#fusername").text().replace(/\s/g, ''); dòng code không hoạt động khi load = ajax.
Mong mọi người hướng dẫn giải quyết

#2

không có đầy đủ html,
bạn lên đây nhờ người khác giúp bạn debug bằng mắt?

3 Likes
#3

Code HTML. Xin lỗi mọi người

<div align="center">
    <a href="/">Role manage</a>
    <table id="table" border="1">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>DoB</th>
                <th>Email</th>
                <th>Phone number</th>
                <th>Username</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="tbodyinfo">
                <tr>
                    <td id="fid">1</td>
                    <td id="fname">gads</td>
                    <td id="fdob">10/03/2021 12:00:00 AM</td>
                    <td id="femail">[email protected]</td>
                    <td id="fphonenumber">9876543211</td>
                    <td id="fusername">NgaBui</td>
                    <td id="fstatus"><input checked="checked" class="check-box" disabled="disabled" type="checkbox"></td>
                    <td><a id="updateuser" data-toggle="modal" data-target="#theModal" class="click">Edit user</a></td>
                </tr>
                <tr><td id="fid">5</td>
                    <td id="fname">12aaf</td>
                    <td id="fdob">08/03/2021 12:00:00 AM</td>
                    <td id="femail">[email protected]</td>
                    <td id="fphonenumber">0123456780</td>
                    <td id="fusername">DucAnh</td>
                    <td id="fstatus"><input checked="checked" class="check-box" disabled="disabled" type="checkbox"></td>
                    <td><a id="updateuser" data-toggle="modal" data-target="#theModal" class="click">Edit user</a></td>
                </tr>
                <tr>
                    <td id="fid">7</td>
                    <td id="fname">asd</td>
                    <td id="fdob">01/03/2021 12:00:00 AM</td>
                    <td id="femail">[email protected]</td>
                    <td id="fphonenumber">0123456789</td>
                    <td id="fusername">Nga123</td>
                    <td id="fstatus"><input checked="checked" class="check-box" disabled="disabled" type="checkbox"></td>
                    <td><a id="updateuser" data-toggle="modal" data-target="#theModal" class="click">Edit user</a></td>
                </tr>
        </tbody>
    </table>
</div>
#4

bạn cần xem lại cách đặt selector của bạn, cụ thể là id bị trùng

về phần debug

var val = $(this).closest("tr").find("#fusername").text().replace(/\s/g, '');

bạn cần show ra hết tất cả

  1. $(this)
  2. $(this).closest(“tr”)
  3. $(this).closest(“tr”).find("#fusername")
  4. $(this).closest(“tr”).find("#fusername").text()
  5. $(this).closest(“tr”).find("#fusername").text().replace(/\s/g, ‘’);

xem coi code của bạn đã sai ở bước nào

3 Likes
#5

Đây là code mình viết khi load-page razor

<div align="center">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createmodal">
        Create user
    </button>

    <table id="table" border="1">
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Name
                </th>
                <th>
                    DoB
                </th>
                <th>
                    Email
                </th>
                <th>
                    Phone number
                </th>
                <th>
                    Username
                </th>
                <th>
                    Status
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody id="tbodyinfo">
            @foreach (var item in Model)
            {
                <tr>
                    <td id="fid">
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td id="fname">
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td id="fdob">
                        @Html.DisplayFor(modelItem => item.DoB)
                    </td>
                    <td id="femail">
                        @Html.DisplayFor(modelItem => item.Email)
                    </td>
                    <td id="fphonenumber">
                        @Html.DisplayFor(modelItem => item.PhoneNumber)
                    </td>
                    <td id="fusername">
                        @Html.DisplayFor(modelItem => item.UserName)
                    </td>
                    <td id="fstatus">
                        @Html.DisplayFor(modelItem => item.Status)
                    </td>
                    <td>
                        @*@Html.ActionLink("Update", "Update", new { @userName = item.UserName }),*@

                        <a id="updateuser" data-toggle="modal" data-target="#theModal" class="click">Edit user</a>

                        @Html.ActionLink("Delete",
                                         "Delete",
                                         new { userId = item.Id, confirm = true },
                                         new { @onclick = "return confirm('Do you really want to delete " + item.Name + "?')" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
#6

@kisuluoibieng Cảm ơn bạn và mọi người mình đã tìm ra lỗi chuyển hàm click sang hàm onclick $(document).on(event, selector, handler). Lý giải link: https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?