Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I run the following in my browser I get two list items, but nothing is displayed within the two items. So the loop itself works but nothing is being pulled from my list.
I reedited my submission to show an accurate representation of my problem
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<!-- initial angular declaration -->
<body id="main" ng-app>
<div ng-controller ="EductationCtrl">
<ul class = "list-unstyled">
<li ng-repeat = "school in schools">
{{schools.name}}
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
Javascript
function EductationCtrl($scope) {
$scope.schools = [
{name: 'university', major: 'Computer Science'},
{name: 'College', major: 'Politcal Science and Finance'},
];
}
This is the end result:
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
You have a typo: {{peole.name}} should be {{people.name}}
Plunker Demo
Its a typo:
{{schools.name}}
to
{{school.name}}
Related
I'm trying to create a basic website that checks whether a certain word is a palindrome or not. But, even though I assigned a value to my variable word, the Firefox console says it's null.
With wordReversed, it says ReferenceError: can't access lexical declaration wordReversed before initialization, even though I assigned a value to it and both variables are global. What's wrong in my code?
HTML5 code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
JS code:
let word = document.querySelector("word");
let wordReversed = [...word].reverse().join("");
let paragraph = document.querySelector("#paragraph");
function check() {
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
There is an issue in your code, because you are having the value of the text selected once and it will never be triggered again, just add the variables declaration inside the function,
few things to note:
your code didn't select the input element value
I used .split() function which return an array then you can reverse it.
here is a working snippet:
let paragraph = document.querySelector("#paragraph");
function check() {
let word = document.querySelector("#word").value;
let wordReversed = word.split('').reverse().join("");
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
The function document.querySelector("word") is returning the DOM element.
You need to call .value to get the input value.
Moreover, you select it by ID so you should append # before.
let word = document.querySelector("#word").value;
I am just starting on angular material, so I built a skeleton page with a toolbar, sidenav, and content.
Yet, when I try to toggle the sidenav with $mdSidenav's toggle(), it gives me the following error:
TypeError: $mdSidenav is not a function
Here's the HTML:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS Sandbox</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="mainCtrl" layout="row" layout-fill ng-cloak>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<md-sidenav id="sideNav" md-component-id="left" class="md-sidenav-left md-whiteframe-z2">
<md-toolbar id="sideNav-bar" layout="row"></md-toolbar>
<md-divider></md-divider>
</md-sidenav>
<div layout="column" flex layout-fill>
<md-toolbar layout="row" id="topBar" layout-align="left center" layout-padding>
<a class="fa-holders" ng-click="openSideNav('left')"><i class="fa fa-bars"></i></a>
<span layout="column" ng-bind="currentTitle"></span>
</md-toolbar>
<md-content id="content_wrapper" flex layout="row"></md-content>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
and the JS:
'use strict';
angular.module('myApp', [
'ngMaterial'
])
.config([function () {
}])
.controller('mainCtrl', ['$scope', function ($scope, $mdSidenav) {
$scope.soKai = 'soKai';
$scope.currentTitle = 'Maths';
$scope.appName = 'KaiAcademics';
$scope.openSideNav = function(componentId) {
$mdSidenav(componentId).toggle();
}
}])
;
Here's angular material's documentation. Am I missing anything?
You forgot to inject $mdSidenav.
.controller('mainCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
...
}])
https://docs.angularjs.org/guide/di
So I can't seem to get my controller to work when it is in a different file.
Right now I am just trying to do small test controller to see how angular works. Here are my files:
Here is my app.js
(function(angular) {
var AngularApp = angular.module('AngularApp', []);
})(window.angular);
Here is my controller file: TestController.js
(function(angular) {
var AngularApp = angular.module('AngularApp');
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
})(window.angular);
Here is my html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="" ng-app="AngularApp" ng-controller="TestController"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="appTitle"></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/libs/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/assets/libs/angular/angular.js"></script>
</head>
<body>
...
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/libs/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/app/app.js"></script>
<scirpt src="/app/components/home/TestController.js"></script>
</body>
</html>
Right now I am just trying to replace the title of the page. I have tried numerous different ways of doing this. Right now I have the js wrapped in immediately invoked functions, but I have tried with out that. I have tried making the module a global variable and just using that variable to define a controller. Ex:
App.js:
AngularApp = angular.module('AngularApp', []);
TestController.js:
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
I have also tried the dependencies with and without the array notation.
The controller seems to work fine when it is in the same file but I can't get it to work when it is in a seperate file. I always get the following error:
I am using angular version 1.4.8
Any help would be greatly appreciated!
Below is the code snippet that I am using but onbeforeunload event handler is never called.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Submit</title>
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link rel="stylesheet" href="/Content/themes/ab1.css" media="screen">
<link rel="stylesheet" href="/Content/themes/ab2.css" />
<link rel="stylesheet" href="/Content/themes/ab3.css">
<link rel="stylesheet" href="/Content/themes/ab4.css">
<!-- LayerSlider styles -->
<link rel="stylesheet" href="/Content/themes/ab5.css">
<link rel="stylesheet" href="/Content/themes/ab6.css" id="coloroption">
<link rel="stylesheet" href="/Content/themes/ab7.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/ab8.css">
<link rel="stylesheet" href="/Content/themes/ab9.css" id="styleswitcher">
<script src="/Content/themes/Scripts/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="/Content/themes/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Content/themes/Scripts/jquery-ui.js"></script>
<!-- jQuery with jQuery Easing, and jQuery Transit JS -->
<%--<script src="layerslider/jQuery/jquery-easing-1.3.js"></script>
<script src="layerslider/jQuery/jquery-transit-modified.js"></script>--%>
<!-- LayerSlider from Kreatura Media with Transitions -->
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="/Content/themes/Scripts/combobox/dd.css" />
<script src="/Content/themes/Scripts/combobox/jquery.dd.js"></script>
<script type="text/javascript">
function fnCallUnload() {
debugger;
var xmlData = "<Root sMethodName='SaveState'>";
fnSetCommonDataToXMLVariable(xmlData);
xmlData += "</Root>";
CallServer(xmlData, "");
}
window.onbeforeunload = fnCallUnload;
</script>
</head>
I tried onbeforeunload event in the master page and calling a function of content page in the try catch. It does work smoothly there. But this page where I am trying to use onbeforeunload does not require master page. Its a stand alone page in the application. So, I guess there is some minor concept I am not aware of regarding the use of onbeforeunload.
Any help will be hugely appreciated.
Thanks
This should work, however unbeforeunload requires a string to be returned. If not it will not fire due to security reasons.
Add this as last line.
return "Do you want to quit?";
However this thread blames jQuery as culprit
window.onbeforeunload not firing
change
window.onbeforeunload = fnCallUnload;
to
window.addEventListener("beforeunload", fnCallUnload, false);
So I'm trying to get smooth scrolling to work. So here's what I have
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body >
<section id="page">
<ul class="cb-slideshow">
<li><span style="background: #009dff;">Image 01</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #003840;">Image 02</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #02A676;">Image 03</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #4FAAC9;">Image 04</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #FF5952;">Image 05</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #96D6D9;">Image 06</span><div><h3>Colourity</h3></div></li>
</ul>
<div id="content">
Click
</div>
</section>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
So when I click on the href it just "snaps" to #page. Instead of smoothly transitioning to it. I'm not good with Javascript so any help and a reason why this is happening would be superior.
Try putting your jQuery loader after the HTML just before your other Javascript.