I am trying to get a small Angular script to work within my .html page. If I load the page as a static page in my browser, the Angular script will run correctly. If I run my node.js app which loads the same page under a res.render statement, the Angular script does not run.
My theory is that my Angular code conficts with the Express.js code running. However, I'm not sure how.
Here are my scripts.
index.html
<body>
<!--INCLUDE - JS LIBRARIES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<!--INCLUDE - ANGULAR CONTROLLER -->
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function ($scope) {
$scope.cucmpub = "x.x.x.x";
});
</script>
<!--BODY - BOOTSTRAP PAGE SETUP -->
<div class="container-fluid" ng-app="">
<div class="row">
<div class="col-md-12">
<!--BODY - BOOTSTRAP NAVBAR -->
<nav class="navbar navbar-default" role="navigation">
<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="/">CUCM
<sup>2</sup>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">
<img src="https://png.icons8.com/marker/office/16" title="Marker" width="16" height="16"> CSS Map</a>
</li>
<li>
<a href="/">
<img src="https://png.icons8.com/phone/ultraviolet/20" title="Phone" width="16" height="16"> SIP2SIP</a>
</li>
<li>
<a href="/">
<img src="https://png.icons8.com/bug/color/24" title="Bug" width="16" height="16"> Debugger</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a ng-href="https://{{cucmpub}}/ccmadmin/" target="_blank">{{cucmpub}}</a>
</li>
</ul>
</div>
</nav>
<!--BODY - CONTENT-->
<div class="row">
<div class="col-md-12" class="pull-left">
<form class="form-horizontal" method="post" action="/cucmmapper/submit" id="cucmmapper">
<!-- INPUT - TEXT-->
<div class="form-group">
<label class="col-md-4 control-label" for="cucmpub">CUCM Publisher</label>
<div class="col-md-4">
<input id="cucmpub" name="cucmpub" type="text" placeholder="x.x.x.x" class="form-control input-md" required="" ng-model="cucmpub">
</div>
</div>
<!-- INPUT - SELECT-->
<div class="form-group">
<label class="col-md-4 control-label" for="cucmpub">CUCM Version</label>
<div class="col-md-4">
<select class="form-control" id="cucmversion" name="cucmversion">
<option>11.5</option>
<option>11.0</option>
</select>
</div>
</div>
<!-- INPUT - TEXT-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">AXL Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="username" class="form-control input-md" required="">
</div>
</div>
<!-- INPUT - PASSWORD-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- INPUT - BUTTON -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button class="btn btn-primary" type="submit">Map it!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
app.js
// APP - INCLUDE
const express = require('express')
const path = require("path")
const bodyParser = require("body-parser")
const hbs = require('hbs')
var xml2js = require('xml2js');
var parser = new xml2js.Parser();
var opn = require('opn');
// APP - DEFINITION
const app = express()
// APP - BUILD
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.engine('html', require('hbs').__express);
app.set('view engine', 'html');
// EXPRESS ROUTE - INDEX
app.get('/', function (req, res) {
res.render('index.html', {
title: 'CUCM 2.0'
});
})
// EXPRESS ROUTING - INCLUDE - CUCM MAPPER
var routingextensions = require('./routes/cucmmapper.js')(app);
// APP - START
app.listen(3000, function () {
console.log('Please keep this terminal open until finished as it is running the backend API communications with CUCM.')
});
opn('http://localhost:3000');
I am still a newbie at all of this and greatly appreciate any help or suggestions. Thanks y'all!
Node doesn't find the 'public' folder.
Try this line instead:
app.use(express.static(__dirname + '/public'));
https://nodejs.org/docs/latest/api/modules.html#modules_dirname
In addition, if you ever use a package manager for your libraries (instead of cdn) you will have to add this line:
app.use('/bower_components', express.static(__dirname + '/bower_components'));
Related
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 have been working on a permissions system for my NodeJS (Using the SailsJS MVC) and have ran into a problem. After solving my first error which is outlined here I am now running into an issue where the form does nothing. It does not send an error to console and it does not log an error in the SailsJS console itself. Below is my code.
/**
* GroupsController (API)
*
* #description :: Server-side logic for managing Permissions
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
module.exports = {
update: function(req, res, next) {
var groupObj = {
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
};
Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
if (err) {
return res.redirect('/group/edit/' + req.param('id'));
}
res.redirect('/');
});
},
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
}).exec({
error: function (err) {
return res.negotiate(err);
}
});
}
};
GroupsController (Form)
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.groupCreateForm = function(){
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroup.groupName,
canViewUsers: $scope.createGroup.canViewUsers,
canEditUsers: $scope.createGroup.canEditUsers,
canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
canViewNotes: $scope.createGroup.canViewNotes,
canEditPermissions: $scope.createGroup.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
}}]);
HTML Form
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
<h2 class="form-signin-heading">Create A Group</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<div class="row">
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
</div>
<!-- Can View Users -->
<div class="row">
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
</div>
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
<span>Create Group</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
You don't have the right ng-controller attached to your form, so the $scope.groupCreateForm shouldn't even be getting called. Try adding ng-controller="GroupsController" to your form and try again.
<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
I fixed the issue with the following code
<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>
I had the wrong app and controller defined. Thank you to Fissio for sparking the idea that this was the problem.
I am currently creating a Dapp for Ethereum using Truffle and testrpc. On our register page, I have a button that signs the user up with all the information entered. However, when the button is clicked, the register function in the app.js javascript file is called, but does not execute passed the var regi = Register.deployed(); line. I am gettig an error in the console on the webpage as seen below. I have attempted to debug this for hours but with no success.
This is the app.js file. The register function is the function that takes the data inputted and sends it to the Register Contract.
The code below that is the index.html file. The <button id="confirmsignup" onclick="register()">Sign Up</button> tag is the button that calls register() in app.js when clicked.
Finally, the last one is the code for the Contract Register that sets up an account for the user.
var accounts;
var account;
var balance;
var logged;
function setStatus(message) {
var status = document.getElementById("status");
status.innerHTML = message;
};
function refreshBalance() {
var meta = MetaCoin.deployed();
meta.getBalance.call(account, {from: account}).then(function(value) {
var balance_element = document.getElementById("balance");
balance_element.innerHTML = value.valueOf();
}).catch(function(e) {
console.log(e);
setStatus("Error getting balance; see log.");
});
};
function sendCoin() {
var meta = MetaCoin.deployed();
var amount = parseInt(document.getElementById("amount").value);
var receiver = document.getElementById("receiver").value;
setStatus("Initiating transaction... (please wait)");
meta.sendCoin(receiver, amount, {from: account}).then(function() {
setStatus("Transaction complete!");
refreshBalance();
}).catch(function(e) {
console.log(e);
setStatus("Error sending coin; see log.");
});
getAccountBalance();
};
function getAccountBalance() {
var meta = MetaCoin.deployed();
var balance = meta.getBalance(msg.sender);
}
function register() {
var nickname = document.getElementById("userid").value;
var email = document.getElementById("Email").value;
var password = document.getElementById("password").value;
var rePassword = document.getElementById("reenterpassword").value;
var addr = document.getElementById("ethereumAddress").value;
logged = true;
var regi = Register.deployed();
web3.eth.defaultAccount = addr;
if (password == rePassword) {
regi.setAccountInfo(nickname, email, password, addr).then(function() {
console.log("The account was setup with the appropriate details");
}).catch(function(e) {
console.log(e);
});
alert("Congratulations! You registered an account with Cogitaire!");
} else {
alert("The passwords do not match!");
}
};
function displayInfo() {
var display = Register.deployed();
var idCheck = document.getElementById("idForCheck").value;
if (logged) {
console.log("The user is logged: " + logged);
display.getNickname.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('nickshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
display.getEmail.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('emailshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
} else {
alert("You are not logged in! Please log in to see your user information or enter address to see someone elses user information");
}
};
function logOff() {
var log = Register.deployed();
logged = false;
alert("You are now logged off!");
web3.eth.defaultAccount = '0xda9c209aafee487d729866bc0d58223a62bfe383';
};
function showLogin() {
registerSection.style.display = 'none';
loginSection.style.display = 'block';
};
function showRegister() {
registerSection.style.display = 'block';
loginSection.style.display = 'nice';
};
window.onload = function() {
var Web3 = require([web3]);
// create an instance of web3 using the HTTP provider.
// in mist web3 is already available, so check first if its available before instantiating
if (typeof web3 !== 'undefined') {
var web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
}
//var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
return;
}
getAddress.call().then(function(value) {
web3.eth.defaultAccount = value;
});
accounts = accs;
account = accounts[0];
refreshBalance();
});
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Cogitare</title>
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/bundle.js"></script>
<script src="javascripts/require.js"></script>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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>
<img class="navbar-brand topnav" src="img/BIRD2thin.jpg" alt="can't display rn">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a style="color:white;" href="./newProjectInfo.html">Submit An Idea</a>
</li>
<li>
<a style="color:white;" href="#">Services</a>
</li>
<li>
<a style="color:white;" href="#contact">Contact</a>
</li>
<li>
<a style="color:white;" href="#signup" data-toggle="modal" data-target=".bs-modal-lg">Sign In/Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Where ideas take flight</h1>
<h3>ejofaojwefojwejoaewoj</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
</i> <span class="network-name">Discover Projects</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a style="color:black" href="#signin" data-toggle="tab">Sign In</a></li>
<li class=""><a style="color:black" href="#signup" data-toggle="tab">Register</a></li>
<li class=""><a style="color:black" href="#why" data-toggle="tab">Show User Information</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>Click this button to show information about you!</p>
<!--<p></p><br> Please contact <a mailto:href="theoluan#gmail.com"></a>theoluan#gmail.com</a> with questions.</p>-->
<button id="display" onclick="displayInfo()">Display Information</button>
<br><label id="nickshow">test</label></br>
<br><label id="emailshow">test</label></br>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-medium" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordinput">Password</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<!--Register-->
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo#theo.com" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Nickname:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="theo" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<!-- Button -->
<!--<button id="confirmsignup" class="btn btn-success" onclick="register()">Sign Up</button>-->
<button id="confirmsignup" onclick="register()">Sign Up</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
contract Register {
//address public userAddr;
struct User {
address userAddress;
string nickname;
string email;
string password;
bool isLoggedIn;
}
mapping(address => User) users;
address public creator;
//bool public isLoggedIn;
function Register() {
creator = msg.sender;
}
function setAccountInfo(string nickname, string email, string password, address addr) {
users[addr].nickname = nickname;
users[addr].email = email;
users[addr].password = password;
}
function getNickname(address addr) returns (string) {
return users[addr].nickname;
}
function getEmail(address addr) returns (string) {
return users[addr].email;
}
function getAddress() constant returns (address) {
return creator;
}
function setLoggedStatus(address addr, bool condition) {
users[addr].isLoggedIn = condition;
}
function getLoggedStatus(address addr) constant returns (bool success) {
return users[addr].isLoggedIn;
}
}
I can't figure out why the code does not execute after the javascript line Register.deployed(). Any help that could possibly lead me in the right direction would be helpful. Thank you so much!
<div class="section" ng-app="ShopMod" ng-controller="myShopsCtrl">
<a class="btn btn-primary btn-fill" href="/addshop">Add a new Shop</a>
<br>
<hr>
<div ng-init="getMyShops()">
<div class="row">
<div ng-repeat="shop in shops">
<div class="col-md-6 col-lg-4 col-sm-12">
<div class="card">
<div class="front">
<div class="cover">
<img src="images/city.jpg" class="img-responsive"/>
</div>
<div class="user">
<img class="img-circle img-responsive" src="images/default-avatar.png"/>
</div>
<div class="content">
<div class="main">
<h3 class="name">{{shop.owner}}</h3>
<h5><i class="fa fa-map-marker fa-fw text-muted"></i> {{shop.address}}, {{shop.state}}</h5>
<h5><i class="fa fa-building-o fa-fw text-muted"></i> {{shop.contact}}</h5>
<h5><i class="fa fa-envelope-o fa-fw text-muted"></i> {{shop.email}}</h5>
</div>
<div class="footer">
<a href="/editshop/:{{shop.id}}">
Edit |
</a>
<a ng-click="manageShop(shop.id)">
Manage |
</a>
<a ng-click="editShop(shop.id)">
Delete
</a>
</div>
</div>
</div> <!-- end front panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div>
</div>
</div>
</div>
</div>
I'm new to sails and angular and i'm having an issue populating my edit form. I have a list of items, code is above. the user clicks the edit link and it takes them to a page,code is below, that will be populated with the data of that selected item.
<div class="section" ng-app="ShopMod" ng-controller="editShopCtrl">
<div class="header text-center">
<h2 style="text-decoration: underline">Edit Shop</h2>
</div>
<div class="content">
<form ng-submit="updateShop()">
<div class="form-group">
<label for="name">Shop Name</label>
<input type="text" class="form-control" ng-model="name" value="{{shop.name}}">
</div>
<div class="form-group">
<label for="address">Shop Address</label>
<input type="text" class="form-control" ng-model="address" value="{{shop.address}}">
</div>
<div class="form-group col-md-6">
<label for="contact">Phone Number</label>
<input type="tel" class="form-control" ng-model="contact" value="{{shop.contact}}">
</div>
<div class="form-group col-md-6">
<label for="email">Shop Email</label>
<input type="email" class="form-control" ng-model="email" value="{{shop.email}}">
</div>
<div class="form-group col-md-6">
<label for="email">State</label>
<select class="form-control" ng-model="state" value="{{shop.state}}">
<option>Lagos</option>
<option>Abuja</option>
</select>
</div>
<div class="col-md-8">
<button type="submit" class="btn btn-fill btn-info">Update Shop</button>
</div>
</form>
</div>
</div>
I know how to get the id of the selected item, and pass it to my back-end controller, my issue is sending that data back from my back-end controller to my form which is basically another view.Below is my function for getting the id from the url,finding the corresponding data and returning it.
editShop:function (req, res)
{
var id = req.param('id');
Shops.findOne({id:id},
function (err, shop)
{
if(err)
{
return res.negotiate(err);
}
return res.send(shop.data)
})
}
Below is the code for how i'm handling the routing
'GET /editshop/:id':{
view:'Shops/editShop',
locals: {
layout: '/Dashboard/layout-admin',
}
}
i would like to know how to go about dealing with this situation.
According to your scenario on click you want to load another page with edit layout. Ejs lets you bind the data you want at backend And so that you can send the data after bind.
But i do it different way.
SAVE All Detail to localStorage of the browser
I am completing only some of your code you can easily see where and what you should do.....
angular.module('ShopMod', [])
.controller('myShopsCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getMyShops = function (id) {
$http.get('/shops?id=' + id)
.then(function (res) {
if (Array === res.data.constructor)//if res.data is array
$scope.shop = res.data[0];
else //res.data is object.
$scope.shop = res.data;
localStorage.setItem('myShop', JSON.stringify($scope.shop));
}, function (err) {
$scope.shop = {};
console.log(err);
});
}
}]);
In the above...
GET request is made at lcalhost:1337/shops?id=43 (Let shop id is
43).which is a blueprint route(sails make it for you by default
for rapid development).
$scope.shop is initialized with res.data and the same is saved in browsers localStorage by key myShop.Which you can access anytime.(you can see local storage in developer console Resources).
So all you have to do is to load the edit page.
<div class="footer">
<a href="/editshop/">
Edit |
</a>
<a ng-click="manageShop(shop.id)">
Manage |
</a>
<a ng-click="editShop(shop.id)">
Delete
</a>
</div>
Back-end Route for loading edit template.
'GET /editshop/':{
view:'Shops/editShop',
locals: {
layout: '/Dashboard/layout-admin',
}
}
In your edit template.
make ng-init="initializeForm()" at top.
and write controller function.
angular.module('ShopMod', [])
.controller('editShopCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getMyShops = function (id) {
$scope.shop=JSON.parse(localStorage.myShop);
}
}]);
Putting data from localStorage to current $scope.shop...
This is how i do!I hope it will work for you!
Full Disclosure: I am new to Ember.
I have an app that I have started where when the user clicks on the next button, they create an instance of the customer model and that model is saved to local storage. On the next page, I want both the first and last name to pre-populate the text inputs. I have tried to follow the intro video but I have run into a problem. It appears that I am creating the object and then storing it successfully in local storage, but when the user transitions to the next page, the model can't be found. Here is my code:
HTML:
<script type="text/x-handlebars">
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="nobox" class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
</div>
<div class="container">
{{outlet}}
<footer>
</footer>
</div>
</body>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<a class="btn btn-primary" id="captcha" {{action 'create'}}>
Next
</a>
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3 class="purple">To start the process, please fill out the captcha below</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left questions">
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="customer">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<div class="btn-group pull-right">
{{#linkTo 'wsnum' action="create" classNames="btn btn-primary"}}Next{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left">
<h3>Customer Information</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="row top">
<div class="pull-left">
<span class="red">*</span> = Denotes required field
</div>
<div class="pull-right form-inputs input-text">
</div>
</div>
<br>
<div class="row-b">
<div class="control-group">
<label class="control-label" for="inputfname">First Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.first'}}
</div>
</div>
</div>
<div class="row-a">
<div class="control-group">
<label class="control-label" for="inputlname">Last Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.last'}}
</div>
</div>
</div>
</div>
<input type="hidden" name="prev" value="">
<hr>
</script>
<script type="text/x-handlebars" data-template-name="wsnum">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<!--<a class="btn" href="">
Prev
</a>
<a class="btn btn-primary" id="captcha">
Next
</a>-->
{{#linkTo 'customer' classNames="btn btn-primary"}}Prev{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3>Choose the Number of Workstations or Point of Sale Accessories only</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
How many workstations will you need?
</div>
<div class="pull-right input-text-well">
</div>
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
Request Point of Sale Accessories only
</div>
<div class="pull-right radio-wsnum">
<label class="checkbox inline radio-new-pos">
<input type="checkbox" id="posonly1" name="posonly1" value="pos"> POS only
</label>
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="overview">
</script>
<script type="text/x-handlebars" data-template-name="new">
</script>
<script type="text/x-handlebars" data-template-name="existing">
</script>
And my app.js:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
// put your routes here
this.route("customer", { path: "/customer" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexRoute = Ember.Route.extend({
});
App.IndexController = Ember.Controller.extend({
create: function(){
var customer = App.Customer.createRecord({
first:"ron",
last:"testing"
});
console.log('Before the save');
customer.save();
console.log(customer.get('first'));
this.transitionToRoute('customer');
}
});
App.CustomerRoute = Ember.Route.extend({
model: function() {
var customer = App.Customer.find();
console.log(customer.get('first'));
return customer;
}
});
App.WsnumRoute = Ember.Route.extend({
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Here is a working example. Any ideas?
In App.CustomerRoute.model(), this line:
var customer = App.Customer.find();
sets the customer variable is being set to result of find(). find() returns an array of all customer records. So when you call get('first') on the array it is undefined, since the array of customers does not have a property first.
Also, the route
this.route("customer", { path: "/customer" });
should probably be:
this.route("customer", { path: "/customer/:customer_id" });
since it seems to be for displaying one customer not a list of them.
With that change, CustomerRoute is not really needed at all. So app looks like:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
this.route("customer", { path: "/customer/:customer_id" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexController = Ember.Controller.extend({
create: function(){
var controller = this;
var customer = App.Customer.createRecord({
first:"ron",
last:"harmon"
});
customer.save().then(function() {
controller.transitionTo('customer', customer);
});
}
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Working example here: http://jsbin.com/itogeh/1/edit