bind modal to row click in datatable - html

Question

Helo,
i have a datatable that contains data from my database. in each row there is a details button. i want on button click to open a modal with the details of the clicked rows.
i tried to create instance of modals for each row on page load but it is slowing down the website.
is there a way to populate a modal according to a row ID?
this is my table
<table id="tblMessagesDetail" class="table table table-hover table-striped table-condensed export-table" style="width: 100%;">
<thead>
<tr>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Id)*#
#ViewRes.SharedStrings.SmsID
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Project.Customer.Name)*#
#ViewRes.SharedStrings.CustomerName
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Project.Name)*#
#ViewRes.SharedStrings.ProjectName
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Login)*#
#ViewRes.SharedStrings.Account
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].MSISDN)
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.SmsStatus.Value)*#
#ViewRes.SharedStrings.smsStatus
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.EventReason)
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SendDate)*#
#ViewRes.SharedStrings.SendDate
</th>
<th>
#*#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.SentDate)*#
#ViewRes.SharedStrings.SentDate
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Ticket)
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].ExtId)
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.NotificationLevel)
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.OADC)
</th>
<th>
#Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.Message)
</th>
<th>
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.SmsList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Customer.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.NMGLogin)
</td>
<td>
#Html.DisplayFor(modelItem => item.MSISDN)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.SmsStatus.Value)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.EventReason)
</td>
<td>
#Html.DisplayFor(modelItem => item.SendDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.SentDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Ticket)
</td>
<td>
#Html.DisplayFor(modelItem => item.ExtId)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.NotificationLevel)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.OADC)
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.Message)
</td>
<!-- Button trigger modal -->
<td>
#*#using (Html.BeginForm("FillDetailModal", "Statistics", FormMethod.Post))
{*#
<button id="btnDetails" type="submit" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-#item.SmsMTId">
<i class="glyphicon glyphicon-th-list"></i> #ViewRes.SharedStrings.btnDetails
</button>
</td>
</tr>
}
</tbody>
and this is my modal
<div class="modal fade" draggable="true" id="myModal-#item.SmsMTId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modalDialog" draggable="true" class="modal-dialog" style="padding-bottom:0px">
<div class="modal-content">
<div class="modal-header" style="background-color: #428bca; color: white; ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
Message Detail ID: '#item.SmsMTId' - Ticket ##item.SmsMT.Ticket - Project #item.SmsMT.Account.Project.Name
</h4>
</div>
<div class="modal-body" style="padding: 0px;">
<table style="width:100%;" class="table table table-hover table-striped table-condensed export-table" border="0">
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.SmsID</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Id)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.CustomerName</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Customer.Name)
</td>
</tr>
<tr>
<td align="left">
<label> #ViewRes.SharedStrings.ProjectName</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Name)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.Account</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Account.NMGLogin)
</td>
</tr>
<tr>
<td align="left">
<label> #Html.DisplayNameFor(model => model.SmsList[0].MSISDN)</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.MSISDN)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.smsStatus</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.SmsStatus.Value)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.EventReason</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.EventReason)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.SendDate</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SendDate)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.SentDate</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.SentDate)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.TicketId</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Ticket)
</td>
</tr>
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.ExternalID</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.ExtId)
</td>
</tr>
<tr>
<td align="left">
<label style="width:160px;">#ViewRes.SharedStrings.NotificationLevel</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.NotificationLevel)
</td>
</tr>
<tr>
<td align="left">
<label> #Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.OADC)</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.OADC)
</td>
</tr>
<tr>
<td align="left">
<label>#Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.Message)</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.Message)
</td>
</tr>
<tr>
<td align="left">
<label> #ViewRes.SharedStrings.binaryMessage</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMTContent.Binary)
</td>
</tr>
</table>
</div>
<div class="modal-footer" style="margin: 0px; padding: 9px 30px 10px;">
<button type="button" class="btn btn-default" data-dismiss="modal">
#ViewRes.SharedStrings.btnClose
</button>
</div>
</div>
</div>
</div>
how can i pass the value of the row and then do a link wuery on the database to extract the appropriate data?
I appreciate any help i can get

Answer 1

You can actually bind your id to data-whatever attribute and put it in a table row or even in a column.
<tr data-toggle="modal" data-target="#myModalIdHere" data-whatever="myDataIdHere">
in jQuery:
$('#myModalIdHere').on('show.bs.modal', function (event) {
// this is the trigger
var tableRow = $(event.relatedTarget);
// get myDataIdHere to data-whatever attribute
var myDataIdHere = tableRow.data('whatever');
// updating modal's content
// bind myDataIdHere to myInputIdHere
var modal = $(this);
modal.find('.modal-body #myInputIdHere').val(myDataIdHere);
});

Answer 2

Query all data and put icons in the last column using while loop. With this u can create a table with all your data and the icons will serve us the buttons for your view, delete or edit
while($row = $sql->fetch()){
$id = $row['id'];
$company = $row['company_name'];
$domain = $row['domain_name'];
$industry = $row['industry_type'];
$websitet = $row['website_type'];
$websitep = $row['website_purpose'];
$audience = $row['target_audience'];
$web_pages = $row['web_pages'];
$color = $row['color_scheme'];
$style = $row['style'];
$addons = $row['addons'];
$url = $row['url_of_existing'];
$like_dislike = $row['like_dislike_existing_website'];
$sample = $row['sample_website'];
echo '<tr><td>'.$id.'</td>';
echo '<td>'.$company.'</td>';
echo '<td>'.$domain.'</td>';
echo '<td>'.$industry.'</td>';
echo '<td><img src=img/view.png width=20px height=20px id="view"></td>';
echo '<td><img src="img/delete.png" width=20px height=20px name="delete"></td></tr>';
?>
the <a href...?id='.$id.'" part is to send the id using the get method.. look it up if you dont know about it.. pretty much this will solve your problem.