Why console.log(response.data); in http get, returns html of all page, but not the value of returnUrl('Home/Index').
I think that the problem is in await SignInAsync(user, model.RememberMe);.
Controller:
[HttpGet]
[AllowAnonymous]
public async Task<JsonResult> Login(string UserName, string Password, bool RememberMe, string returnUrl)
{
LoginViewModel model = new LoginViewModel();
model.Password = Password;
model.UserName = UserName;
model.RememberMe = RememberMe;
if (ModelState.IsValid)
{
var user = await UserManager.FindAsync(model.UserName, model.Password); if (user != null)
{
if (user.ConfirmedEmail == true)
{
await SignInAsync(user, model.RememberMe);
return Json(returnUrl, JsonRequestBehavior.AllowGet);
}
else
{
ModelState.AddModelError("", "Confirm Email Address.");
}
}
else
{
ModelState.AddModelError("", "Invalid username or password.");
}
}
// If we got this far, something failed, redisplay form
return Json(returnUrl, JsonRequestBehavior.AllowGet);
}
AngularJS:
$scope.answer = function (answer) {
$scope.returnUrl = '/Home/Index';
$http({
method: 'GET',
url: '/Account/Login',
params: {
UserName: $scope.model.UserName,
Password: $scope.model.Password,
RememberMe: $scope.model.RememberMe,
returnUrl: $scope.returnUrl
}
}).then(function (response) {
console.log(response.data);
}, function () {
console.log("Error occured");
});
html response
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - My ASP.NET Application</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/Custom/Login.js"></script>
<script src="/Scripts/angular-material/angular-material.js"></script>
<script src="/Scripts/angular-animate/angular-animate.js"></script>
<script src="/Scripts/angular-aria/angular-aria.js"></script>
<script src="/Scripts/angular-messages.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.0.8/docs.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li><div ng-app="LoginApp" ng-controller="LoginCtrl"><input type="button" value="Login" ng-click="showAdvanced($event)" /></div></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="78GcsaZMHozpxPWZojKt_U4oOlCC91bdiNLnrM9bnGkHAwTdludG--qpyQSGXaurmBHnyYUiIlGpNsGfkskwnMHyc_BozsM2pdl4IWBoWos27DcNf3c57PLPRcmNBm-INZRgLICtO1PG4DcOWJRm6yj6Sr_kSDElCuPf-H8AD2BACTChafGXEic38UObx3PdnTDg-C6Iah7AyhjZvagKlw2" /> <ul class="nav navbar-nav navbar-right">
<li>
Hello Anton!
</li>
<li>Log off</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>About</h2>
<hr />
<footer>
<p>© 2016 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/bundles/bootstrap"></script>
</body>
</html>
Based on your code,
If login success it will return a json with returnUrl.
But if login fail it will return an html document with error messages.
So the reason you are getting back HTML is because you probably have error in login process.
Related
I'm trying to add an error checker whenever I place an invalid email and/or password. What I want to happen if I provide an invalid email or password the page should provide a window alert about the error.
My .js code
(function(){//initialize the firebase app
var config = {
assume there are credentials here
};
firebase.initializeApp(config);
var auth = null;
var loginBtn= document.getElementById('btnLogin');
firebase.auth.Auth.Persistence.SESSION;
//Login
loginBtn.addEventListener('click', e => {
e.preventDefault();
if( $('#email').val() != '' && $('#password').val() != '' ){
//login the user
var data = {
email: $('#email').val(),
password: $('#password').val()
};
firebase.auth().signInWithEmailAndPassword(data.email, data.password)
.then(function(authData) {
auth = authData;
})
.catch(function(error) {
console.log("Login Failed!", error);
window.alert("Login Failed!", error);
});
}
});
})();
My issue is that the window alert does not execute. I already tried an else statement it won't work as well.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | DIABEATIS by Team Buendia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/diabeatis.jpg" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js" ></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-storage.js"></script>
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-30 p-b-20">
<form id="loginForm" method="POST">
<img src="images/icons/diabeatis.jpg" width="70%" style="margin: 0px auto 20px;display: block;" alt="AVATAR">
<span class="login100-form-title p-b-40">
<font face="Montserrat">By Team Buendia</font>
</span>
<div class="wrap-input100 validate-input m-t-25 m-b-35" data-validate="Enter username">
<font face="Montserrat">Email</font>
<input class="input100" type="text" name="loginEmail" style="font-family:Montserrat;" id="email">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password" >
<font face="Montserrat">Password</font>
<input class="input100" type="password" name="loginPassword" id="password">
<span class="focus-input100"></span>
</div>
<button type="submit" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>
<ul class="login-more p-t-40">
<font face="Montserrat">Don't have an account?</font>
<li class="m-b-8">
<a href="signup.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Create Account</font>
</a>
</li>
<font face="Montserrat">Are you a doctor? Login here</font>
<li class="m-b-8">
<a href="" class="txt2" style="color:#01703D">
<font face="Montserrat">DIABEATIS for Doctors</font>
</a>
</li>
<font face="Montserrat">By Logging in you agree to our Terms & Conditions, as well as, our privacy and policy</font>
<br>
<li class="m-b-8">
<a href="toc.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Terms & Conditions</font>
</a>
</li>
<li class="m-b-8">
<a href="privacypolicy.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Privacy and Policy</font>
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
<script src="signin.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(user){
window.location.href = "patientDashboard.html";
console.log(user);
}
else{
console.log('no user present');
}
});
</script>
</body>
</html>
It is probably because you assign the submit type to your button and the POST method to your form. Therefore your form is probably submitted before the signInWithEmailAndPassword() Firebase method is triggered and/or the Promise it returns is resolved.
Changing the type to button, as follows, should do the trick:
<button type="button" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>
See the W3 specification for more detail.
I'm making a web application with flask that takes a submitted value from a form and, sends it to a python function, and returns the response to html.
main.py:
app = Flask(__name__)
#app.route('/')
def index():
return render_template("index.html")
#app.route('/', methods=['POST'])
def search_form():
print(request.form)
x = request.form['searchinput']
a = Vbulletin(x)
#a.reg_ver()
def result_gen():
return a.reg_ver()
result_gen()
temp = []
for s in result_gen():
text = s
print(text)
I want to use ajax to send the form to flask. I know I can just use html to handle the form, but i want to figure out how to do it with ajax.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>UserFind Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='search.js') }}"></script>
</head>
<body>
<nav>
<ul id="navlist">
<h1>Userfind</h1>
<li><a class="btn" href="#home">Home</a></li>
<li><a class="btn" href="#contact">Contact</a></li>
<li><a class="btn" href="#about">About</a></li>
<form name=searchbar>
<ul id="navsearch">
<li class="search">
<input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
</li>
<li><button type="submit" class="btn-default">Submit</button></li>
</ul>
</form>
</ul>
</nav>
<p>{{ text }}</p>
<div class="footer">
<p>©2019 Userfind</p>
</div>
</body>
</html>
I know I can just add the method like:
<form method="POST" name=searchbar>
But im trying to learn how to do it with jquery/ajax.
search.js:
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
$.ajax({
data : {
x : $('#searchinput').val(),
console.log(x)
},
type : 'POST',
url : '/'
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
}
else {
$('#successAlert').text(data.x).show();
$('#errorAlert').hide();
}
});
});
});
I've tried several different ways but ajax is never call. When i inspect the html no ajax is present on the form either. It just sends a get request. So how can fix this so AJAX is called when I submit the form?
$('form').on('click', function(event) {
event.preventDefault();
$.ajax({
data: {
x: $('#searchinput').val()
},
type: 'POST',
url: '/',
success: function() {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
} else {
$('#successAlert').text(data.x).show();
$('#errorAlert').hide();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>UserFind Home</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='search.js') }}"></script>
</head>
<body>
<nav>
<ul id="navlist">
<h1>Userfind</h1>
<li><a class="btn" href="#home">Home</a></li>
<li><a class="btn" href="#contact">Contact</a></li>
<li><a class="btn" href="#about">About</a></li>
<form method="POST" name="searchbar">
<ul id="navsearch">
<li class="search">
<input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
</li>
<li><button type="button" class="btn-default">Submit</button></li>
</ul>
</form>
</ul>
</nav>
<p>{{ text }}</p>
<div class="footer">
<p>©2019 Userfind</p>
</div>
</body>
</html>
I had my code set up to click form instead of button.
I changed:
$('form').on('click', function(event)
to this:
$("#submit").click(function(e)
In flask I also had to change:
x = request.form['searchinput']
to:
x = request.form['id']
because that was what data was being passed to flask as.
In the end js looked like this:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "/",
data: { id: $("#searchinput").val()},
success:function(){
alert("POST was sent.");
}
})
});
});
I added a breakpoint at login function. When I submit the form, the login function should be called; but it's not called. And when I log in, the page doesn't redirect to window.location. I want the page to be redirected if the login credentials are the same as the one in local storage. I know we shouldn't validate your code client side. But for now, let's just ignore that.
var db = window.localStorage;
function signUp() {
var signupFormDt = document.querySelector('#signup-form');
var email = signupFormDt.querySelector('input[name="email"]');
var password = signupFormDt.querySelector('input[name="password"]');
var userName = signupFormDt.querySelector('input[name="name"]');
db.setItem(userName.name, userName.value);
db.setItem(email.name, email.value);
db.setItem(password.name, password.value);
}
function login() {
var loginFormDt = document.querySelector('#login-form');
var logEmail = loginFormDt.querySelector('input[type="email"]');
var logPass = loginFormDt.querySelector('input[type="password"]');
if (db.email == logEmail.value && db.password == logPass.value) {
window.location = 'http://www.google.com';
} else {
window.location = "http://www.google.com";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--Link to StyleSheet-->
<link rel="stylesheet" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>
</h1>
<nav>
<ul class="clearfix">
<li>
<a href="#">
<h4>Home</h4>
</a>
</li>
<li>
<a href="../html/about.html">
<h4>About</h4>
</a>
</li>
<li>
<a href="#">
<h4>Contact</h4>
</a>
</li>
<li>
<a href="#">
<h4 id="social">Social</h4>
<div class="arrow"></div>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Snapchat</li>
<li>Tumblr</li>
</ul>
</a>
</li>
</ul>
<!-- end of ul of main nav-->
</nav>
<!--end of nav-->
</div>
<!--end of container-->
</header>
<main>
<section>
<h3>login Page</h3>
<div id="login">
<p>Myselfie Tech</p>
<form method="Post" id="login-form">
<p>
<input type="email" name="email" id="email" placeholder="email" required>
</p>
<p>
<input type="password" name="password" id="password" placeholder="password" required>
</p>
<p>
<button type="submit" onsubmit="login()">Submit Query</button>
</p>
<p>
<button onclick="window.location='../html/index.html'">Back</button>
</p>
</form>
</div>
</section>
</main>
<footer>
<p>
<center><small>©Copyright 2017 programmers inc.</small></center>
</p>
</footer>
<!--Link to Javascript-->
<script src="../javascript/scripts1.js"></script>
</body>
</html>
A button element does not have an onsubmit attribute. You should put that attribute on the form tag for it to work. Also make sure that the form submission is cancelled, since you want to control the navigation differently, with window.location:
Add return:
<form onsubmit="return login();">
Add return false, and .href after location:
function login() {
var loginFormDt = document.querySelector('#login-form');
var logEmail = loginFormDt.querySelector('input[type="email"]');
var logPass = loginFormDt.querySelector('input[type="password"]');
if (db.email == logEmail.value && db.password == logPass.value) {
window.location.href = 'http://www.google.com';
} else {
window.location.href = "http://www.google.com";
}
return false; // <------
}
Try using input tag instead of button for submit
something like
<input id="clickMe" type="button" value="Submit Query" onclick="login()" />
I'm currently in the middle of a project and have stumbled across a problem. I have one HTML file called index.html that holds the base functionality pages of my app(welcome page, login and register) and a second HTML page called home.html that you reach after successful login which is suppose to display a leaflet map with user location. Problem is when I successfully login the map does not show unless I refresh the page and this is undesirable.
For the past few days I have tried every combination of where to put the map JS on the second HTML page. I have tried putting the code inside script tags inside the div data-role section and I still need to refresh to see the map. I understand that JQM only calls the div data-role. The code is being called because I am prompted to allow location and if I log to the console the JS is being called but still no map.
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery and JQuery mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Bootstrap -->
<!--<link rel="stylesheet" href="../resources/bootstrap/dist/css/bootstrap.min.css">
<script src="../resources/bootstrap/dist/js/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- LeafletJS -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<!-- CSS & Scripts -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/header.css">
</head>
<body>
<!-- Login Page Begin -->
<div data-role="page" id="loginPage">
<div data-role="main" class="ui-content">
<h2 class="text-center"><strong>Login to GeoBus</strong></h2>
<div class="loginForm">
<form method="post">
<fieldset data-role="controlgroup">
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input class="form-control" type="email" id="email" placeholder="user#user.com" required="required">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input class="form-control" type="password" id="password" placeholder="Enter a Password" required="required">
<br>
</div>
<div class="form-group">
<button type="submit" id="loginButton" value="Login">Login</button>
</div>
</fieldset>
</form>
<div class="alert alert-danger" id="failAlert">
</div>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
index.js
$('#loginButton').click(function () {
var passwordStrengthRegex = /((?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,12})/gm;
var email = $("#email").val();
var pword = $("#password").val();
if(!pword.match(passwordStrengthRegex) && pword.length != 0){
$('#failAlert').html("<center>Password Rules: 6-12 Characters & At Least 1 Uppercase, 1 Lowercase, 1 Number.</center>");
hideShowAlert($('#failAlert'));
}
else if (email.length != 0 && pword.length != 0) {
var data = {
email: email,
password: pword
};
$.ajax({
type: "POST",
data: JSON.stringify(data),
url: "https://www.geobus.co.uk/api/v1/login",
success: function (data) {
if (data.error == false) {
sessionStorage.user = data.user;
sessionStorage.token = data.token;
$.mobile.pageContainer.pagecontainer("change", "home.html");
//$.mobile.changePage("home.html"); //,{reloadPage: true});
} else if (data.error == true) {
$('#failAlert').html("<center>Invalid Login Credentials!</center>");
hideShowAlert($('#failAlert'));
}
},
error: function (data) {
$('#failAlert').html("<center>Whoops Something Has Gone Wrong!</center>");
}
});
return false;
}
});
home.html
<body>
<div data-role="page" id="home">
<div data-role="panel" id="menu" data-swipe-close="true" data-display="overlay">
<ul class="nav navbar-nav" id="slideMenu">
<center>
<label class="menuLabel">Swipe to Close</label><span id="slideGlyph" class="glyphicon glyphicon-chevron-left"></span></center>
<li>Home</li>
<li>Track</li>
<li>Timetables</li>
<li>Routes</li>
<li>Log Out</li>
</ul>
</div>
<div data-role="header" class="ui-header">
<a href="#menu" class="navbar-toggle" role="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<img src="../images/logo.png" id="logo" alt="GeoBus Logo">
</div>
<div data-role="main" class="ui-content">
<div class="alert alert-success" id="successAlert">
Successfull Login!
</div>
<div id="map"></div>
<script>
map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var userIcon = L.icon({
iconUrl: '../images/userMapPin.png',
iconSize: [38, 85],
iconAnchor: [22, 94]
});
map.locate({
setView: true,
maxZoom: 18,
enableHighAccuracy: true
});
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng, {
icon: userIcon
}).addTo(map)
.bindPopup("You are within " + radius + " meters of this point.").openPop$
}
function onLocationError(e) {
alert(e.message);
}
</script>
</div>
</div>
</body>
</html>
Sorry for the mess of code I have shortened it as much as possible. I did have the script tag code in home.html separated out into it's own file but I still needed a refresh. Has anybody got any idea where my problem is? I'm loosing my mind. Any help would be greatly appreciated.
I had this:
<div data-role="main" class="ui-content">
<div id="map"></div>
</div>
This was the fix.
<div id="map" data-role="main" class="ui-content">
Thanks for the help Omar.
Im trying to filter items in a table based on checked values but I am only able to filter one of the values at a time. What should I do to filter all the checked values?
This is the JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('employees', function(){});
});
App.EmployeesRoute = Ember.Route.extend({
model: function(){
return App.EMPLOYEES;
}
});
App.EmployeesController = Ember.ArrayController.extend({
inFinance: false,
inMarketing: false,
filtered: function(){
var inFinance = this.get('inFinance');
var inMarketing = this.get('inMarketing');
var model = this.get('model');
var newModel = model;
if(inFinance){
newModel = model.filterBy('department', 'Finance');
}
if(inMarketing){
newModel = model.filterBy('department', 'Marketing');
}
return newModel;
}.property('inFinance', 'inMarketing')
});
App.EMPLOYEES=[
{
name: 'Ricky',
department: 'Finance'
},
{
name:'George',
department:'Marketing'
},
{
name:'Jonah',
department: 'Finance'
}
];
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<nav class="navbar navbar-default navbar-fixed-top" sytle='padding:'>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
{{#link-to 'index' tagName='a' classNames='navbar-brand'}}Test{{/link-to}}
</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">
<li>{{#link-to 'employees' tagName='a'}}Employees{{/link-to}}</li></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
{{outlet}}
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" sytle='padding:'>
Created by the almighty burrito. EmberJs Testing 2015
</nav>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1 style='padding:30px'>{{#link-to 'employees' tagName='a'}}Click for Employees{{/link-to}}</h3>
</script>
<script type="text/x-handlebars" data-template-name="employees">
<h3 style='padding:15px'> Filter</h3>
{{input type='checkbox' checked=inFinance}} Finance
{{input type='checkbox' checked=inMarketing}} Marketing
<h2 class="sub-header" >Employees</h2>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>department</th>
</tr>
<tbody>
{{#each employee in filtered}}
<tr>
<td>{{employee.name}}</td>
<td>{{employee.department}}</td>
{{/each}}
</thead>
</script>
</body>
</html>
Thanks in advance! Here is the jsBin Here
Here’s one way to filter based on an attribute matching multiple values. I added an accounting department for more variety.
var newModel = model;
var matchAgainst = [];
if(inFinance){
matchAgainst.push('Finance');
}
if(inMarketing){
matchAgainst.push('Marketing');
}
if(inAccounting){
matchAgainst.push('Accounting');
}
if (!Ember.isEmpty(matchAgainst)) {
newModel = newModel.filter(function(person) {
return matchAgainst.indexOf(person.department) != -1;
});
}
JS Bin example