Function not invoked on button click but invoked on form load - javascript

In the below code snippet, the button clicks for filepath1 and filepath2 do not fire the function readCSV().
However, readCSV() is triggered on form load.
I'd expect the function to be triggered on button click as well.
Appreciate if you can help me out here.
Thanks!
<!DOCTYPE html>
<html ng-app="test" ng-controller="homePage">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<title>TEST</title>
<link rel="stylesheet" href="_css/compiled.css" />
<link rel="stylesheet" href="_css/style-fonts.css" />
<link rel="stylesheet" href="_css/scrollbar/perfect-scrollbar.min.css" />
<script src="_js/libs/angular.min.js"></script>
</head>
<body>
<header class="wrapper headerWrapper mainColorBG">
</header>
<section class="lightBlueBar">
<h2 class="inlineBlock redText"><span class="circularIcon icon-flask"></span> <span class="text">Reports</span></h2>
<div class="searchBar inlineBlock">
<form method="get" ng-submit="readCSV()">
<div ng-controller="submitController">
<label ng-model="filePath" class="fileLabel inlineBlock button grayButton"><span class="icon-cloud-upload"></span><span>Upload</span> <input type="file" ng-model="csvPath"/></label>
<button ng-model="filePath1" ng-click="readCSV()" class="button blueButton"><span class="icon-paper-plane"></span> SUBMIT</button>
<button ng-model="filePath2" ng-click="readCSV()">submit</button>
</div>
</form>
</div>
</section>
</body>
</html>
Script section
var test=angular.module("test",[]);
test.controller('submitController',function readCSV($scope, $http){
var csv = "hello";//$scope.csvPath;
$scope.filePath1;
alert(csv);
});

The way you have declared the controller is wrong. readCSV is not needed here in the controller. And the controller is always initiated when the app is loaded.
For you to call a function do something like this
var test=angular.module("test",[]);
test.controller('submitController',function($scope, $http){
$scope.readCSV=function(){
//Do something
};
});

Try:
var test = angular.module("test", []);
test.controller('submitController', function ($scope, $http) {
$scope.readCSV = function () {
var csv = "hello";//$scope.csvPath;
$scope.filePath1;
alert(csv);
}
});

Related

Webpage eventlistener and script section not running

Trying to make a basic webpage where you can type a message for it to be displayed on the website. However, the script section of my website does not seem to work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
document.addEventListener('DOMContentLoaded', function()
{
let submit = document.querySelector('#submit');
submit.addEventListener('click',function()
{
let questions = document.querySelectorAll('.question');
let input = document.querySelector('input');
for (let i =0; i< questions.length; i++)
{
if questions[i].innerHTML == ""
{
questions[i].innerHTML = 'a';
}
else
{
continue;
}
}
});
function myfunction()
{
alert('test');
}
});
</script>
<title>Write A Message!</title>
</head>
<body class="p-3 mb-2 bg-secondary text-white">
<h1>How to write a message</h1>
<hr>
<p>Type a Message into the textbox below to display a public letter!</p>
<div>
<input type = 'text'>
<button id = 'submit'>Type a message!</button>
</div>
<div>
<h1>Message 1!</h1>
<hr>
<p class = 'question'></p>
<h2>Message 2!</h2>
<hr>
<p class = 'question'></p>
<h3>Message 3!</h3>
<hr>
<p class = 'question'></p>
<button onclick = 'myfunction()'>test</button>
</div>
</body>
</html>
I tried adding a button that would display an alert as well but it does not run as well when clicked.
First, javscript that contains listener/reference to DOM elements is better to include in the end on body, avoid putting in head.
Second, myfunction() is not accessible bebcause you included it under DOMContentLoaded. It should be outside of the listener (global scope).
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Write A Message!</title>
</head>
<body class="p-3 mb-2 bg-secondary text-white">
<h1>How to write a message</h1>
<hr>
<p>Type a Message into the textbox below to display a public letter!</p>
<div>
<input type='text'>
<button id='submit'>Type a message!</button>
</div>
<div>
<h1>Message 1!</h1>
<hr>
<p class='question'></p>
<h2>Message 2!</h2>
<hr>
<p class='question'></p>
<h3>Message 3!</h3>
<hr>
<p class='question'></p>
<button onclick='myfunction()'>test</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
let submit = document.querySelector('#submit');
submit.addEventListener('click',function(){
let questions = document.querySelectorAll('.question');
let input = document.querySelector('input');
for (let i =0; i< questions.length; i++){
if (questions[i].innerHTML == ""){
questions[i].innerHTML = 'a';
} else {
continue;
}
}
});
});
function myfunction() {
alert('test');
}
</script>
</body>
</html>

Getting Function.prototype.bind.apply(...) is not a constructor error

I am trying to simulate Controller Inheritance in AngularJS (1.6.9), but I am getting an error on console as : Function.prototype.bind.apply(...) is not a constructor Here is the HTML file:
<!-- Controller Inheritance -->
<!DOCTYPE html>
<html lang="en" ng-app="app7">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial 7</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as parent">
<p>Name: {{parent.name}}</p>
<p>Sound: {{parent.sound}}</p>
<button ng-click="parent.animalClick()">Animal Data</button>
</div>
<br><br>
<div ng-controller="dogCtrl as dog">
<p>Name: {{dog.child.name}}</p>
<p>Sound: {{dog.child.sound}}</p>
<button ng-click="dog.child.animalClick()">Dog Data</button>
<button ng-click="dog.child.dogData()">Get More Data</button>
</div>
<script src="js/exam7.js"></script>
</body>
</html>
Here is the JS file:
//Controller Inheritance Demonstration
let app7 = angular.module('app7',[]);
//Parent Controller
app7.controller('mainCtrl',()=>{
this.name="Animal";
this.sound="Silent";
this.animalClick= ()=>{
alert(this.name+' says '+this.sound);
};
});
//Child Controller
app7.controller('dogCtrl',($controller)=>{
let childCtrl = this;
childCtrl.child=$controller('mainCtrl',{});
childCtrl.child.name="Dog";
childCtrl.child.bark="Woof"; //child`s own variable
childCtrl.child.dogData = ()=>{
alert(this.name+' says '+this.sound+' and '+this.bark);
};
});
I am trying to inherit mainCtrl in childCtrl but unable to do so. Output is not as expected. What could be the possible reason behind such an error?
You can't use the arrow notation everywhere in AngularJS.
AngularJS tries to call a function with new your_function(){...} method, treating it like a class, and it fails to do that with the arrow notation new ()=>{...}.
Simply change
app7.controller('mainCtrl',()=>{
to
app7.controller('mainCtrl',function(){
(as well as in other places)
You also had the wrong logic with the printing child values. You needed to access .child. sub-property first before you could print anything.
Here is a working example of your code:
let app7 = angular.module('app7', []);
//Parent Controller
app7.controller('mainCtrl', function() {
this.name = "Animal";
this.sound = "Silent";
this.animalClick = () => {
alert(this.name + ' says ' + this.sound);
};
});
//Child Controller
app7.controller('dogCtrl', function($controller) {
let childCtrl = this;
childCtrl.child = $controller('mainCtrl', {});
childCtrl.child.name = "Dog";
childCtrl.child.bark = "Woof"; //child`s own variable
childCtrl.child.dogData = () => {
alert(this.child.name + ' says ' + this.child.sound + ' and ' + this.child.bark);
};
});
<!DOCTYPE html>
<html lang="en" ng-app="app7">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial 7</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as parent">
<p>Name: {{parent.name}}</p>
<p>Sound: {{parent.sound}}</p>
<button ng-click="parent.animalClick()">Animal Data</button>
</div>
<br><br>
<div ng-controller="dogCtrl as dog">
<p>Name: {{dog.child.name}}</p>
<p>Sound: {{dog.child.sound}}</p>
<button ng-click="dog.child.animalClick()">Dog Data</button>
<button ng-click="dog.child.dogData()">Get More Data</button>
</div>
</body>
</html>

Why is parseInt not working for me?

No matter what I try I get NAN when I try to parse an input value into a variable. I am trying to make a calculator to determine fuel economy.
<!DOCTYPE html>
<html>
<head>
<title>Fuel Calculator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Demo project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div class="wrapper">
<h1>Fuel Usage</h1>
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<label>Miles Driven Per Year</label>
<input type="text" class="form-control" id="mpy">
</div>
<div class="form-group">
<label>MPG</label>
<input type="text" class="form-control" id="mpg">
</div>
<p>Gallons Used: <span id="used"></span</p>
<div class="form-group">
</div>
<button id="submit" type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
js file
var mpy = parseInt($('#mpy').val(), 10);
var mpg = parseInt($('#mpg').val(), 10);
var gallonsUsed = mpy/mpg;
$('#submit').click(function(){
$('#used').text(gallonsUsed);
});
Since you have the input fields declared globally, the initial value in the text value is empty. So the result of parseInt would give you a NAN value.
You need to calculate the parsed values once you invoke the click event.
$('#submit').click(function(e){
var mpy = parseInt($('#mpy').val(), 10);
var mpg = parseInt($('#mpg').val(), 10);
var gallonsUsed = mpy/mpg;
$('#used').text(gallonsUsed);
});
Working example : https://jsfiddle.net/DinoMyte/b9bhs4s3/
The way you have your code, mpy/mpg/gallonsUsed are all calculated when the page is loaded (before any user input can even take place)
Your code would make more sense like this
$('#submit').click(function(){
var mpy = parseInt($('#mpy').val(), 10);
var mpg = parseInt($('#mpg').val(), 10);
var gallonsUsed = mpy/mpg;
$('#used').text(gallonsUsed);
});
So that the calculation is done once user has entered data and hit submit

Why isn't my Angular.js GET request working?

My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>

ng-click works kind of

I am learning angular js right now and have hit another rut. I am trying to make my buttons change the movie ID. I know it is recognizing the click because I had it change some words in the HTML file to test it. I think it isn't talking to my JS file.
I found this during my search http://jsfiddle.net/7Sg6a/. The docs just have an expression inside the parenthesis and this example has parameters. I tried both and a few other but neither worked.
Here is my latest failed attempt. If I could get a nudge in the right direction I would be very grateful.
<!DOCTYPE HTML>
<html lang = "en" ng-app="movies"><!-- lets page use controllers/movies.js-->
<head>
<title>Watch a movie!</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.mysite.com/rss/rss2.xml" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"> -->
<!-- Preloading scripts? -->
<script src="js/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
<!--<script src="js/angular-resource.min.js" type="text/javascript"></script>-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- <script src="js/bootstrap.js"></script> -->
<script src="controllers/movies.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
<img src="images/logo.png" alt="Cinema Plus - Movies plus a whole lot more." class="img-responsive">
</div>
</header>
<nav>
<div class='row-fluid'>
<div class="span2"></div>
<button ng-click="nowShowing()" type="button" class="btn btn-primary btn-lg span4 "><h3>NOW PLAYING</h3></button>
<button ng-click="comingSoon()" type="button" class="btn btn-default btn-lg span4 "><h3>COMING FRIDAY</h3></button>
<div class="span2"></div>
</div>
</nav>
<div id='content' class='row-fluid'>
<div class='span8 info'>
<h2 ng-controller = "movieController">{{movies.title}}</h2>
<h2 ng-controller = "movieController">RATED: {{movies.mpaa_rating}}</h2>
<h2 ng-controller = "movieController">{{movies.runtime}} Minutes</h2>
<p ng-controller = "movieController">DESCRIPTION: {{movies.synopsis}}</p>
</div>
<div class='span4 poster'>
<img ng-controller = "movieController" src={{movies.posters.original}} alt={{movies.title}} class="img-responsive">
</div>
</div>
<div>
Note: This theator only plays one movie at a time. film will be hard coded into the app. Would like to see it fed by RSS orsomething in the future.
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
JS
var movies = angular.module('movies', []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
params: {
apikey: 'wq98h8vn4nfnuc3rt2293vru',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data;
});
});
movies.click('nowShowing', function ($scope){
alert("asdasd");
});
how long until I actually get this and can stop asking stupid questions?
your .click function doesn't belong. You're using Angular like jQuery, and it's more (awesome) than that. You need to put the nowShowing function and such inside your controller:
var movies = angular.module('movies', []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
params: {
apikey: 'secret',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data;
});
$scope.nowShowing = function(){
//whatever is in here will execute when a user interacts with an element with the ng-click="" directive
}
});
Also, I would highly recommend you create a service for your http requests to your api. You are creating a tightly coupled app with your current approach.
movies.factory('moviedata',function($http){
return
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
params: {
apikey: 'secret',
callback: 'JSON_CALLBACK'
}
})
})
then 'inject' it in your controller like so:
movies.controller('movieCtrl',function($scope, moviedata){
//resolve returned promise
moviedata.success(function(data){
$scope.data = data;
});
$scope.nowShowing = function($log){
//whatever is in here will execute when a user interacts with an element with the ng-click="" directive
$log.info("nowShowing method fired");
}
})

Categories