I am a newbie on reactjs. I was playing with multiple components for creating a form , but got an error which i am not able to solve.
I searched thoroughly, but couldnt find an answer.
Please help
The errors are the following:
TypeError: erroneousLine is undefined in JSXTransformer-0.12.2.js
ReferenceError: Login is not defined JSXTransformer-0.12.2.js:
login.jsx
var Login = React.createClass({
render: function () {
return (
<div className="container"><h2>Library</h2>
<form role="form" action="first.ejs">
<textField/>
<div className="form-group">
<label for="email">UserId:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email"/>
</div>
<div className="form-group">
<label for="pwd">Password:</label>
<input type="password" className="form-control" id="pwd" placeholder="Enter password" />
</div>
<div className="checkbox">
<label><input type="checkbox"/> Remember me</label>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form></div>
);
}
});
text_field.jsx
var textField=React.createClass({
render: function(){
return (<input type="text" name="username"/>);
}
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="src/text_field.jsx"></script>
<script type="text/jsx" src="src/login.jsx"></script>
<script type="text/jsx">
React.render(<Login/>, document.body);
</script>
</body>
</html>
There is a typo in your last script tag. The type should be javascript, not jsx.
<script type="text/javascript">
React.render(<Login/>, document.body);
</script>
Related
I find a checkbox function from the web as below, how to remove checkbox if click Uncheck, maybe need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
I am new to angular js. I try to create a simple page to connect angular js and backend laravel database. I keep receiving an error as an Error: $injector:unpr
Unknown Provider. I don't know what was wrong in the code. I hope anyone helps me to solve the issue. Thanks in advance
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,Comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
Used wrong name of factory, comment instead of Comment
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
</body>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
</script>
</html>
In the below snippet, I'm not able to print a simple value of search_username.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div ng-controller="MainController">
{{userdata.name}} {{error}}
</div>
</body>
</html>
JS Code:
// Code goes here
var MainController = function($scope, $http) {
$scope.search_username = "anyname"; // Value assigned here
var onComplete = function(response) {
$scope.userdata = response.data;
}
var onError = function(reason) {
$scope.error = "Not able to fetch data";
}
var request = $http.get("https://api.github.com/users/angular");
request.then(onComplete, onError);
}
var myModule = angular.module("GibtHubViewer", []);
myModule.controller("MainController", ["$scope", "$http", MainController]);
Thank You
your model out of scope. you should put all model in scope that define it by controller.
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div >
{{userdata.name}} {{error}}
</div>
</body>
The position where you are trying to print the model is out of Scope of the controller which is used, try this:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div>
{{userdata.name}} {{error}}
</div>
</body>
</html>
you are trying to display the {{search_username}} outside the controller area.
the search_username is added in the scope in MainController but you are trying to print that outside the MainController's area.
<div ng-controller="MainController">
{{userdata.name}} {{error}}
search_username - {{search_username}} // This will print the username
</div>
Whwn I click on signUp button in signUp.html page,it should redirect to signIn.html page.But I'm unable to redirect to signIn.html page.Can anyone please help me out regarding this issue ...
My signIn.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div class="container" id="wrapper" align="center">
<div>
<img id="imgDiv" src="images/favicon.png">
</div>
<div id="loginDiv">
<h3>LogIn</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email"
placeholder="Email" /><br> <br> <input type="password"
class="resizedTextbox" ng-model="password" placeholder="Password" /><br>
<br> <input type="submit" class="resizedBtn" value="LogIn">
<div id="signUpDiv">
Not a member yet? SignUp Now
</div>
</form>
</div>
</div>
</body>
My signUp.html:
<html ng-app="Sample">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/custom.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-animate.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/script.js"></script>
</head>
<body>
<div class="container" id="wrapper1" align="center">
<div>
<img id="logoDiv" src="../images/favicon.png">
</div>
<div id="loginDiv">
<h3>Sign up</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
<input type="text" class="resizedTextbox" placeholder="Password" /><br><br>
<input type="text" class="resizedTextbox" placeholder="Verify Password" /><br><br>
<a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
</button></a>
</form>
</div>
</div>
</body>
</html>
My script.js :
var app = angular.module('Sample', [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/signUp', {
// controller :'signUpController',
templateUrl : '../signIn.html'
})
} ]);
Use this after your registration success.
$location.path('/signinpath');
For this you need to inject $location service
I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.
Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});
just do following changes
$scope.Click = function()
{
//your logic
}