I want to delete data on my website using a delete button. The data is displayed into a "#table_body" with a button that is created in a javascript. My idea here is that every line of data has a delete button under it. My problem is how to delete the data based on the unique id/reference id by pressing the delete button.
I have tried naming the ".child('123').remove();" instead of ".child(key).remove();" and it works. however it only deletes the data based on the 123 id. I want it to delete the data with the unique id.
Here is the Javascript code:
var rootRef = firebase.database().ref().child("User");
rootRef.on("child_added", snap => {
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(this.id)">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(key).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
Happy Paws
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- CSS Files -->
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/demo/demo.css" rel="stylesheet" />
</head>
<div class="wrapper ">
<div class="sidebar" data-color="green" data-background-color="black" data-image="../assets/img/sidebar-2.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a class="simple-text logo-normal">
HAPPY PAWS
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>Account</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>User List</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">library_books</i>
<span class="notification">Pet Article</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./typography.html"><p style="color:green;">Articles</p></a>
<a class="dropdown-item" href="./add-article.html"><p style="color:green;">Add Article</p></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">shopping_cart</i>
<span class="notification">Products</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./accessories.html"><p style="color:green;">Accessories</p></a>
<a class="dropdown-item" href="./clothes.html"><p style="color:green;">Clothes</p></a>
<a class="dropdown-item" href="./food.html"><p style="color:green;">Food</p></a>
<a class="dropdown-item" href="./hygiene.html"><p style="color:green;">Hygiene</p></a>
<a class="dropdown-item" href="./toys.html"><p style="color:green;">Toys</p></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="javscript:void(0)" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">pets</i>
<span class="notification">Pet Adoption</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./icons.html"><p style="color:green;">Dog</p></a>
<a class="dropdown-item" href="./cat.html"><p style="color:green;">Cat</p></a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="./login.html">
<i class="material-icons">logout</i>
<p>logout</p>
</a>
</li>
<!-- <li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li> -->
</ul>
</div>
</div>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top " id="navigation-example">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation" data-target="#navigation-example">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" id="Search1" value="" class="form-control" placeholder="Search...">
<button type="submit" id="Search2" class="btn btn-default btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
</div>
</nav>
<!-- End Navbar -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">face</i>
</div>
<p class="card-category">New Users</p>
<h3 class="card-title">
<small></small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="reports.html">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">report_problem</i>
</div>
<p class="card-link" href="./dashboard.html">
<p class="card-category" >Reports</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href=".">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">pets</i>
</div>
<p class="card-category">New Pet for Adoption</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<a href="#">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">add_shopping_cart</i>
</div>
<p class="card-category" href="./dashboard.html">New Product</p>
<h3 class="card-title"></h3>
</div>
<div class="card-footer">
<div class="stats">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<a href="#">
<div class="card">
<div class="card-header card bg-success text-white">
<h4 class="card-title">Account List</h4>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>Name</th>
<th>Address</th>
<th>Contact</th>
<th>Delete</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBHzWLC1UCPrwI0lTsWdmTQWlles05unb0",
authDomain: "happy-paws-6f139.firebaseapp.com",
databaseURL: "https://happy-paws-6f139.firebaseio.com",
projectId: "happy-paws-6f139",
storageBucket: "happy-paws-6f139.appspot.com",
messagingSenderId: "53124089069"
};
firebase.initializeApp(config);
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="accountview.js"></script>
<script src="firebase.js"></script>
<script src="login.js"></script>
<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title"> Sidebar Filters</li>
<li class="adjustments-line">
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="badge-colors ml-auto mr-auto">
<span class="badge filter badge-purple active" data-color="purple"></span>
<span class="badge filter badge-azure" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-warning" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
</div>
<div class="clearfix"></div>
</a>
</li>
<li class="header-title">Images</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-1.jpg" alt="">
</a>
</li>
<li class="active">
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-2.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-3.jpg" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="javascript:void(0)">
<img src="../assets/img/sidebar-4.jpg" alt="">
</a>
</li>
<!-- Core JS Files -->
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://unpkg.com/default-passive-events"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Chartist JS -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/material-dashboard.js?v=2.1.0"></script>
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/demo/demo.js"></script>
<script>
$(document).ready(function() {
$().ready(function() {
$sidebar = $('.sidebar');
$sidebar_img_container = $sidebar.find('.sidebar-background');
$full_page = $('.full-page');
$sidebar_responsive = $('body > .navbar-collapse');
window_width = $(window).width();
$('.fixed-plugin a').click(function(event) {
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
if ($(this).hasClass('switch-trigger')) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
});
$('.fixed-plugin .active-color span').click(function() {
$full_page_background = $('.full-page-background');
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('color');
if ($sidebar.length != 0) {
$sidebar.attr('data-color', new_color);
}
if ($full_page.length != 0) {
$full_page.attr('filter-color', new_color);
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.attr('data-color', new_color);
}
});
$('.fixed-plugin .background-color .badge').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var new_color = $(this).data('background-color');
if ($sidebar.length != 0) {
$sidebar.attr('data-background-color', new_color);
}
});
$('.fixed-plugin .img-holder').click(function() {
$full_page_background = $('.full-page-background');
$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
});
$('.switch-sidebar-image input').change(function() {
$full_page_background = $('.full-page-background');
$input = $(this);
if ($input.is(':checked')) {
if ($sidebar_img_container.length != 0) {
$sidebar_img_container.fadeIn('fast');
$sidebar.attr('data-image', '#');
}
if ($full_page_background.length != 0) {
$full_page_background.fadeIn('fast');
$full_page.attr('data-image', '#');
}
background_image = true;
} else {
if ($sidebar_img_container.length != 0) {
$sidebar.removeAttr('data-image');
$sidebar_img_container.fadeOut('fast');
}
if ($full_page_background.length != 0) {
$full_page.removeAttr('data-image', '#');
$full_page_background.fadeOut('fast');
}
background_image = false;
}
});
$('.switch-sidebar-mini input').change(function() {
$body = $('body');
$input = $(this);
if (md.misc.sidebar_mini_active == true) {
$('body').removeClass('sidebar-mini');
md.misc.sidebar_mini_active = false;
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
} else {
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');
setTimeout(function() {
$('body').addClass('sidebar-mini');
md.misc.sidebar_mini_active = true;
}, 300);
}
// we simulate the window Resize so the charts will get updated in realtime.
var simulateWindowResize = setInterval(function() {
window.dispatchEvent(new Event('resize'));
}, 180);
// we stop the simulation of Window Resize after the animations are completed
setTimeout(function() {
clearInterval(simulateWindowResize);
}, 1000);
});
});
});
</script>
<script>
$(document).ready(function() {
// Javascript method's body can be found in assets/js/demos.js
md.initDashboardPageCharts();
});
</script>
</body>
</html>
To get the key, you can do the following:
rootRef.on("child_added", snap => {
var key = snap.key;
var name = snap.child("name").val();
var add = snap.child("address").val();
var contact = snap.child("contact").val();
$("#table_body").append("<tr><td>" + name + "</td><td>" + add + "</td><td>" + contact + "</td><td>");
$("#table_body").append('<button id="1" onClick="reply_click(' + key + ')">Delete</button></td></tr>');
});
function reply_click(clicked_id){
firebase.database().ref("User").child(clicked_id).remove();
}
The snap.key will be able to retrieve the unique id in the database.
From the docs:
key
The key (last part of the path) of the location of this DataSnapshot.
Related
I'm in a big trouble. I have to redirect the web page at the last stage after developing the API, but it seems to be redirected in the "postman" application, but it does not work at all in Chrome. What should I do?
enter image description here
First, This is view to receive parameters.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>forgot_password</title>
<link rel = "stylesheet" href ="/css/sample.css">
<link href = "/css/font.css" rel = "stylesheet">
<link href = "/css/navbar2.css" rel = "stylesheet">
<link href = "/css/forgot_password_css.css" rel = "stylesheet">
<script>
function findId() {
let FindEmail = document.getElementById('exampleCheck1').checked;
let PhoneNumber = document.getElementById('exampleInputPhoneNumber').value;
let Name = document.getElementById('exampleInputName').value;
let FindPassword = document.getElementById('exampleCheck2').checked;
let PhoneNumber2 = document.getElementById('exampleInputPhoneNumber2').value;
let email = document.getElementById('exampleInputEmail2').value;
if (FindEmail == true && FindPassword == false) {
const url = new URL("/find_email",location);
url.searchParams.append('Name',Name);
url.searchParams.append('PhoneNumber',PhoneNumber);
location = url;
} else if (FindEmail == false && FindPassword == true) {
} else {
alert("아이디 찾기와 비밀번호 찾기 중 하나만 선택하세요.");
history.back();
}
}
</script>
</head>
<body>
<nav class="navbar bg-light fixed-top" id = "navbar_custom">
<div class="container-fluid" id = "container-fluid_custom">
<a class="navbar-brand" href="#">
<img src="https://cdn-icons-png.flaticon.com/512/6815/6815258.png" alt="Bootstrap" width="30" height="24">
</a>
<a class="navbar-brand" href="http://localhost:8080/">Main Page</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">My Page</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">설정</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">마이페이지</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="http://localhost:8080/mypoint">마이포인트</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<form class = "forgot_password_form">
<h1> 아이디 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">아이디 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber" aria-describedby="emailHelp" placeholder="ex) 01012341234">
<div id="emailHelp1" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputName" class="form-label">이름</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="ex) 세종대왕">
<div id="emailHelp2" class="form-text">가입자의 이름이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-primary" onclick= "findId()">실행</button>
</form>
<hr class ="one">
<form class = "forgot_password_form">
<h1> 비밀번호 찾기</h1>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck2">
<label class="form-check-label" for="exampleCheck2">비밀번호 찾기 사용</label>
</div> <div class="mb-3">
<label for="exampleInputPhoneNumber2" class="form-label">전화번호</label>
<input type="text" class="form-control" id="exampleInputPhoneNumber2" placeholder="ex) 01012341234">
<div id="emailHelp3" class="form-text">가입 시 사용한 전화번호여야 합니다.</div>
</div>
<div class="mb-3">
<label for="exampleInputEmail2" class="form-label">이메일</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="ex) apple1234#naver.com">
<div id="emailHelp" class="form-text">가입 시 사용한 이메일이여야 합니다.</div>
</div>
<button type="submit" class="btn btn-danger">실행</button>
</form>
<hr class ="one">
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
This is a side project website, and we're not generating any revenue yet.
Thank you for your visit. :)
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
HTML, CSS, BOOTSTRAP
</p>
<p>
SPRING
</p>
<p>
JPA
</p>
<p>
MYSQL
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3 text-secondary"></i> Seoul, 129 Teheran-ro, KR</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i>
gurtjd97#naver.com
</p>
<p><i class="fas fa-phone me-3 text-secondary"></i> +82)10-2729-3646</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
This is the page to be redirected.
<!DOCTYPE html>
<html lang="en" xmlns:th = "http://www.thymeleafg">
<head>
<meta charset="UTF-8">
<title>Alert Page</title>
<script th:inline = "javascript">
var username = [[${string}]];
alert(username);
</script>
</head>
<body>
</body>
</html>
Controller that processes and redirects values. (Normaly operated in Postman)
#Controller
public class ForgotController {
#Autowired
private UserService userService;
#GetMapping("/find_email")
public String findEmail(FindEmailDto findEmailDto,RedirectAttributes redirectAttributes) {
Optional<Users> users = userService.findEmail(findEmailDto);
if (users.isPresent()) {
String email = users.get().getEmail();
redirectAttributes.addAttribute("value", email);
return "redirect:/alert";
}
redirectAttributes.addAttribute("value","없는 회원 정보 입니다");
return "redirect:/alert";
}
#GetMapping("/alert")
public String alertPage(#RequestParam("value") String s, Model model) {
model.addAttribute("string", s);
return "alert";
}
}
[SOLVED] I had to change the button tag to any other tag like < a > tag to call the function. Such as:
<a class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"><i class="fa fa-cart-plus"></i> Add To Bag</a>
[Problem]
In my project, am sending out data from a JavaScript to PHP script using an Ajax call. I tried to look for an answer on Stackoverflow, but not success therefor I made a question.
This code is working properly on my chrome browser, but it fails when I try it out in Firefox.
product-detail.php
function all_check(action, productid){
var product_id = productid;
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({
url: "ajax_action.php",
type: "POST",
dataType:"json",
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items); //total items in cart-info element
console.log("bla bla bla");
});
}
Here is the button which called this function:
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"> Add To Bag</button>
On button click, all_check function is called. But on Firefox, ajax call does not work.I checked it by using alert and console inside done function. I cleared cache repeatedly. But it did not work.
Anyone please kindly help me on this problem.
EDIT 1 My firefox version is 54.0 (32-bit).
I am using Google CDN for jQuery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
EDIT 2
Complete rendered html from firefox:
<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">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function all_check(action, productid){ // from 262 line
var product_id = productid;
if(document.getElementById("showsize").value==""){
alert("Please Select size");
return false;
}
else if(document.getElementById("quantity").value==""){
alert("Please Select Quantity");
document.getElementById("quantity").focus();
return false;
}
else{
var qtyid = +document.getElementById("quantity").value;
typeof(qtyid);
var available = +document.getElementById("showavailable").value;
typeof(available);
if(qtyid > available ){
alert("Sorry, Available Quantity is "+ available);
return false;
}
}
console.log("button clicked");
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({ //make ajax request to cart_process.php
url: "ajax_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items);
console.log("bla bla bla");
});
}
function get_availble(serial)
{
document.getElementById('showserial').value = serial;
var size_n_available = document.getElementById('product_size').value;
document.getElementById('showsize').value = size_n_available.substring(0,2) ;
document.getElementById('showavailable').value = size_n_available.substring(2) ;
alert(document.getElementById('showavailable').value);
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 hidden-xs">
<img src="assets/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-7 col-sm-6">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-sm" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default navbar-static">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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>
<a class="navbar-brand" href="index.php"><img src="assets/images/logo.png" class="img-responsive" alt="" width="75"></a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home"></i></li>
<li class="dropdown">
Category <span class="caret"></span>
<ul class="dropdown-menu dropdown-cart dropdown-content" role="menu">
<li class="">Tote bags</li>
<li class="">Mugs</li>
<li class="">T-shirts</li>
<li class="">Throw Pillow</li>
<li class="">Notebooks</li>
<li class="">Art print</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Help</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span>
Items <span id="cartcount">
</span>
<span class="caret"></span></a>
<div id="shopping_cart_results"></div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row top-left-message" style="background:#fff">
</div>
</div>
<div class="col-md-1 col-md-offset-2 collapse navbar-collapse js-navbar-collapse">
Artist
</div>
<div class="col-md-1 collapse navbar-collapse js-navbar-collapse">
Home Junction
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" style="margin-top:15px;">
<div class="col-md-5 col-sm-6">
<div id="view-thumb">
<img id="theImg" class="my-foto img-responsive" src="productimage/bigtea-baggin-mugs.jpg" data-large="productimage/bigtea-baggin-mugs.jpg" title="">
</div>
</div>
<div class="col-md-7 col-sm-6">
<div class="productHeader container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>Tea baggin Mug</h2>
</div>
<div class="col-sm-4">
<p style="padding-top: 26px; padding-right:10px; font-family: Helvetica; color:#999; font-size:17px;" class="pull-right">Tk 300</p>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="" method="post">
<div class="form-group">
<select id="product_size" name="product_size" class="form-control" onchange="get_availble(258)" required>
<option value="-1">Select Size</option>
<option value="125">11 oz</option>
<option value="135">15 oz</option>
</select>
<input class="form-control" id="showsize" name="showsize" placeholder="show size" type="text">
<input class="form-control" id="showavailable" name="showavailable" placeholder="show Quantity" type="text">
<input class="form-control" id="showserial" name="showserial" placeholder="show serial" type="text">
</div>
<div class="form-group">
<input class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity" type="text">
</div>
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '06020010');"><i class="fa fa-cart-plus"></i> Add To Bag</button>
<input class="btn btn-success btn-block" id="forsubmit" type="hidden">
</form>
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<div class="title">
<h2>Recently viewed</h2>
</div>
<div class="multiple-items recent_view">
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/because-sloths-1yv-mugs.jpg" class="img-responsive">
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/good-morning-i-see-the-assassins-have-failed-mugs.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/bootstrap-select.js"></script>
<script src="assets/js/zoomsl-3.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="assets/js/singleCartDelete.js"></script>
<script>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
});
$('#thumb-group a').on({
'click': function(){
var imgSrc = $(this).attr('data-src');
$('#theImg').attr('src',imgSrc);
$('#theImg').attr('data-large',imgSrc);
}
});
if(!$.fn.imagezoomsl){
$('.msg').show();
return;
}
else $('.msg').hide();
$('.my-foto').imagezoomsl({
zoomrange: [1, 12],
zoomstart: 4,
innerzoom: true,
magnifierborder: "none"
});
});
</script> <script type="text/javascript" src="assets/js/plugin.js"></script>
This is the ajax_action.php file:
<?php
session_start();
include("connection.php");
if(!empty($_POST["action"])) {
switch($_POST["action"]) {
case "add":
if(!empty($_POST["quantity"])) {
$productid = mysqli_fetch_row(mysqli_query($con, "SELECT ProductID,ProductName,Price,SerialNo FROM product_info where SerialNo='".$_POST["serial"]."'"));
$product_image = mysqli_fetch_row(mysqli_query($con, "SELECT ImageID, ProductID,BigImage,MidImage,SmallImage,SerialNo FROM product_image
WHERE ProductID='".$productid[0]."' AND SerialNo='".$_POST["serial"]."'"));
$idx = $_POST["serial"].$_POST["size"];
$itemArray = array($idx=>array(
'name'=>$productid[1],
'code'=>$_POST["serial"],
'image'=>$product_image[4],
'quantity'=>$_POST["quantity"],
'price'=>$productid[2],
'size'=>$_POST["size"]
)
);
if(!empty($_SESSION["cart_item"])) {
$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
} else {
$_SESSION["cart_item"] = $itemArray;
}
}
break;
case "empty":
unset($_SESSION["cart_item"]);
break;
}
$total_items = count($_SESSION["cart_item"]); //count total items
die(json_encode(array('items'=>$total_items))); //output json
}
?>
i am building a website in bootstrap for work and i just can't get it to scale down when the resolution changes at all
http://www.vccb.co.za/demohome/
i am using Bootstrap v3.3.4.
i also have the viewport meta tag aswell.
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="Vericred, Credit bureau, tracing, search, people" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VCCB Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/agency.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- JQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-63126052-1', 'auto');
ga('send', 'pageview');
</script>
<body id="page-top" style="width:100%;position:relative;" class="index">
<!-- Navigation -->
<div id="menuContainer" class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid" style="position:relative;width:100%">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<div class="navbar-header page-scroll" style="position:absolute;margin-left:18%">
<h2 class="section-heading slant">We are not just another bureau,</h2>
<h3 class="slant">because you are not just another consumer</h3>
<img id="menuLogo" src="img/full_size_logo.png" style="margin-top:-18%;margin-left:140%;height:100px;width:280px;visibility:visible"/>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:8%">
<ul class="nav navbar-nav navbar-right multi-level" role="menu" style="margin-top:-5.2%;margin-left:14%;width:100%;position:relative">
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-top:4%;">
<a class="page-scroll" href="Home.html">Home</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a id="vis" class="page-scroll" href="about.html">About</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
Consumer Friend
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Business Partner<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" >
<a class="dropdown-toggle" data-toggle="dropdown">Our Services and Products</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="consumer.html">Consumer Contact Data</a></li>
<li><a target="_blank" href="ConsumerBehaviouralData.html">Consumer Behavioural Data</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Legal<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="docs/PAIA_MANUAL.pdf">PAIA Manual</a></li>
<li><a target="_blank" href="docs/DisclaimerAndPrivacyPolicy.docx">Disclaimer and Privacy Policy</a></li>
<li>Affiliations</li>
</ul>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
Contact Us
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a target="_blank" href="https://www.vccb.co.za/Trace">Client Login</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;background-color:red;">
<a target="_blank" href="/RequestAccount.html">Sign Up As A Client</a>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:3.8%;">
<i class="fa fa-twitter" style="margin-top:25%"></i>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<i class="fa fa-facebook" style="margin-top:25%"></i>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<i class="fa fa-linkedin" style="margin-top:25%"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</div>
<section id="CompInfo" style="font:14px/18px Times New Roman;color:#64676b;background-color:black;height:700px;width:70%;margin-left:15%;margin-top:1%;position:relative;">
<label style="color:white;font-size:10em;margin-top:20%;margin-left:20%;position:relative;">TUTORIALS</label>
</section>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted">The main benefits to the consumer whose information is kept on our data base are:</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Contactability</h4>
<p class="text-muted">Improve your contactability.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Pension Pay-outs</h4>
<p class="text-muted">Receive outstanding pension pay-outs.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-suitcase fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Avoid Legal Action</h4>
<p class="text-muted">Chance to pay outstanding debt and avoid legal action.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-medkit fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Consumer Rehabilitation</h4>
<p class="text-muted">Rehabilitating consumers.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-refresh fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Stay Updated</h4>
<p class="text-muted">Receive important information timeously.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-child fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Add Value</h4>
<p class="text-muted">This adds value to the consumers overall wellbeing.</p>
</div>
</div>
<br>
<br>
<button id="request" class="btn btn-m" style="color:white;float:right;margin-right:6%" type="button">Sign Up As A Client</button>
<br>
<br>
<br>
<label style="color:black;float:right"> Already a tracing customer? Click <a style="color:black;text-decoration:underline;" target="_blank" href="https://www.vccb.co.za/Trace">HERE</a> to login.</label>
</div>
</section>
<div style="visibility:hidden">Vericred, Credit bureau, tracing, search, people</div>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">VeriCred Credit Bureau (Pty) Ltd is the newest registered Credit Bureau in South Africa in terms of the National Credit Act No 34 of 2005, with registration number NCRCB21.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1990-1994</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p class="text-muted">VeriCred Credit Bureau was first established in 1990 in Bophuthatswana as a credit bureau. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1994-2007</h4>
<h4 class="subheading">South Africa and the National Credit Act</h4>
</div>
<div class="timeline-body">
<p class="text-muted">After 1994 VeriCred Credit Bureau was incorporated into the New South Africa and continued to operate until the National Credit Act was implemented in 2007 which significantly changed the face of the industry. </p>
</div>
</div>
</li>
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2012</h4>
<h4 class="subheading">Vericred Credit Bureau</h4>
</div>
<div class="timeline-body">
<p class="text-muted">In 2012 VeriCred Credit Bureau was revived and a new credit bureau was established. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<a href="#services">
<div class="timeline-image">
<h4 style="color:White">Be Part
<br>Of Our
<br>Story!</h4>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact Us</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h4 style="color:white"><label style="color:red">Phone:</label> <a style="color:white" href="tel:0878034798">087 803 4798</a> </h4>
<h4 style="color:white"><label style="color:red">Fax Number:</label> 086 604 1273</h4>
<h4 style="color:white"><label style="color:red">Email:</label> <a style="color:white" href="mailto:tracesupport#vccb.co.za">info#vccb.co.za</a></h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="www.vccb.co.za">www.vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">General Enquiries:</label> <a style="color:white" href="mailto:info#vccb.co.za">info#vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="mailto:disputes#vccb.co.za">disputes#vccb.co.za</a> </h4>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="button" onclick="SendMail()" class="btn btn-xl" style="color:white">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container" style="width:auto">
<div class="row">
<div class="col-md-4" style="width:4%">
<img id="back-top" onclick="$('body,html').animate({scrollTop: 0}, 800);" src="/img/top.png" title="Click to go to the top." style="width:100%;height:100%;border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%; box-shadow:0 0 10px rgba(0,0,0,1);-webkit-box-shadow: 0 0 10px rgba(0,0,0,1);-moz-box-shadow: 0 0 10px rgba(0,0,0,1)"/>
</div>
<div class="col-md-4" style="width:25%">
<ul class="list-inline quicklinks">
<li><a class="page-scroll" href="#contact">Contact us</a>
<a target="_blank" href="docs/Terms Conditions and Privacy Policy.pdf">Disclaimer and Privacy Policy</a></li>
<li>PAIA Manual</li>
</ul>
</div>
<div class="col-md-4" style="width:20%;margin-left:12%;">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4" style="width:25%;margin-left:14%">
<span class="copyright">Copyright © www.vccb.co.za 2016</span>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="Scripts/ContactUs.js"></script>
<script>
var once = true;
var count = 0;
$('#back-top').fadeOut();
function isScrolledIntoView(elem) {
var centerY = Math.max(0, ((jQuery(window).height() - jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
centerY = parseFloat(centerY) + 300;
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function () {
jQuery(".in").each(function (index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).animate({ opacity: 1.0 }, 300);
}
});
});
$(document).on("click", "#vis", function () {
$(".in").css("opacity", "1.0");
});
$(document).on("click", "#giveMail", function () {
alert("Please fill the form in and email it to tracesupport#vccb.co.za");
});
$(document).on("click", "#request", function () {
window.location.href = "/RequestAccount.html";
});
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
</script>
To use bootstrap for responsive design, you need to specify the number of columns for different sizes. Bootstrap is split into 4 breakpoints:
col-xs-* (extra small)
col-sm-* (small)
col-md-* (medium)
col-lg-* (large)
It is a mobile first framework, so specify the size for extra small first, then specify the point at which the size should change. Eg. If you wanted a div to be 12 columns at extra small, small, and medium, but only 6 columns on large, you would do <div class="col-xs-12 col-lg-6">.
You can specify all breakpoints, but if you don't, it will default to the smallest one specified.
In your code, you have set the size for only one breakpoint, and you have not gone mobile-first, so it is not responsive.
The reason the navbar is not collapsing is because you have not put the button inside the div.navbar-header. There needs to be a button with data-toggle="collapse" and data-target="#idOfNav". This is what appears on smaller screens and what toggles the navbar to collapse/expand. For example:
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
And this would go in the navbar-header.
Here's a codepen of a default bootstrap navbar, so you can see how it should be: http://codepen.io/Xhaerithius/pen/ZQPqNz
Also, you can use a bootstrap navbar for your footer as well. Just change the class of navbar-static-top to navbar-fixed-bottom. Your footer needs to be responsive too! :D
I have a mustache.js template that contains an <a> which targets myModal like so:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
Here is the modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
When the result is clicked it darkens the screen but no modal is displayed. I am led to believe that the modal is conflicting with something in the javascript because i cannot get a modal to work anywhere on the site directory.
here are my links to javascript:
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
I also have a few inline script tags running JS
I need to get the modal to display upon clicking the <a> in the moustache.js template.
FYI here is the full HTML page starting at the <body> tag:
<body>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h3 class="modal-title">BluLocker</h3>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
<img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
</div>
</div>
</div>
<p>...</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro-header" style="background-image: url('img/slidedeck/ex1.jpg')">
<div style="background: rgba(0,0,0, 0.5);">
<div class="container">
<div class="row">
<div class="site-heading">
<h1>NETWORK</h1>
<hr class="small">
<h2 class="subheading">The most valuable part of EPG is the people.</h2>
</div>
</div>
</div>
</div>
</header>
<div class="search-navbar">
<input type="search" name="search" id="search" placeholder=""/>
</div>
<div class="container">
<div id="profile-results" class="row">
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="" target="_blank">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Entrepreneurship for the Public Good 2015</p>
</div>
</div>
</div>
</footer>
</div>
Then I have a bunch of inline JavaScript and the closing </body>:
<script id="profile-preview-template" type="text/template">
<div class="col-sm-3">
<a style="display:block" data-toggle="modal" data-target="#myModal">
<div class="profile-preview">
<img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
<h1>{{first_name}} {{last_name}}</h1>
<h2 class="text-muted">{{major}}</h2>
<h3 class="text-muted">Cohort {{cohort}}</h3>
</div>
</a>
</div>
</script>
<script id="modal-template" type="text/template">
<div id="myModal">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<img width="300px" src="{{img_url}}" alt="Profile of {{first_name}} {{last_name}}" class=" img-circle img-responsive">
</div>
<div class="col-sm-6">
<h1>{{first_name}} {{last_name}}</h1>
<h2>{{major}}</h2>
<h3>{{cohort}}</h3>
<h4>{{home_town}}</h4>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<h1>About {{first_name}}</h1>
</div>
<div class="col-xs-6">
<h3>Status:{{status}}</h3>
</div>
</div>
<div class = "row">
<p>{{bio}}</p>
</div>
</div>
LinkedIn →
</div>
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<script type="text/javascript">
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, "i");
$.getJSON('/profiles.json', function(data){
var result =""
$.each(data.profiles, function(key, val){
var fullName = val.first_name + " " + val.last_name
var cohortNum = val.cohort.toString()
var cohortName = "cohort " + cohortNum
if ((val.first_name.search(myExp) != -1) ||
(val.last_name.search(myExp) != -1) ||
(val.major.search(myExp) != -1) ||
(fullName.search(myExp) != -1)||
(cohortNum.search(myExp) != -1)||
(cohortName.search(myExp) != -1)
){
var template = $('#profile-preview-template').html();
result += Mustache.render(template, val);
}
});
$('#profile-results').html(result);
});
});
</script>
</body>
And also FYI here is the custom.js file:
$(function(){
//Variables
var slideqty = $('#featured .item').length; //get the number of slides in the carousel deck
var wheight = $(window).height(); //get the height of the window
var randSlide = Math.floor(Math.random()*slideqty); //pick a random number from 0-slideqty
//makeIndicators
//Automatically make indicators on the carousel for each slide in the deck
for (var i=0; i < slideqty; i++) {
var insertText = '<li data-target="#featured" data-slide-to="' + i + '"';
if (i === 0) {
insertText += ' class="active" ';
}
insertText += '></li>';
$('#featured ol').append(insertText);
}
$('.carousel').carousel({
pause: false
}); // end of makeIndicator
//fullHeight
// set all elements with class "fullheight" to a height equal to height of viewport on load
$('.fullheight').css('height', wheight);
//resize the "fullheight" elements on screen resize
$(window).resize(function() {
wheight = $(window).height(); //get the height of the window
$('.fullheight').css('height', wheight); //set to window tallness
});
//adjust the interval of the carousel
$('.carousel').carousel({
interval: 10000 //changes the speed in miliseconds
})
//make images darker
$('.item img').each(function() {
$(this).wrap('<div class="tint"></div>'); //wraps the carousel images with a div of class "tint"
});
//animate the contents of the search bar
var txt = "Search by name, major, or cohort.";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('#search').attr('placeholder', '|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function () {
char++;
var type = txt.substring(0, char);
$('#search').attr('placeholder', type + '|');
typeIt();
if (char == txtLen) {
$('#search').attr('placeholder', $('#search').attr('placeholder').slice(0, -1)) // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}()
);
//shuffle takes an array and shuffles it
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
//load 20 random profiles
function loadRand(){
$.getJSON('/profiles.json', function(data){
rand = ""
randProfiles = shuffle(data.profiles);
for (var i = 0; i < 20; i++) {
var template = $('#profile-preview-template').html();
rand += Mustache.render(template, randProfiles[i]);
}
$('#profile-results').html(rand);
});
};
loadRand(); //load random profiles on refresh
//if search is empty load 20 random profiles
$('#search').keyup(function() {
var searchField = $('#search').val();
if (searchField == ''){
loadRand();
}
});
}); //end of main function
Change id of your div from item1 to "myModal" as you are using data-target="#myModal" in your code.
I am very new to AngularJS.
My problem is filtering - with a custom function.
I am trying to obtain the following:
checkboxes for product categories
checkboxes for product sub-categories
product showcase
When the user clicks on a category , the sub-categories must update ( be enabled, selected) and then, the products (filtered).
What i have so far in terms of angular (app.js):
var ProductApp = angular.module('ProductApp', []);
var rootUrl = $("#linkRoot").attr("href");
ProductApp.controller('ProductController', function ($scope, $http, $timeout) {
$http.get(rootUrl + '/GetJsonCategories').success(function (data) {
$scope.categories = data;
});
$http.get(rootUrl + '/GetJsonSubCategories').success(function (data) {
$scope.subcategories = data;
});
$http.get(rootUrl + '/GetJsonProducts').success(function (data) {
$scope.products = data;
})
.then(function (data, status, headers, config) {
$timeout(function () {
runJqueryScripts();
}, 0); // time here
})
$scope.showAll = true;
function ForceFilterFn() {
for (product in $scope.products) {
$scope.filterFn($scope.products[product]);
}
};
$scope.filterFn = function (product) {
if ($scope.showAll) { return true; }
var sel = false;
for (category in $scope.subcategories) {
var t = $scope.subcategories[category];
if (t.selected) {
if (product.CategoryId === t.CategoryId ) {
return true;
}
}
}
return sel;
};
$scope.ChangeCategory = function () {
alert("Category Changed");
};
$scope.ChangeSubCategory = function () {
for (t in $scope.subcategories) {
if ($scope.subcategories[t].selected) {
$scope.showAll = false;
//ForceFilterFn();
return;
}
}
$scope.showAll = true;
//ForceFilterFn();
};
});
function equalHeight(group) {
tallest = 0;
group.each(function () {
thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function () { $(this).height(tallest); });
}
function runJqueryScripts() {
equalHeight($(".thumbnail"));
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function () {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function () {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
}
In terms of html markup:
<div ng-app="ProductApp" class="container">
<!-- upper section -->
<div class="row">
<div class="col-sm-3">
<!-- left -->
<h3><i class="glyphicon glyphicon-cog"></i> Filters</h3>
<hr>
<ul ng-controller="ProductController" class="nav nav-stacked" id="categoryfilter">
<li>
<a id="MainCategory" href="">
<i class="glyphicon glyphicon-tag"></i> Product categories
</a>
</li>
<li ng-repeat="category in categories">
<input type="checkbox" ng-model="category.selected" value="{{category.CategoryId}}" ng-change="ChangeCategory()"> {{category.Text}}
</li>
</ul>
<ul ng-controller="ProductController" class="nav nav-stacked" id="subcategoryfilter">
<li>
<a id="SubCategory" href="">
<i class="glyphicon glyphicon-tags"></i> Product sub-categories
</a>
</li>
<li ng-repeat="subcategory in subcategories">
<input type="checkbox" ng-model="subcategory.selected" value="{{subcategory.CategoryId}}" ng-change="ChangeSubCategory()"> {{subcategory.Text}}
</li>
</ul>
<hr>
</div><!-- /span-3 -->
<div class="col-sm-9">
<!-- column 2 -->
<h3><i class="glyphicon glyphicon-dashboard"></i> Products </h3>
<hr>
<div ng-controller="ProductController" class="row">
<div ng-repeat="product in products | filter:filterFn" class="col-xs-6 col-sm-4">
<div class="thumbnail">
<img ng-src="#Url.Action("LoadImage", "Images")?ImagePath={{ product.ImagePath}}" alt="Product image" class="img-responsive" />
<div class="caption">
<strong> {{ product.ProductName }}</strong>
<p> {{ product.Description }}</p>
<p>
<span class="label label-primary pull-left">Price</span>
<span class="label label-primary label-as-badge pull-right"> {{ product.Price }} </span>
</p>
<p>
<a href="#" class="btn btn-primary center-block" role="button">
<span class="glyphicon glyphicon-shopping-cart" style="vertical-align:middle"></span> Order
</a>
</p>
</div>
<strong>{{ product.ProductName }}</strong>
</div>
</div>
</div>
<!--/col-span-6-->
</div><!--/row-->
</div><!--/col-span-9-->
</div><!--/row-->
#section Scripts{
<script type="text/javascript" src="#Url.Content("~/Scripts/angular.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/app.js")"></script>
}
At the moment the filtering doesn't work. The products are not updated.
It's as if I should resubmit everything, because $scope.filterFn only gets called once, when the page loads.
Many thanks in advance for any help.
It is probably because of the multiple ProductController you have assigned to the ProductCategory and SubCategory blocks. The two(three counting the one used to display)are different instances of the same controllers. So they each have a copy of the same products variable. I would suggest binding ProductController once to the parent element instead of doing it three times in the children elements.
This is probably what you intended:
<div ng-app="ProductApp" class="container">
<!-- upper section -->
<div class="row" ng-controller="ProductController" >
<div class="col-sm-3">
<!-- left -->
<h3><i class="glyphicon glyphicon-cog"></i> Filters</h3>
<hr>
<ul class="nav nav-stacked" id="categoryfilter">
<li>
<a id="MainCategory" href="">
<i class="glyphicon glyphicon-tag"></i> Product categories
</a>
</li>
<li ng-repeat="category in categories">
<input type="checkbox" ng-model="category.selected" value="{{category.CategoryId}}" ng-change="ChangeCategory()"> {{category.Text}}
</li>
</ul>
<ul class="nav nav-stacked" id="subcategoryfilter">
<li>
<a id="SubCategory" href="">
<i class="glyphicon glyphicon-tags"></i> Product sub-categories
</a>
</li>
<li ng-repeat="subcategory in subcategories">
<input type="checkbox" ng-model="subcategory.selected" value="{{subcategory.CategoryId}}" ng-change="ChangeSubCategory()"> {{subcategory.Text}}
</li>
</ul>
<hr>
</div><!-- /span-3 -->
<div class="col-sm-9">
<!-- column 2 -->
<h3><i class="glyphicon glyphicon-dashboard"></i> Products </h3>
<hr>
<div class="row">
<div ng-repeat="product in products | filter:filterFn" class="col-xs-6 col-sm-4">
<div class="thumbnail">
<img ng-src="#Url.Action("LoadImage", "Images")?ImagePath={{ product.ImagePath}}" alt="Product image" class="img-responsive" />
<div class="caption">
<strong> {{ product.ProductName }}</strong>
<p> {{ product.Description }}</p>
<p>
<span class="label label-primary pull-left">Price</span>
<span class="label label-primary label-as-badge pull-right"> {{ product.Price }} </span>
</p>
<p>
<a href="#" class="btn btn-primary center-block" role="button">
<span class="glyphicon glyphicon-shopping-cart" style="vertical-align:middle"></span> Order
</a>
</p>
</div>
<strong>{{ product.ProductName }}</strong>
</div>
</div>
</div>
<!--/col-span-6-->
</div><!--/row-->
</div><!--/col-span-9-->
</div><!--/row-->