How can I set my dialog to open for a specific td?????

dt8485

I have a datatable, I have a view details link in each of the row. When i click on the View Details I get all the info and show that in a dialog.

But my problem is when I click in any td for that row, it opens up the dialog. But I want this to fire for a specific td where I have a View details.
When I clicking on the Username column also, It's firing up the dialog box.

I am using the live function to fire it $('#usersTable tbody td').live('click', function () {}

Thanks

Below is my code:

@model DirectAccess.Models.RoleViewModel
@{
ViewBag.Title = "UserInfo";
}
@using (Html.BeginForm("Index", "UserInfo", FormMethod.Post, new { id = "UserInfo" }))
{
@Html.ValidationSummary(true)

Get User Information:






Select User Role




@Html.LabelFor(m => m.RoleCode):
@Html.DropDownListFor(m => m.RoleCode, new SelectList(new DirectAccess.Models.RoleViewModel().GetRoles(), "Value", "RoleCode"), "Select")
Role is required













var dataTable;
//var anOpen = [];
$(function () {

$("#GetUserBtn").click(function (e) {
e.preventDefault();
var postUrl = $("#UserInfo").attr("action");
var roleCode = $("#RoleCode").val();

if (roleCode.length <= 0) {
$(".roleValidation").show();
return false;
}
else {
$(".roleValidation").hide();
$.post(postUrl, { "roleCode": roleCode }, function (data) {

var userData = data.Data != null ? data.Data : [];

dataTable = $('#usersTable').dataTable({
"bJQueryUI": true,
"aaData": userData,
"oLanguage": {
"sZeroRecords": "No Records Found"
},
"bDestroy": true,
"aoColumns": [{ "sTitle": "Full Name", "mDataProp": "FullName" }, { "sTitle": "UserName", "mDataProp": "UserName" },
{ "sTitle": "Email", "mDataProp": "Email" }, { "sTitle": "Role", "mDataProp": "RoleName" },
{ "sTitle": "Action", "sClass": "control center", "mDataProp": null, "sDefaultContent":
'View Details'
}
]

});

});
return false;
}
});
});

$('#usersTable tbody td').live('click', function () {

var oTable = $('#usersTable').dataTable();
var nTr = this.parentNode;
var oData = oTable.fnGetData(nTr);

$('#dialogcontent').dialog({
title: "Details",
autoOpen: false,
width: 600
});

document.getElementById('dialogcontent').innerHTML = 'Full Name:' + oData.FullName + '' +
'UserName:' + oData.UserName + '' +
'Email:' + oData.Email + '' +
'Company Id:' + oData.CompanyId + '' +
'Role:' + oData.RoleName + '' +
'Divisional List:' + oData.DivList + '' +
'Regional List:' + oData.RegList + '' +
'Facility List:' + oData.FacList + '' +
'DirectAccessUrl:'+ oData.DirectAccessUrl +'' +
'DeleteOnLogout:' + oData.DeleteOnLogout + '' +
'';

$('#dialogcontent').dialog('open');
});


}

fbas

craft a more specific jquery selection:
[code]
$('#usersTable tbody tr').each( function() { // get each row in tbody
$('td:eq(3)', this).live('click', function () {}); // add click event to column 3 of each row
});

[/code]

or
[code]
$('#usersTable tbody tr').find('td:eq(3)').live('click', function () {}); // add click event to column 3 of each row
});

[/code]

I haven't tested/debugged these, but I hope it points you in the right direction.

dt8485

I have the above 2 Jquery Selection, but didn't work. It's not showing the dialog box at all.