Simplest angularjs page not working [closed] - javascript

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 7 years ago.
Improve this question
I am watching a video to learn angularjs. I used CDN link for including angularJs
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"/>
</head>
<body ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li ng-repeat="pname in names">
{{pname}}
</li>
</ul>
</body>
</html>
I have no other file. That's the simplest piece of code I have and on browser I see blank page. What's wrong in this?

Put an ng-app attribute on the html tag:
<html ng-app>
And close your script tag (it's not self-closing)
http://jsfiddle.net/g02ket0t/

Fix the script line:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

You can also use data-ng-, instead of ng-, if you want to make your page HTML valid.
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
</head>
<body>
<div data-ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li data-ng-repeat="pname in names">{{pname}}</li>
</ul>
</div>
</body>
</html>

You're missing the closing tag. Also add the ng-app attribute in the html tag to link to your app.

Complete Script tag
Use ng-app attribute.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li ng-repeat="pname in names">
{{pname}}
</li>
</ul>
</body>
</html>

Related

Why does my simple script tag break the following script tag? [closed]

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 7 months ago.
Improve this question
I am tearing my hair out over this. Why is foo() undefined when I click the button in this script?
<html>
<body>
<script type="text/javascript" src="./app2.js"/>
<script">
function foo() {
console.log('foo...');
}
</script>
<button type="button" onClick="foo()" id="testbutton">Click!</button>
<button type="button" onClick="hello()">Click hello!</button>
</body>
</html>
but not if I remove the first script tag?
<html>
<body>
<!-- <script type="text/javascript" src="./app2.js"/>-->
<script>
function foo() {
console.log('foo...');
}
</script>
<button type="button" onClick="foo()" id="testbutton">Click!</button>
</body>
</html>
My app2.js is just
function hello() {
console.log('hello');
}
I have tested in Chrome and Safari on macOS. The hello function works as expected.
Auto closing tags are used in React JSX and not in vanilla HTML
Replace
<script type="text/javascript" src="./app2.js"/>
with
<script type="text/javascript" src="./app2.js" ></script>

Alert not getting inner HTML? [closed]

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 5 years ago.
Improve this question
I am trying to get my java script file to capture the inner Html of an id in my HTML file and alert it.
here is my html code
<head>
<script type="text/javascript" src="indexjs.js"></script>
</head>
<body>
<div class="topbar">
<ul>
<li id="barmuhia">Job Muhia</li>
</ul>
</div>
</body>
the js code is
alert(GetElementById("barmuhia").innerHTML)
The actual method name is getElementById and it is in the document object.
See documentation.
Change GetElementById first letter to lower case and prefix with document - document.getElementById.
Example
alert("js file connected");
alert(document.getElementById("barmuhia").innerHTML);
<body>
<div class="topbar">
<ul>
<li id="barmuhia">Job Muhia</li>
</ul>
</div>
</body>
Updated
index.js
window.onload = function () {
// your code goes here
}
Or
<head>
</head>
<body>
<div class="topbar">
<ul>
<li id="barmuhia">Job Muhia</li>
</ul>
</div>
<script type="text/javascript" src="indexjs.js"></script>
</body>
GetElementById isn't method
Switch to getElementById() or use jQuery $("#element").html();
Hi You are missing document and using GetElementById instead of getElementById here, use below
alert(document.getElementById("barmuhia").innerHTML);
you can also use below jquery method
$("#barmuhia").html()
alert(document.getElementById("barmuhia").innerHTML);
<head>
<script type="text/javascript" src="indexjs.js"></script>
</head>
<body>
<div class="topbar">
<ul>
<li id="barmuhia">Job Muhia</li>
</ul>
</div>
</body>
i managed to solve it out through your help.
first, it was so silly of me to not realized that i had changed the content of #barmuhia to an img element. i changed it back to a normal text element but it still didn't work. i used one of the solutions provided above to put the alerts in a function which will only call after the my webpage is loaded.
window.onload = function () {
alert('js file connected')
alert(document.getElementById("barmuhia").innerHTML) }
Thank you all.

redirect using document ready does not work [closed]

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 7 years ago.
Improve this question
here below is my code i can't seem to find what is wrong it is not redirecting to the link.
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() { $("formRedirect").submit(); });
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
Try this:
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formRedirect").submit();
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
For id jquery detect them with #
Try like this
$("#formRedirect")[0].submit();
Use
$(document).ready(function() {});
or
$(function(){})
Both same
U have added $(function(){}); inside document.ready
$(function(){}); is similar to $(document).ready(function() {});
Use following code:
$(document).ready(function() {
$("#formRedirect").submit();
});
I find the Chrome console to be very helpful in debugging situations like this. I would start by making sure you are getting a result from your jQuery selector.
You can open the Chrome console by pressing F12
In the Chrome console, type $("formRedirect") and see if you get any results. You probably won't, since you are missing the # ID selector.
Next, try submitting your corrected jQuery object. If it doesn't work, try accessing the actual HTML object by adding in a [0] at the end of your selector, as suggested by #Anik.

How to show html result form a texterea [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>

javascript- function not defined error [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a html page with a button whos onclick calls a javascript function...but I have been getting a function not defined error for two days! Can someone help?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="css/jqm-docs.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.2.1.js"></script>
<script>
function doSomething(){
alert('this is a test');
}
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="content" id = "test" data-theme="c">
$confirm
Cancel
</div>
</div>
</body>
</html>
This might be handy:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
You need to stick your scripts within the page element:
<div data-role="page">
<script>
function doSomething(){
alert('this is a test');
}
</script>
<!-- the rest of your stuff -->
</div>
In fact i have passed personally with this error even with valide HTML all what you need to do is move all of your functions to the head element.
Here is a fiddle:
http://jsfiddle.net/WekEA/1/
To demonstate what i have said in the framework & change the NoWrapToHead to onload

Categories

Resources