When editing data in JQuery popup, data of only first row is displayed for all rows

Question

I am using JQuery DataTable in MVC3 for displaying list of users. I am opening a JQuery dialog for editing data, but in dialog the data of first row is only displayed for all rows.

Below is my View:

@model IEnumerable<EditorDataTable.Models.UserModel>
@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
 }
 <div id="mypopup" style="display:none;">
 <label id="lblFirstName">FirstName</label>
 <br />
 <input type="text" id="txtFirstName" name="txtFirstName" />
 <br />
 <label id="lblLastName">LastName</label>
 <br />
 <input type="text" id="txtLastName" name="txtLastName" />
  <br />
 <label id="lblCity">City</label>
 <br />
 <input type="text" id="txtCity" name="txtCity" />
 <br />
 <input type="submit" id="btnUpdate" value="Update" />
 </div>
<table id="example" class="display">
<thead>
<tr>
    <th>
        FirstName
    </th>
    <th>
        LastName
    </th>
    <th>
        City
    </th>     
    <th>
        Action
    </th>
</tr>  
</thead> 
<tbody>
@foreach (var item in Model) {
<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>     
    <td class="click">
         @Html.HiddenFor(modelItem => item.UserID,"Value")
        <a href="#" id="edit">Edit</a>         
    </td>
</tr>
}
</tbody>
</table>

Below is my jQuery:

  $(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    var UserId = $("#item_UserID").val();
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: UserId },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data) {
                $("#txtFirstName").val(data.aaData[0][0]);
                $("#txtLastName").val(data.aaData[0][1]);
                $("#txtCity").val(data.aaData[0][2]);
            }               
        }
    });      
});
});

I have taken a hidden field in which I am storing my UserID, using which I am fetching my user data, but every time I am getting the UserId of first row only.

Bumptious Q Bangwhistle · Answer 1 · 2017-12-02T22:32:51.810

IDs must be unique. See: Does ID have to be unique in the whole page?

But there is a better way to do what you are trying to do:

1) include the unique ID in the <tr>, so you end up with something like: <tr id="id123">. Prefix the user ID with at least one alphabetical character, for example "id" or whatever you want. That's because you don't want the HTML ID to be a number (like id="12356"). The ID should start with a character.

2) Add a click or dblclick handler on the table's rows, something like:

  $(document).on("click", "#example tbody tr", 
         function () { editUser(this.id.substring(2)); } );

Note the substring(2) strips away the preceding "id" text, so you are left with just the actual User ID.

3) Use this value in the editUser function:

function editUser(id)
{
    $("#txtFirstName").val("");
    $("#txtLastName").val("");
    $("#txtCity").val("");        
    $("#mypopup").dialog();
    $.ajax({
        type: "GET",
        url: "Home/EditData",
        data: { UserId: id },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data) {
                $("#txtFirstName").val(data.aaData[0][0]);
                $("#txtLastName").val(data.aaData[0][1]);
                $("#txtCity").val(data.aaData[0][2]);
            }               
        }
    });      
});

Here is a simple fiddle: http://jsfiddle.net/95jB5/ Click on a row, and it'll display the user ID.

score 0 · Accepted Answer · answered Sep 03 '13 at 07:10

Instead of taking a hidden variable, I have given id to my td as below:

<tbody>
@foreach (var item in Model) {

<tr class="even gradeC">
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.City)
    </td>    
    <td class="click" id="@item.UserID">           
        <a href="#" id="edit">Edit</a>        
    </td>
</tr>
}
</tbody>

And on click of Edit I am using this id to fetch data as below in my js:

$(document).ready(function () {
$('#example').dataTable({      
});

$(".click").on('click', function (e) {        
$("#txtFirstName").val("");
$("#txtLastName").val("");
$("#txtCity").val("");        
var UserId = this.id;
$("#mypopup").dialog();
$.ajax({
    type: "GET",
    url: "Home/EditData",
    data: { UserId: UserId },
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        if (data) {
            $("#txtFirstName").val(data.aaData[0][0]);
            $("#txtLastName").val(data.aaData[0][1]);
            $("#txtCity").val(data.aaData[0][2]);
        }               
    }
  });      
});
});

Its working now, for each row i am getting the id of that row only.

When editing data in JQuery popup, data of only first row is displayed for all rows

2 Answers2