How to make the objects stay after dropping to another column - html

I have a drag and drop functionality on my html page. Once I drag a box from one column to another, I want that box to stay in the new column for that user. So, if the user signs in back, he should see the box in the new column.
Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="description" content="Drag and drop table content with JavaScript"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/stylesheets/bootstrap.min.js"></script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
<script type="text/javascript" src="/stylesheets/redips-drag-min.js"></script>
<script type="text/javascript" src="/stylesheets/redips-drag-source.js"></script>
<title>Kanban Model</title>
</head>
<body style="overflow-x:hidden">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kanbannew">Welcome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class = "container"
<!-- tables inside this DIV could have draggable content -->
<div id="redips-drag" style="padding-left: 100px;padding-top: 100px;width: 988px;">
<table id="table1" style="width: 950px; padding-bottom: 50px;">
<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
<tr>
<td class="redips-mark" style="text-align: center;">New Requests</td>
<td class="redips-mark" style="text-align: center;">Ready to Start</td>
<td class="redips-mark" style="text-align: center;">In Progress</td>
<td class="redips-mark" style="text-align: center;">Ready for Review</td>
<td class="redips-mark" style="text-align: center;">Recently Finished</td>
</tr>
<tr style="background-color: #eee">
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;">
<div id="d1" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Login Functionality</div>
<div id="d2" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Welcome Page</div>
<div id="d3" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Search Functionality</div>
</td>
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;"></td>
<td style="padding-right: 12px; padding-left: 12px;">
<div id="d4" class="redips-drag t1" style="background-color: burlywood;height: 106px;">Search Results Page</div>
</td>
</tr>
</table>
<table id="table3">
<colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup>
<tr style="background-color: #eee">
<td id="message" class="redips-mark" title="You can not drop here"></td>
</tr>
<tr style="background-color: #eee">
<td class="redips-trash" title="Trash" ></td>
</tr>
</table>
<div><input type="hidden" class="checkbox" onclick="toggleDragging(this)" title="Enable dragging" checked="true"/><span class="message_line"></span></div>
</div>
</div>
<!--Footer-->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div> <!-- container-->
</div> <!-- navbar navbar-default navbar-fixed-bottom" -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$('#myModal').on('show.bs.modal', function (event) {
var li = $(event.relatedTarget) // Button that triggered the modal
var recipient = li.data('whatever') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text(recipient)
})
</script>
</body>
</html>
Any help would really be appreciated. Thanks.

Related

How to position a div next to the right bottom of a table in a modal?

I have got a modal and inside the modal content I have got a table and a div section to show some information about the table. I would like to position the div section next to the right bottom of the table. I tried setting the div to fixed position and then giving it bottom zero but that will result in placing the div in the footer of the modal. How can I add The div next to bottom right of the table. I don't mind in smaller screen size for the div to be at the right bottom of the table where the table takes the full width. attached Image is what I would like to achieve.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-10">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Type</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-2">
<div>
<div class="form-group">
<label id="">Total Cost</label>
<label id="">10</label>
</div>
<div class="form-group">
<label id="">Balance</label>
<label id="">5</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

I have used class "align-self-end" which is a predefined class available in bootstrap 4. Below is the fix.
Please check this result in full view mode.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-9">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Type</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example1</td>
<td>Example1</td>
<td>Example1</td>
<td>Example1</td>
</tr>
<tr>
<td>Example2</td>
<td>Example2</td>
<td>Example2</td>
<td>Example2</td>
</tr>
<tr>
<td>Example3</td>
<td>Example3</td>
<td>Example3</td>
<td>Example3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-2 align-self-end">
<div>
<div class="form-group">
<label id="">Total Cost</label>
<label id="">10</label>
</div>
<div class="form-group">
<label id="">Balance</label>
<label id="">5</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap Modal not popping up when clicking button

I'm trying to add a modal when the user clicks on the 'Add' button under 'Categories.' When I use just the code for the modal in js fiddle, it works, but when I add all of the code from the current file, it doesn't. Have tried moving jquery cdn around and also making a separate div container for the modal, but not able to get it. Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
data-toggle="modal"
data-target="#exampleModal"
class="btn btn-primary"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="row">
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The code that you useis only available for Bootstrap 4, but in the header, you are including the Bootstrap 5 that have changed some parameters regarding modals :
To trigger a modal:
// OLD WAY
data-toggle="modal"
data-target="#exampleModal"
// NEW WAY
data-bs-toggle="modal"
data-bs-target="#exampleModal"
Declaring a modal :
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
rel="stylesheet"
/>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- Navbar -->
<?php include_once("./templates/header.php"); ?>
<br /><br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mx-auto">
<img
src="./images/user.png"
style="width: 60%"
class="card-img-top mx-auto"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Profile Info</h4>
<p class="card-text">
<i class="fa fa-user"> </i>Brian Liang
</p>
<p class="card-text"><i class="fa fa-user"> </i>Admin</p>
<p class="card-text">Last Login : xxxx-xx-xx</p>
<a href="#" class="btn btn-primary"
><i class="fa fa-edit"> </i>Edit Profile</a
>
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%">
<h1>Welcome Admin,</h1>
<div class="row">
<div class="col-sm-6">
<iframe
src="http://free.timeanddate.com/clock/i7l8nwj9/n199/szw160/szh160/hoca32/hbw10/hfcc00/cf100/hnca32/fas30/facfff/fdi86/mqcfff/mqs2/mql3/mqw4/mqd70/mhcfff/mhs2/mhl3/mhw4/mhd70/mmcfff/mml4/mmw4/mmd98/hhcfff/hhs2/hmcfff/hms2/hscfff"
frameborder="0"
width="160"
height="160"
></iframe>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">New Orders</h4>
<p class="card-text">
Here you can make new invoices and create new orders.
</p>
New Orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Categories</h4>
<p class="card-text">
Here you can manage your categories and can add parent and sub
categories
</p>
<a
href="#"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>Add</a
>
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Brands</h4>
<p class="card-text">
Here you can manage your brand and can add a new brand
</p>
Add
Manage
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Products</h4>
<p class="card-text">
Here you can manage your products and can add new products
</p>
Add
Manage
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You are probably getting your bootstrap versions mixed up. I have tested your code using bootstrap 4 and bootstrap 5 and can confirm it works on bootstrap 4 but does not on bootstrap 5, you can fix your code easily by replacing your bootstrap 5 script imports with bootstrap 4, or you can port your code to bootstrap 5.
Bootstrap 5 recently changed the way modals are triggered, which is why it does not work on 5 but does work on 4.
The following head works for me
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

Angular-js new data not updating in controller

which is used to listing book and when user clicks on "Edit" button need to show book details in model-fade form.
Am tried but new values are not showing in model.
var rootApp = angular.module('profileApp', ['bookList','EditBook']);
// menu bar items
var firstApp = angular.module('bookList', []);
firstApp.controller('bookListController',function($scope, $http,productService) {
//here am getting data from service
var obj1 = {Book_Title:"book1",Book_Category: "Comdedy"};
var obj2 = {Book_Title:"book2",Book_Category: "story"};
var totalArray=[];
totalArray.push(obj1);
totalArray.push(obj2);
$scope.UserBookList = totalArray;
//funcion call get from html directly
$scope.bookItemEditIndex = function(idx){
$("#EditBookModal").modal();
$scope.temp = $scope.UserBookList[idx];
productService.addProduct($scope.temp);
console.log( $scope.temp);
console.log( productService.getProducts()[0]);
}
});
//Edit book
var secondApp = angular.module('EditBook', []);
secondApp.controller('EditBookController', function($scope,productService) {
var products = productService.getProducts()[0];
console.log(products);
$scope.NGE_bookTitle = $scope.products;
});
rootApp.service('productService', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
<!DOCTYPE html>
<html lang="en" ng-app="profileApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<style type="text/css">
.navbar{
}
.modal-dialog {
width: 100%;
height: auto;
padding: 0;
margin:0;
}
#mid-containeer{
border: 1px #e4e4e4 solid;
height: 10%;
}
#footer-containeer{
height: 100px;
width:100%;
}
</style>
<script type="text/javascript" src="indexservice.js"></script>
</head>
<body>
<!-- user book list -->
<div class="container">
<h1 class="page-header">Book Details </h1>
<p>The table having your book deails</p>
<div ng-controller="bookListController" id="bookListControllerID">
<table class="table table-bordered table table-striped css-serial">
<thead>
<tr>
<th>Book Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody ng-repeat="book in UserBookList">
<tr>
<td> {{book.Book_Title}} </td>
<td><a class="btn mini blue-stripe btn-info" href="#" data-toggle="modal" data-target="" ng-click="bookItemEditIndex($index)">Edit</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- edit book module -->
<div class="modal fade " id="EditBookModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" data-backdrop="true">
<div ng-controller="EditBookController" id="EditBookControllerID">
<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>
<h5 class="modal-title">Book</h5>
</div>
<div class="modal-body">
<div class="modal-body">
<div class="container" style="padding: 0px;">
<h1 class="page-header">Book Profile</h1>
<div class="row">
<!-- left column -->
<!-- edit form column -->
<div class="col-md-8 col-sm-6 col-xs-12 personal-info">
<div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
You can edit your <strong>Book</strong> here.
</div>
<h3>Edit book info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">Book title:</label>
<div class="col-lg-8">
<input class="form-control" value="jahn" type="text" name="E_bookTitle" ng-model="NGE_bookTitle">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input class="btn btn-primary" value="Save" type="submit" >
<span></span>
<input class="btn btn-default" value="Cancel" type="reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
thanks advance.

text and checkbox on one line within a table cell, bootstrap

This is what my table looks like right now:
I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
And here is the rest of the page for reference:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong></td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong></td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks

Set the p and checkbox inside the td element to be displayed inline.
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="images/title.png" class="img-responsive">
</div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong>
</td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>

why do components in my web overlap one another when the browser is resized?

Can someone tell why my webpage's components are overlapped when the browser is resized? and How to fix it? I noticed that if I replace the aboutContainer and the bottomContainer with the two copies of the topContainer, the problem does not occur. So I only know that there is something wrong with the two containers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example 2</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.navbar-brand{
font-size:1.7em;
}
#topContainer{
background-image:url("image/background2.jpg");
width:100%;
background-size:cover;
color:white;
}
.box{
background-color:#F1F1F1;
border:1px solid grey;
}
#topRow{
margin-top:150px;
text-align:center;
}
#topRow h1{
font-size:350%;
}
.bold{
font-weight:bold;
}
.marginTop{
margin-top:30px;
}
.center{
text-align:center;
}
.buttonBorder{
border:1px solid #F8F8F8;
}
.title{
margin-top:30px;
font-size:350%;
}
.image-size{
margin:20px;
width:300px;
height:250px;
}
#bottomContainer{
background-color:#B19CE3;
width:100%;
}
.logo{
height:100px;
}
#myModal{
margin-top:100px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">The way of GO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>About</li>
<li>Playing Go</li>
<li>Donate</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<label>Username</label>
<input type="email" placeholder="email..." class="form-control"
name="username"></input>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="password..." class="form-control"
name="password"></input>
</div>
<div class="form-group">
<button type="submit"class="btn btn-success">Log In</input>
</div>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="topContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1>So, what is GO?</h1>
<p class="lead ">Go is an ancient Chinese board game, in fact it's so ancient there is no other board game in the world
that we have found evidence of existing before go.</p>
<p class="bold marginTop">Interested? Subscribe now!</p>
<form class="marginTop">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" class="form-control"placeholder="your email..."></input>
</div>
<button class="btn btn-success btn-lg marginTop buttonBorder" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
<div class="container contentContainer" id="aboutContainer">
<div class="row center">
<h1 class="center title">Why GO is Awesome</h1>
<p class="lead">Summary of Go's history and awesomeness</p>
</div>
<div class="row center">
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> History</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic1.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> How-to-play</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic2.jpg" />
</div>
<div class="col-md-4 marginTop">
<h2><span class="glyphicon glyphicon-leaf"></span> Books</h2>
<p>Brief introduction about the app. Brief introduction about the app. Brief introduction about the app.
Brief introduction about the app. Brief introduction about the app.</p>
<button class="btn btn-success marginTop" data-toggle="modal"
data-target="#myModal">Sign Up</button>
<img class="image-size" src="image/pic3.jpg" />
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="marginTop center">The way of GO</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="email" placeholder="your email"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="password"></input>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password"></input>
</div>
<button type="submit" class="btn btn-success">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container contentContainer" id="bottomContainer">
<div class="row center marginTop">
<h1 class="center title">Playing GO now!</h1>
<p class="lead center">Two most popular websites for go players</p>
</div>
<div class="row center marginTop">
<div class="col-md-6 center" >
<h1 class="title">KGS</h1>
<img class="marginTop logo" src="image/kgslogo.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
<div class="col-md-6 center">
<h1 class="title">Pandanet</h1>
<img class="marginTop logo" src="image/pandanet.png" /></br>
<button class="btn btn-success marginTop">Play now!</button>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
</body>
</html>

It was because you were specifying the height of the containers.
http://plnkr.co/edit/lyDWUbFRJbHVVH0WYcyA
I commented out
<script>
$(".contentContainer").css("height", $(window).height()+"px");
</script>
and it doesn't overlap anymore. Simply wrapping that code in a resize handler will not work. You might wanna use margins or paddings instead. I haven't tested, though.
There were also quite a few other HTML errors that I fixed.