Himaan Singh Himaan Singh - 5 months ago 43
jQuery Question

how to load the bootstrap modal with the ajax called data

my razor syntax is

@foreach(var item in Model)
{
<td>@item.email</td>
<td><a href ="javascript:void(0);"onclick="Getinfo(this)" data-assigned-id="@item.email" ></a>@item.lastaccessdate</td>

}


this is the javascript i am using to get data from controller and then binding that data as a table in tab

function Getinfo(elem)
{
var email = $(elem).data('assigned-id');
$.get('/Home/GetDetails', { email: email }, function (data) { grid(data); });

}
function grid(abc)
{
var tab = "<table class='table'>";
tab += "<thead>";
tab += "<tr>";
tab += "<th>Name</th>";
tab += "<th>Login</th>";
tab += "<th>Username</th>";
tab += "</tr>";
tab += "</thead>";
tab += "<tbody>";
for (var it in abc)
{
tab += "<tr>";
tab += "<td>" + abc[it].Name + "</td>";
tab += "<td>" + abc[it].login + "</td>";
tab += "<td>" + abc[it].username + "</td>";
tab += "</tr>";
}
tab += "</tbody>";
tab += "</table>";
}


Now how do i bind this data in 'tab' to a twitter bootstrap modal pop up ?
thanks in advance.

Answer

I usually have a hidden modal. When I get the data, I would affect the body with the html received from server.

<div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content modal-xl">
        <div class="modal-header" style="text-align: center">
            <h1>Something something Dark Side</h1>
        </div>
        <div class="modal-body modal-scroll" id="alertModalBody"></div>
        <div class="modal-footer"></div>
    </div>
  </div>
</div>

For your case something like:

function grid(abc)
{
  var tab = "<table class='table'>";
  // ... More string appends

  $('alertModalBody').html(tab);
  $("#alertModal").modal('show');
}