Angular JS - Filtering on ng-repeat

Angular JS - Filtering on ng-repeat - javascript

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-->

Related

Deleting data on firebase with unique id as reference

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.

Select the last element using id and class

I'm trying to develop a load-more function using jquery. With my current approach I only load more content after the last question-summay which appears in the last tab pan of my table. I want, when I click on my load-more button to load my content after the last question-summary of that question-col with the respective id.
My JS function:
$(document).ready(function () {
$(".loadMore").on('click', function () {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data), tab);
});
$(this).data('next-page', parseInt(next_page) + 1);
});
siteStats();
});
function addNewQuestions(objects, tab) {
$.each(objects, function (i, object) {
console.log(tab);
var lastItem = $(".question-summary:last");
console.dir(lastItem);
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-info');
updateTitleAndLink(newObject.find('.summary a'), object);
updateCreationDate(newObject.find('.question-updated-at'), object);
updateQuestionAnswers(newObject.find('.question-answers'), object);
updateAnswerCount(newObject.find('.answers-count'), object);
updateViewsCount(newObject.find('.views-count'), object);
updateVotesCount(newObject.find('.votes-count'), object);
updateSolvedStatus(newObject.find('.status'), object)
lastItem.after(newLine);
});
}
I believe the problem is on the line var lastItem = $("question-summary:last");. I tried a lot of different solutions, like .question-col#tab.question-summary to select the correct element with id tab but that did not work.
<div id="tabs" class="tab-content">
<ul>
<li>Recent Questions</li>
<li>Unanswered Questions</li>
<li>Top Scored Questions</li>
</ul>
<div id="recent_questions" class="question-col">
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "recent_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="unanswered_questions" class="question-col">
{foreach $unanswered_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "unanswered_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="top" class="question-col">
{foreach $top_scored_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "top_scored_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
</div>
Any idea what I'm doing wrong?
Kind regards

You forgot the class (dot) selector:
var lastItem = $("question-summary:last");
Try this:
var numQ = $('.question-summary').length;
var lastItem = $('.question-summary').eq(numQ-1);

To select last you can use .last() with class selector like
alert($('.myList').last().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="myList">One</li>
<li class="myList">Two</li>
<li class="myList">Three</li>
</ul>

How can I have the inbox area show once the document is finished loading?

Basically trying to create kind of an inbox for my person portfolio (more of a learning experience, then anything serious, or of use).
Right now when this document loads within an ajax/javascript function, it loads showing ALL emails (instead of just showing the Inbox section by default)
I've tried adding a function in javascript for "on document load" but I believe I may not have the css correct or anything.
My code is below:
<div id="messages" class="container-fluid">
<div class="row">
<div id="breadcrumb" class="col-xs-12">
<a href="#" class="show-sidebar">
<i class="fa fa-bars"></i>
</a>
<ol class="breadcrumb pull-left">
<li>Dashboard</li>
<li>Modules</li>
<li>Messages</li>
</ol>
<div id="social" class="pull-right">
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-xs-12">
<div class="row">
<ul id="messages-menu" class="nav msg-menu">
<li>
<a href="#" class="" id="msg-inbox">
<i class="fa fa-inbox"></i>
<span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-starred">
<i class="fa fa-star"></i>
<span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-important">
<i class="fa fa-bookmark"></i>
<span class="hidden-xs">Read (<?php echo $readCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-trash">
<i class="fa fa-trash-o"></i>
<span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span>
</a>
</li>
</ul>
<div id="messages-list" class="col-xs-10 col-xs-offset-2">
<?php
while ($row = mysqli_fetch_assoc($getEmails)) {
$email_id = $row['email_id'];
$emailStatus = $row['emailStatus'];
$contactName = $row['contactName'];
$contactEmailAddress = $row['contactEmailAddress'];
$messageBody = $row['messageBody'];
$tempEmailDate = $row['emailDate'];
$emailDate = date("d-m-Y", strtotime($tempEmailDate));
$contactName = strtoupper($contactName);
$contactEmailAddress = strtoupper($contactEmailAddress);
if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) {
echo "
<div class='row one-list-message msg-inbox-item' id='msg-one'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else if ($emailStatus == 1 || $emailStatus == 2) {
echo "
<div class='row one-list-message msg-inbox-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
if ($emailStatus == 1) {
// Unread section
echo "
<div class='row one-list-message msg-starred-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
$updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'");
} else {
if ($emailStatus == 2) {
// Read section
echo "
<div class='row one-list-message msg-important-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else {
if ($emailStatus == 3) {
// Deleted section
echo "
<div class='row one-list-message msg-trash-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
}
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#msg-inbox').show();
});
// Add listener for redraw menu when windows resized
window.onresize = MessagesMenuWidth;
$(document).ready(function() {
// Add class for correctly view of messages page
$('#content').addClass('full-content');
// Run script for change menu width
MessagesMenuWidth();
$('#content').on('click','[id^=msg-]', function(e){
e.preventDefault();
$('[id^=msg-]').removeClass('active');
$(this).addClass('active');
$('.one-list-message').slideUp('fast');
$('.'+$(this).attr('id')+'-item').slideDown('fast');
});
$('html').animate({scrollTop: 0},'slow');
});
</script>
Can anyone see how I'd do the javascript to have the msg-inbox load when the page loads? instead of loading none and displaying all emails.
Thank you!

When trying to hide and/or show divs, jquery is your best friend. It's simple and looks nice.
Start by wrapping your read & unread messages in a div id of "inbox"
Then give each of your inbox divs an id like "read" & "unread"
Using the code below you can hide/show your individual divs.
Place this between your <head> </head> tags
<script src="JS/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Unread").click(function(){
$("#unread").slideToggle(500, function() {
});
});
$("#Read").click(function(){
$("#read").slideToggle(500, function() {
});
});
$("#Deleted").click(function(){
$("#deleted").slideToggle(500, function() {
});
});
});
</script>
<style>
#unread {
display: none;
}
#read {
display: none;
}
#deleted {
display: none;
}
</style>
Then in the body of your page, you can do something like this
<div id="inbox">
<div id="unread_msgs">
<button id="Unread">Show/Hide Unread</button>
<div id="unread">
<p>These </p>
<p>are</p>
<p>my</p>
<p>unread</p>
<p>messages</p>
</div><!-- end unread -->
</div><!-- end unread_msgs -->
<div id="read_msgs">
<button id="Read">Show/Hide Read</button>
<div id="read">
<p>These </p>
<p>are</p>
<p>my</p>
<p>read</p>
<p>messages</p>
</div><!-- end read -->
</div><!-- end read_msgs -->
</div><!-- end inbox -->
<div id="deleted_msgs">
<button id="Deleted">Show/Hide Deleted</button>
<div id="deleted">
<p>These </p>
<p>are</p>
<p>my</p>
<p>deleted</p>
<p>messages</p>
</div>
</div>
Hope this helps. It should get you going in the right direction.
References
jquery slidetoggle

Check box is not shown as unchecked

I tried the following in my Angular app :
$(document).on('click touchend', '.dropdown-menu', function(e) {
console.log("Inside....click on");
e.stopPropagation();
console.log("stop..prop");
});
and still my checkbox is not showing unchecked mark even if the ng-model value is set to false properly. What might be the reason?
MY HTML:
function clearAll() {
for (var i = 0; i < vm.list.length; i++) {
if (vm.list[i].flag === true) {
vm.list[i].flag = false;
vm.listFilterCount -= (vm.list[i].value.length + 3);
}
}
vm.listFilterS = '';
vm.count= ' ';
vm.include= [];
vm.list= [];
}
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 borderAtRight"
<!-- Dropdown and Menu -->
<div class="btn-group topFilterCtrl filterDropdn" dropdown dropdown-append-to-body id="ddlStatus">
<div id="btn-append-to-body" type="button" class="btn btn-primary panelTextFont14 noBorder" dropdown-toggle> Status
<span class="caret caretSpan"></span>
</div>
<ul class="dropdown-menu dropDownLabel" role="menu" aria-labelledby="btn-append-to-body" ng-show="!vm.showthis">
<div class="customScroll">
<li role="menuitem" class="changeColorOnHover" ng-repeat="optionThis in vm.List track by $index" ng-show="list.value != null">
<a href="#">
<div class="checkbox" id="{index}" ng-show="this.value != null" ng-click="vm.applyFilterForResultCount()" ng-change="vm.getCount(this)" ng-model="this.flag">
<label>
<input type="checkbox" ng-click="vm.clickStatusCheckBox(this);$event.stopPropagation();" ng-show="this.value != null" />
{{this.value}}
</label>
</div>
</a>
</li>
</div>
<!--Clear div-->
<li role="menuitem" class="btn btn-default buttonli" ng-click="vm.clearAll()">
<a href="#">
<p>
<span class="clearAllBtn">Clear</span>
<span class="dropDownBtnItem"> – All </span>
</p>
</a>
</li>
</ul>
</div>
Screenshot of problem:

Bootstrap Modal - window darkens but no modal

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.

We Keep Coding

JavaScript is the programming language of the Web.

Angular JS - Filtering on ng-repeat - javascript

Related

Deleting data on firebase with unique id as reference

Select the last element using id and class

How can I have the inbox area show once the document is finished loading?

Check box is not shown as unchecked

Bootstrap Modal - window darkens but no modal

Categories

Resources