AJAX Form Bootstrap: index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery AJAX form dengan twitter bootstrap modal</title>
<script src="jquery.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="msg"></div>
<table class="table">
<tr>
    <th>No.</th>
    <th>Nama</th>
    <th>Email</th>
    <th>Aksi</th>
</tr>
<tr>
    <td>1</td>
    <td>Nama 1</td>
    <td>email 1</td>
    <td><a data-toggle="modal" href="detail.php?id=1">Edit</a></td>
</tr>
<tr>
    <td>2</td>
    <td>Nama 2</td>
    <td>email 2</td>
    <td><a data-toggle="modal" href="detail.php?id=2">Edit</a></td>
</tr>
<tr>
    <td>3</td>
    <td>Nama 3</td>
    <td>email 3</td>
    <td><a data-toggle="modal" href="detail.php?id=3">Edit</a></td>
</tr>
<tr>
    <td>4</td>
    <td>Nama 4</td>
    <td>email 4</td>
    <td><a data-toggle="modal" href="detail.php?id=4">Edit</a></td>
</tr>
<tr>
    <td>5</td>
    <td>Nama 5</td>
    <td>email 5</td>
    <td><a data-toggle="modal" href="detail.php?id=5">Edit</a></td>
</tr>
</table>
 </div>
<script>
$(function () {
    $('[data-toggle="modal"]').click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function (data) {
                $('<div class="modal hide fade">' + data + '</div>').modal();
            }).success(function () {
                $('input:text:visible:first').focus();
            });
        }
    });
});
</script>
</body>
</html>