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>
Related
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 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.
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>
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<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="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></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 main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}
So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys