AngularJS ng-repeat directives is not working on my EventController.js - javascript

I was trying to add session details under address and date. But ng-repeat is working but its not displaying any details under sessions section. Its not giving me any error. Can anyone please check my codes and let me know what`s missing.
.....app.js.....
'use strict';
var eventsApp = angular.module('eventsApp', []);
'use strict';
eventsApp.controller('EventController',
function EventController($scope){
$scope.event = {
name: 'Angular Event App',
date: '04/02/2017',
time: '3.09 am',
location: {
address: 'Google Headquaters',
city: 'Mountain View',
Province: 'CA'
},
imageUrl: '/img/angularjs-logo.png',
sessions: [
{
name: 'Directive Masterclass'
},
{
name: 'Scope for fun and profit'
},
{
name: 'well Behaved Controllers'
}
]
};
});
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
</head>
<body>
<div class="container">
<div class="navbar-inner">
<ul class="nav">
</ul>
</div>
<div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
<div class="row">
<div class="span1">
<h2> {{event.name}}</h2>
</div>
</div>
<div class="row">
<div class="span2">
<div><strong>Date: </strong> {{event.date}}</div>
<div><strong>Time: </strong> {{event.time}}</div>
</div>
<div class="span3">
<address>
<strong> Address: </strong><br>
{{event.location.address}}<br>
{{event.location.city}}, {{event.location.province}}
</address>
</div>
</div>
<h3>Sessions</h3>
<ul class="thumbnails">
<li ng-repeat="session in event.sessions" ></li>
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>


you need to add the div content inside the li tag
change this
<li ng-repeat="session in event.sessions" ></li>
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
to this
<li ng-repeat="session in event.sessions">
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</li>
Demo


The ending tag for the li element is before where you are referencing the item from the Ng-repeat (likely a typo). I'd update the HTML to the following:
<li ng-repeat="session in event.sessions">
<div class="row session">
<div class="well span9">
<h4 class="well-title">{{session.name}}</h4>
</div>
</div>
</li>

Related

I want to stay on dashboard if local storage has access token and redirect to login if not

I am doing it but page continues to refresh as i have local storage token. Its JS that i am using for it.
[![Here is the image i dont want to get back to login page if there is token in local storage][1]][1]
[1]: https://i.stack.imgur.com/IwtcP.png
So here is the full code and this is working fine all i need is to set the check if the token is present in local storage then stay otherwise get back to login page
<html lang="en" style="height: auto;"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | DataTables</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="/assets/dist/css/adminlte.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.js"integrity="sha512-SXo2rCaEJmbAPoxtaSjW+/hLaVCMAJ1CX8XnIP02x6/LIaWQp4GipKxQhBwL8Tn5U/K+lD9AaM4f4mXJdKnDQw=="crossorigin="anonymous"referrerpolicy="no-referrer"></script>
<script src="https://kit.fontawesome.com/9f98b6568d.js" crossorigin="anonymous"></script>
</head>
<body >
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-white navbar-light ml-0 ">
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
View Hotels
</li>
<li class="nav-item d-none d-sm-inline-block">
Add Hotels
</li>
<li class="nav-item d-none d-sm-inline-block">
About Us
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" onclick="logout();" role="button">
<i class="fa-solid fa-arrow-right-from-bracket "></i>
</a>
</li>
</ul>
</nav>
<div class="content-wrapper ml-0" style="min-height: 2080.12px;">
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>DataTables</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
</ol>
</div>
</div>
</div>
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">DataTable with minimal features & hover style</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12"><table class="table table-bordered table-hover dataTable dtr-inline" role="grid">
<thead>
<tr role="row"><th>Id</th><th >Name</th><th >Email</th><th>Password</th><th>Retype</th><th>Contact</th><th>Actions</th></tr>
</thead>
<tbody id="data">
<script>
axios
.get(
"https://localhost:8000/allusers")
.then((response) => {
console.log(response.data)
for (let i = 0; i < response.data.length; i++) {
document.getElementById('data').innerHTML+=`<tr class="odd">
<td class="dtr-control sorting_1" tabindex="0">${response.data[i].id}</td>
<td>${response.data[i].name}</td>
<td>${response.data[i].email}</td>
<td>${response.data[i].password}</td>
<td>${response.data[i].cpassword}</td>
<td >${response.data[i].contact}</td>
<td ><button class="btn btn-danger">Delete</button>Update</button></td>
`
}
})
.catch((error) => {
console.log(error);
});
</script>
</tbody>
</table>
</div>
</div>
<div class="card">
</div>
</div>
</div>
</div>
</section>
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 3.1.0
</div>
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/assets/plugins/jszip/jszip.min.js"></script>
<script src="/assets/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/assets/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/assets/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- AdminLTE App -->
<script src="/assets/dist/js/adminlte.min.js"></script>
<script>
$(function () {
$('#example2').DataTable({
"paging": false,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false,
"responsive": false,
});
});
</script>
<script>
const data=localStorage.getItem('token')
if(data===null)
{
window.location.href='/login'
}
else{
}
function logout(){
console.log(localStorage.getItem('token'))
axios
.get(
"https://localhost:8000/logout",{
headers: { Authorization:localStorage.getItem('token') }
})
.then((response) => {
window.location.href='/login'
})
}
</script>
</body></html>
login.html
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AdminLTE 3 | Log in</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
/>
<link
rel="stylesheet"
href="/assets/plugins/fontawesome-free/css/all.min.css"
/>
<link
rel="stylesheet"
href="/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css"
/>
<link rel="stylesheet" href="/assets/dist/css/adminlte.min.css" />
</head>
<body class="login-page" style="min-height: 496.781px">
<div class="login-box">
<div class="login-logo">
<b>Admin</b>LTE
</div>
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<div class="input-group mb-3">
<input
type="email"
class="form-control"
placeholder="Email"
name="email"
id="email"
/>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div class="input-group mb-3">
<input
type="password"
class="form-control"
placeholder="Password"
name="password"
id="password"
/>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<input type="checkbox" id="remember" />
<label for="remember"> Remember Me </label>
</div>
</div>
<div class="col-4">
<button onclick="login()" class="btn btn-primary btn-block">
Sign In
</button>
</div>
</div>
<p class="mb-1">
I forgot my password
</p>
<p class="mb-0">
<a href="register.html" class="text-center">
Register a new membership</a
>
</p>
</div>
</div>
</div>
</div>
<div class="w-100 h-100" id="demo">
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/dist/js/adminlte.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.js"
integrity="sha512-SXo2rCaEJmbAPoxtaSjW+/hLaVCMAJ1CX8XnIP02x6/LIaWQp4GipKxQhBwL8Tn5U/K+lD9AaM4f4mXJdKnDQw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
function login() {
axios
.post(
"https://localhost:8000/login",
{
email: document.getElementById('email').value,
password: document.getElementById('password').value,
},
{
headers: {'Content-Type': 'application/json'}
}
)
.then((response) => {
localStorage.setItem('token',response.data.token);
console.log(localStorage.getItem('token'))
if(localStorage.getItem('token')!=='undefined' ){
if(response.data.data==='f180111#nu.edu.pk'){
window.location.href="/dashboard"
}
else{
window.location.href="/userDashboard"
}
}
else{
window.location.href="/signup"
}
})
}
</script>
</body>
</html>

I want to get Div arttribute value having same class when i click on div having same class

I want to get Div attribute value having same class when i click on div having same class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4 Bros Info</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<header>
<div class="main">
<div class="logo">
<h1> 4 Bros Info </h1>
</div>
<ul>
<li> <a class="active" href="/">Home</a></li>
<li> All Users Data</li>
<li> Blog</li>
<li> Our Team</li>
<li> JS Practice</li>
<li> Login</li>
</ul>
</div>
</header>
<div class="row">
<div class="container">
<h2>CHOOSE YOUR PLAN</h2>
<div class="step1">
<p>STEP 1. ONGOING SHIPMENTS - CHOOSE A SIZE</p>
</div>
<div class="sizes">
<div class="col-4">
<div class="box" value="$12">
<strong>7 oz</strong>
<div class="cup">14 cups / 1 drinker</div>
<div class="orange_line"></div>
<span class="price">$12 <small>($1.75 / oz)</small></span>
<div class="day">Free Shipping <br>(Avg. 3.1 days)</div>
<span class="tickicon"></span>
</div>
</div>
<div class="col-4">
<div class="box selected1" value="$16">
<div class="most_popular">MOST POPULAR</div>
<strong>11 oz</strong>
<div class="cup">22 cups / 1-2 drinkers</div>
<div class="orange_line"></div>
<span class="price">$16 <small>($1.45 / oz)</small></span>
<div class="day">Free Shipping<br>(Avg. 3.1 days)</div>
<span class="tickicon"></span>
</div>
</div>
<div class="col-4">
<div class="box" value="$34">
<strong>32 oz</strong>
<div class="cup">64 cups / 2-3 drinkers</div>
<div class="orange_line"></div>
<span class="price">$34 <small>($1.02 / oz)</small></span>
<div class="day">Free Priority Shipping<br>(1-3 days guaranteed)</div>
<span class="tickicon"></span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="notice">Not sure? You can change plans anytime!</div>
</div>
<div class="container">
<div class="step2">
<p>STEP 2. ONGOING SHIPMENTS - HOW OFTEN WOULD YOU CONSUME 22 CUPS ?</p>
</div>
<div class="frequency">
<div class="col-4">
<div class="box2" value="Every week">
<div class="fre">Every week</div>
<div class="tick"></div>
</div>
</div>
<div class="col-4">
<div class="box2 selected1" value="Every other week">
<div class="fre">Every other week</div>
<div class="tick"></div>
</div>
</div>
<div class="col-4">
<div class="box2" value="Every four weeks">
<div class="fre">Every four weeks</div>
<div class="tick"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="value">
<div class="item-amount">$16</div>
<div class="weeks">every other week</div>
<button id="btn" type="submit" value="submit">Add to Cart</button>
</div>
</div>
</div>
<div class="footer">Copyright # 4 Bros Info</div>
<script>
$(document).ready(function () {
var price;
var freq;
$('.box').click(function () {
price = $(this).attr('value')
console.log(price)
$('.item-amount').text(price)
});
$('.box2').click(function () {
freq = $(this).attr('value')
console.log(freq)
$('.weeks').text(freq)
});
$('.box').click(function () {
$('.box').removeClass('selected1')
$(this).addClass('selected1')
});
$('.box2').click(function () {
$('.box2').removeClass('selected1')
$(this).addClass('selected1')
});
$('#btn').click(function () {
console.log('Your Price is ' + price + ' and your Frequency is ' + freq)
});
});
</script>
</body>
</html>

How do I get the Materialize Feature Discovery Block to show up on my webpage?

I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>

Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

ReferenceError: requirejs is not defined at

I am using Mocha with Zombie.js to test my application which uses require.js.
I have the following content in the test.js file:
process.env.NODE_ENV = 'test';
var express = require('express'),
http =require('http'),
assert = require('assert');
app = express();
app.use(express.static('src'));
const Browser = require('zombie');
describe('User visits signup page', function() {
before(function() {
this.server = http.createServer(app).listen(3000);
this.browser = new Browser({ site: 'http://localhost:3000', debug: true, runScripts: true });
});
before(function(done) {
this.browser.visit('/index.html', done);
});
describe('submits form', function() {
before(function() {
return this.browser;
});
it('should be successful', function() {
this.browser.assert.success();
});
it('should see welcome page', function() {
this.browser.assert.text('title', 'Page Title');
});
});
after(function(done) {
this.server.close(done);
});
});
When I am launching the test (with command line mocha test/test.js), I encouner the following error:
User visits signup page
1) "before all" hook
0 passing (341ms)
1 failing
1) User visits signup page "before all" hook:
ReferenceError: requirejs is not defined
at http://localhost:3000/index.html:script:2:10
in http://localhost:3000/index.html
It seems that somehow Mocha/Zombie doesn't wait for the require.js script to get loaded or something similar. Have you encountered this issue before ? Many thanks.
Later Edit:
This is the code for index.html of the application:
<!DOCTYPE html>
<html lang="en">
<head class="hbs-head-container"></head>
<script id="hbs-head-template" type="text/x-handlebars-template">
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="{{metaContent}}">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>{{title}}</title>
<link href="{{googleFonts}}" rel="stylesheet">
<link href="{{materialIcons}}" rel="stylesheet">
<link href="../bower_components/material-design-lite/material.min.css" rel="stylesheet">
<link href="stylesheets/main.css" rel="stylesheet">
</script>
<body>
<section class="hbs-body-container"></section>
<script id="hbs-body-template" type="text/x-handlebars-template">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">{{title}}</span>
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
{{#each tabs}}
<a class="{{classValue}}" href="{{hrefValue}}">{{text}}</a>
{{/each}}
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">{{title}}</span>
</div>
<main class="mdl-layout__content">
{{#each sections}}
<section class="mdl-layout__tab-panel {{#if #first}}is-active{{/if}}" id="{{sectionId}}">
<div class="page-content">
<div class="mdl-cell mdl-cell--4-col" id=
"{{pageContentId}}">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">{{pageContentTitle}}
</h2>
</div>
<div class="mdl-card__supporting-text">
<input id="{{filesId}}" name="file" type="file">
<a class=
"mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
onclick="abortRead();">{{cancel}}</a>
<div id="{{progressBarId}}">
<div class="percent">
0%
</div>
</div>
<div id="{{someInfoId}}">
{{someInfoValue}}
</div>
<div id="{{fileContentId}}">
{{fileContentValue}}
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
{{#each buttons}}
<a class="{{classValue}}" id="{{idValue}}">{{text}}</a>
{{/each}}
</div>
<div class="mdl-card__menu">
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--8-col" id="{{outputCardId}}">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">{{opText}}</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" id=
"{{resultsOutputId}}" rows="10">
None ...
</textarea>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class=
"mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
data-clipboard-target="#{{resultsOutputId}}" id="{{ccId}}">{{ccText}}</a>
</div>
<div class="mdl-card__menu">
</div>
</div>
</div>
</div>
</section>
{{/each}}
</main>
<footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li>
<a href={{footerLink}}>{{footerText}}</a>
</li>
</ul>
</div>
</footer>
</div>
</script>
<script src="../bower_components/material-design-lite/material.min.js"></script>
<script src="../bower_components/requirejs/require.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: '../bower_components',
paths: {
jquery: 'jquery/dist/jquery.min',
handlebars: 'handlebars/handlebars.min',
clipboard: 'clipboard/dist/clipboard.min',
underscore: 'underscore/underscore-min',
papaparse: 'papaparse/papaparse.min',
}
});
</script>
<script src="javascripts/templates/hbs-head.js"></script>
<script src="javascripts/templates/hbs-body.js"></script>
<script src="javascripts/main.js"></script>
</body>
</html>

Categories