Working on a project for early project and here's the objective:
Make a table where you can add/edit/delete movies. I've been able to add the movies to my table, but can't seem to figure out my edit and delete buttons. Any tips will help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<h1>Movies List</h1>
<div class="container-fluid">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContainer">
Add Movie
</button>
<div id="modalContainer" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >×</button>
<h4 class="modal-title">Enter a New Movie w/Director.</h4>
</div>
<div class="modal-body">
<div>
<div class="form-group">
<label for="firstName" class="sr-only">Movie Name:</label>
<input id="firstName" type="text" class="form-control" placeholder="Movie Name" />
</div>
<div class="form-group">
<label for="lastName" class="sr-only">Director:</label>
<input id="lastName" type="text" class="form-control" placeholder="Director" />
</div>
<button onclick="myFunction()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<table id="myTable" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>Movie</th>
<th>Director</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Terminator</td>
<td>Jack Black</td>
</tr>
<tr>
<td>The Virgin Suicides</td>
<td>Uve Bol</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">EDIT</h4>
</div>
<div class="modal-body">
<p><input type="text" class="input-sm" id="txtfname"/></p>
<p><input type="text" class="input-sm" id="txtlname"/></p>
</div>
<div class="modal-footer">
<button id= "btnEdit" onClick = "myEdit()" type="button" class="btn btn-primary">Save changes</button>
<button id= "btnDelete" type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('table tbody tr td').on('click',function myEdit(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
$("#tldr").val($(this).closest('tr').children()[0].textContent);
$("#tldrs").val($(this).closest('tr').children()[1].textContent);
});
var toDos = []
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var len = table.rows.length;
row.id = 'row_' + len;
cell1.id = 'tldr';
cell2.id = 'tldrs';
cell1.innerHTML = document.getElementById('firstName').value;
cell2.innerHTML = document.getElementById('lastName').value;
var data = {firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
};
$('table tbody tr td').on('click',function(){
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
$("#tldr").val($(this).closest('tr').children()[0].textContent);
$("#tldrs").val($(this).closest('tr').children()[1].textContent);
});
toDos.push(data);
console.log(toDos);
};
function myEdit(){
$('table tbody tr td').on('click',function myEdit(){
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
};
</script>
</body>
</html>
Here's a fiddle as well but I had issues getting the jquery to function correctly.
https://jsfiddle.net/yabhjmz0/10/
You need to call the modal by using there modal ID
<button type="button" data-target="#myModal" class="btn btn-primary" data-toggle="modal" >
check this Demo
Related
I need some help in modal bootstrap. I want to make autocomplete name field when I choose id column table.
I have modal script like this :
My input field is like this :
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" name="name"/>
</div>
</div>
</div>
My modal script like this :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="1" >1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="2" >2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And then the javascript :
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
How to make name field can get autocomplete from id field ?
You can change the data-id value to match what you want.
function openmodal(input) {
$('#myModal').modal('show');
}
$(".hello").unbind().click(function(event) {
$("#input").val($(this).attr("data-id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>ID</h3>
<input type="text" name="id" onclick="return openmodal(this);" />
</div>
<div class="col-sm-4">
<h3>Name</h3>
<input type="text" id="input" name="name" />
</div>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table border="1" cellpadding="10" width="50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="hello" data-id="Robert">1</a></td>
<td>Robert</td>
</tr>
<tr>
<td><a class="hello" data-id="Julia">2</a></td>
<td>Julia</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to access the text which is entered into the input box but it keeps returning an empty string
Can someone help resolve the issue?
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]').val();
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You are trying to access the input value on modal showing, when actually the value is empty. You should access the value inside the click handler function of the button.
Please Note: this differs based on the context on which they are executing, thus modal click and button click has their own this. In order to preserve the intended this (the modal) you can store that in a variable and use that afterwards.
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var that = $(this);
$(this).find('button[id="save"]').click(function() {
var txt = that.find('input[id="txt"]').val();
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You were showing the value you had recovered before onClick. Retrieving the value within onClick will resolve
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]');
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt.val());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I wanted to show the further details of my card in modal when the user click the button "More Details" ,i have seen an answer regarding to this however I don't want the information to be inside an input field. Can please someone help me with it?
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
MODAL
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$(".modal-body #eventId").val( eventId );
});</script>
Instead of using an input field you could create a container element for the id, a div or span and update content of the element using .html() jQuery method.
$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$('#idHolder').html( eventId );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Modal</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
<span id="idHolder"></span>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Sometimes only Jquery 2.2 works. if I comment it the delete confirmation button wont pop up. 3.1.1 not working it seems for this code.
w3schools and getBootstrap codes has been refered for this
The delete confirmation modal is popping up for only the first entry in the table i.e foreach loop.
Dont know why..
Please help..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!--<script src="js/manageBooks.js"></script>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#deleteButton").click(function () {
$("#deleteModal").modal();
});
});
</script>
<title>Manage Books</title>
</head>
<body>
<p style="color:white; font-weight:bold; text-align:right;">pmahend1</p>
<h4>Add book from Google Books</h4>
<form action="manageBooks" method="POST">
<input type="hidden" name="action" value="searchGoogleBook" />
<input type="search" placeholder="Enter Title or Author" name="query" style="width: 450px"/>
<input type="submit" name="Search" value="Search"/>
<p style="color:red;"></p>
</form>
<div id="results"></div>
<br>
<div><a class="btn btn-default btn-info" href="manageBooks?action=addBookPage">Add Books Manually</a></div>
<br>
<h4 class="container">Book Details </h4>
<br>
<div class="container">
<table class="form-group" border="1">
<tr>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Genre</th>
<th>ISBN10</th>
<th>ISBN13</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr>
<td>Adultery</td>
<td>Paulo Coelho</td>
<td></td>
<td>Fiction</td>
<td>1101874090</td>
<td>9781101874097</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="6" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
<tr>
<td>Twilight's Wrath</td>
<td>SnÃÂÃÂÃÂæbjÃÂÃÂÃÂörn</td>
<td></td>
<td>Fiction</td>
<td>1490735372</td>
<td>9781490735375</td>
<td>Edit</td>
<!--<td>Delete</td>-->
<td>
<!--<div class="container">-->
<button type="button" class="btn btn-default" id="deleteButton">Delete</button>
<div class="modal fade" id="deleteModal" role="dialog">
<div class="modal-body" style="padding:40px 50px;">
<form role="form" action="manageBooks" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<input type="hidden" name="action" value="deleteBook">
<input type="hidden" name="bookId" value="7" />
<button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="confirm">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!--</div>-->
</td>
</tr>
</table>
</div>
<br>
</body>
</html>
It got fixed automatically. May be I had to restart TomCat server.
I've tried passing data to a modal like the example from the Bootstrap documentation on my own website but it still doesn't work?
My first guess would be that it has something to do with includes or that position of each include.
I couldn't find out why it doesn't work so I hope you can help.
My modal is launched by pressing a table row. It looks like this:
<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal">
<td>' . $trans['id'] . '</td>
<td>' . $trans['restaurant'] . '</td>
<td>' . $trans['korer'] . '</td>
<td>' . $trans['dato'] . '</td>
<td>' . $trans['tillader'] . '</td>
</tr>
My modal looks like this:
<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
This is the JavaScript that's controlling the data-id:
$('#transferModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('id') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
When I click the table row, the modal opens but the data-id is not inserted anywhere.
Included files are included as listed (same order)
bootstrap.css // Included in head
style.css // Own css-file - Included in head
jquery.min.js // Included last in file
bootstrap.js // Included last in file
You overlooked that the script-tag with modal stuff was above the script-tag where jQuery was called.
I think you can try,
id = $(event.relatedTarget).attr('data-id');, which I used in one of my modals.
Perhaps you may try my answer, hope this help.
$(document).ready(function(){
$(".thehide").hide();
$(document).on("click", "table button", function(){
$("#trigger_modal").trigger("click");
$("#myModal .modal-title").html("COMPLETE INFO");
$("#myModal .modal-body").html($("#partial_container").html());
$('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text());
$('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text());
$('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text());
});
});
.thehide{display: none;}
.display_table{display: table;}
.center{margin-left: auto; margin-right: auto;}
.margin_zero{margin: 0px !important;}
.text_align_center{text-align: center;}
.text_align_left{text-align: left;}
.text_transform_uppercase{text-transform: uppercase;}
.divider{height: 15px; width: 100%; clear: both; float: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th class="text_align_left text_transform_uppercase">Full Name</th>
<th class="text_align_center text_transform_uppercase">Age</th>
<th class="text_align_center text_transform_uppercase">Gender</th>
<th class="text_align_center text_transform_uppercase">Civil Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text_align_left">Full Name 1</td>
<td class="text_align_center">20</td>
<td class="text_align_center">Single</td>
<td>
<div class="display_table center">
<button class="btn btn-sucess">View</button>
</div>
</td>
</tr>
<tr>
<td class="text_align_left">Full Name 2</td>
<td class="text_align_center">15</td>
<td class="text_align_center">Widow</td>
<td>
<div class="display_table center">
<button class="btn btn-sucess">View</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" id="trigger_modal" class="thehide btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- the partial container -->
<div class="thehide" id="partial_container">
<form>
<fieldset>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>FULL NAME:</label>
<input type="text" name="fullname" class="form-control" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>AGE:</label>
<input type="text" name="age" class="form-control" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>CIVILS STATUS:</label>
<input type="text" name="civil_status" class="form-control" />
</div>
</div>
</div>
</div>
</fieldset>
<div class="divider"></div>
<div class="display_table center">
<button class="btn btn-sucess">Save</button>
</div>
</form>
</div>