how to load the bootstrap modal with the ajax called data

Question

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.

afnpires · Accepted Answer · 2016-06-16 11:34:29Z

2

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');
}

edited Jun 16, 2016 at 11:34

answered Jun 16, 2016 at 11:31

afnpires

6091 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himaan Singh Over a year ago

thanks but it should be $("#alertModal").modal('show');

afnpires Over a year ago

@HimaanSingh you're right. I've forgot to place it there.

Collectives™ on Stack Overflow

how to load the bootstrap modal with the ajax called data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related