Angular code shows in page - javascript

I'm in the process of learning angular. When I execute the code below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
</head>
<body >
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</body>
</html>
The code that renders shows {{qty * cost | currency}}. Is angular not loading into the browser (chrome) ? I've checked the version of angular and it appears to be ok. Thanks.

Most probably you angular js is not loaded properly.
Check this plunker with your code, this works.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity:
<input type="number" min="0" ng-model="qty">
</div>
<div>
Costs:
<input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</body>
</html>

Related

Inserted value disappeares after pressing submit

I want to create a form in HTML that can take the inserted Name by the user and then after pressing submit shows the corresponded value (Age) to that user. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
The problem is that after pressing submit the Name will be shown in the myshow span section(Age:) just
for a fraction of second and then it disappeares and url changes to localhost:5000/?Name=Jack rather than localhost:5000/the current path/?Name=Jack
You should use onSubmit on the form element to call the function and then return false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
return false;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="" onSubmit="return myFunction();">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" value="Submit"><br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Ps: you did not close the submit tag properly
I think that you don't need submit.
If you don't need to submit, You have to change this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>

Using angular in a chrome extension gives me minErr is not defined

All I've done is to include Angular in my chrome extension and right of the bat it gives me a ´Uncaught ReferenceError:minErr is not defined´. I've tried multiple versions of Angular but the issue persists.
This is all I've done:
<!DOCTYPE html>
<html>
<head>
<title>Typography</title>
<script type="text/javascript" src="bower_components/angular-latest/src/Angular.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/core.css">
<body ng-app="" ng-csp>
<h1>Typography</h1>
<div class="viewport">
<form>
<label for="baseline">Baseline</label>
<div class="row clear">
<input type="range" name="baselineRange" id="baselineRange" min="0" max="144" step="1" />
<input type="input" name="baseline" id="baseline"/>
</div>
<label for="offset">Baseline offset</label>
<input type="text" name="offset" id="offset" />
<button type="submit" id="send">Generate</button>
</form>
<p>Typography was created by Joel Sanden</p>
</div>
</body>
</html>

Safari 8 / iOS8 not saving to Database

I have a simple html Form, that should send the input with a put command to my PouchDB Database via the http adapter.
This works as it should in every browser I tried (Firefox/Chrome/Android) but not in Safari 8 or iOS8 Mobile Safari.
Even more strange, Safari doesn't give me any error.
Anyone has a suggestion?
The Code is more or less like this:
var db = new PouchDB('http://my.website.com:5984/test');
var addToDB = function(){
var fragDB = {
_id: "tags_" + tagarr + "_" + new Date().toISOString(),
question: quest,
right: right,
wrong1: wrong1,
wrong2: wrong2,
wrong3: wrong3,
source1: source1,
source2: source2,
tags: tagarr,
tagsall: alltags
}
db.put(fragDB);
};
if(send){
send.onclick = function() {
addToDB();
};
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" href="style/jquery-tag-this.css?v=5">
<link rel="stylesheet" href="style/jquery-ui-1.9.2.custom.min.css">
</head>
<body>
<div class=l eft>
<title>
title
</title>
<h1>
header
</h1>
<form class="form" name="theForm" id="theForm" action="#" method="put">
<fieldset>
<textarea type="text" name="frage" id="frage" placeholder="Hier die Frage eingeben"></textarea>
</fieldset>
<fieldset>
<div>
<p class="right">
<input type="text" name="right" id="right" placeholder="Richtige Antwort" />
</p>
</div>
<div>
<p class="wrong">
<input type="text" name="wrong1" id="wrong1" placeholder="Erste Falsche Antwort" />
</p>
</div>
<div class="clear"></div>
<div>
<p class="wrong">
<input type="text" name="wrong2" id="wrong2" placeholder="Zweite Falsche Antwort" />
</p>
</div>
<div>
<p class="wrong">
<input type="text" name="wrong3" id="wrong3" placeholder="Dritte Falsche Antwort" />
</p>
</div>
</fieldset>
<fieldset>
<div>
<p class="source">
<input type="url" name="source1" id="source1" placeholder="Erste Quelle" title="Der Link muss mit 'http' beginnen ..." />
</p>
</div>
<div>
<p class="source">
<input type="url" name="source2" id="source2" placeholder="Zweite Quelle" title="Der Link muss mit 'http' beginnen ..." />
</p>
</div>
</fieldset>
<fieldset>
<input type="text" id="simple-tags" name="simple-tags">
</fieldset>
<p class="button">
<btn type="button" id="submit">Senden</btn>
</p>
</form>
</div>
<div class=r ight>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery.tagthis.js?v=5"></script>
<script src="js/pouchdb-3.3.1.min.js"></script>
<script src="js/app.js" charset="utf-8"></script>
</html>

Why is there no application cache to update?

I am working through Chapter 23 of Javascript for Web Developers. Why does running
applicationCache.update()
from Chrome's console
return
Uncaught DOMException: Failed to execute 'update' on 'ApplicationCache': there is no application cache to update.
??
My HTML file
<!DOCTYPE html> <html manifest="offline.appcache">
<head>
<title>Dynamic Quiz</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Here is the question and its possible answers -->
<div class="questionEntire">
<h3 class="questionTitle">Question title goes here</h3>
<form>
<button type="submit">Next</button>
<div class="choices">
<!-- <input type="radio" name="answer" value="0"><span>Choice 1</span><br> -->
<!-- <input type="radio" name="answer" value="1"><span>Choice 2</span><br> -->
<!-- <input type="radio" name="answer" value="2"><span>Choice 3</span><br> -->
<!-- <input type="radio" name="answer" value="3"><span>Choice 4</span><br> -->
</div>
</form>
</div>
<!-- This is the div that should be shown at the end -->
<div class="totalDiv hideThis">
<h3 class="total">Your Score is</h3>
<p>total</p>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="eventUtilities.js"></script>
<script src="main.js"></script>
</body>
</html>
My offline.appcache file
CACHE MANIFEST
#Comment
CACHE:
https://code.jquery.com/jquery-2.1.1.js main.js
main.js
NETWORK:
*
I am unable to see any files in Chrome's web dev tools under Resource->Application Cache. When I run applicationCache.status, 0 is always returned.
http://jsfiddle.net/michaellatch/uxtawuwv/
Thank you in advance!

Wordpress template causing white/blank screens with source and navigation behind them on IE7

I've bought and installed a custom template for Wordpress and it is randomly giving white/blank pages on all areas of the site excluding the admin cp when navigating around on IE7 (works fine on Chrome). I know it's the template as it works fine with standard templates, and I'm pretty sure it's a javascript as I've disabled all the plugins to see if it was those.
Here's the site: http://www.visualisebi.com
Looking at a page with minimal code that has the issue (Admin CP login area), the only major differences I can see that are different between the new template pages and a standard template are the amount of scripts the new template calls. Here's an example:
New template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery-1.6.1.min.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/modernizr-2.0.js?ver=2.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.prettyPhoto.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/easyTooltip.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.easing.1.3.js?ver=1.3'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/swfobject.js?ver=2.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.cycle.all.js?ver=2.99'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/audiojs/audio.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/custom.js?ver=1.0'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Standard template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Any help greatly appreciated.
Is the original theme properly working in IE7 ??
Have you checked the theme demo where you purchased the theme ? Is it working in IE7. If not you can ask the theme owner to fix the issue.
(Cannot comment yet and hence the answer.)

Categories

Resources