I make a login page with angular
it seem like angular is not even loading in mobile i used a variable to test the angular is loaded or not in desktop browser it work but when i run it on my phone angular is not load and variable is not printing
$scope.test= 122;
Don't know the problem cause, i also test after building but still same problem.
the login page is :
<!DOCTYPE html>
<html>
<head>
<title>Login </title>
<link href="css/loginnew.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<!-- <script src="js/angular.js"></script>-->
<script src="js/angular.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sweetalert.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/animate.css">-->
<!-- Custom Stylesheet -->
<!-- <link rel="stylesheet" href="css/loginstyle.css">-->
<style>
.errorlabel
{
color: red;
font-weight: normal;
width: 100%;
border-radius: 0px 0px 8px 8px;
padding: 0 10px;
background: rgba(128, 128, 128, 0.28);
}
</style>
</head>
<body ng-app="myApp" ng-controller="logincontroller">
<!--
you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<img id="profile-img" class="profile-img-card" src="img/user.jpg" />
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin">
<span id="reauth-email" class="reauth-email"></span>
<input id="name" ng-model="username" placeholder=" username" type="text" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
{{test}}
<input id="password" ng-model="password" placeholder=" **********" type="password" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
<button class="btn btn-lg btn-primary btn-block btn-signin" ng-click="verifylogin(username , password)"> Login </button>
<span class="errorlabel">{{errormessage}}</span>
<a href="#" class="forgot-password">
Forgot the password?
</a>
</form>
</div><!-- /card-container -->
</div><!-- /container -->
</body>
<script> function ajaxcall(rurl,rdata,successfunc,title,message)
{
alert('aese hi');
rurl= "https://basit.co/"+rurl ;
$.ajax({
url: rurl, data: rdata ,
success: function(data)
{
//unblur();
data = JSON.parse(data);
//data.data = JSON.parse(data.data);
if(data.errors.length>0)
{
$.each(data.errors, function(ind,e){
console.log(" --"+e.message);
sweetw('Error', e.message);
});
}
else
{
if(successfunc)
{
successfunc(data);
return;
}
if(rdata.reload)
{
setTimeout(function(){location.reload()},2500);
}
console.log();
if(!title)
{
sweets("Success",'');
}else{
sweets(title,message);
}
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// unblur();
console.log(jqXHR);
alert("Server Error");
},
type: 'POST' ,
});
}</script>
<script>
var app = angular.module('myApp', []);
app.controller('logincontroller', function($scope) {
$scope.loginuser="";
$scope.errormessage = "";
$scope.test= 122;
$scope.verifylogin = function (username,password){
ajaxcall("backend/accountf.php",{"verifylogin":true,username,password},function(response){
console.log(response.data);
if( username=="" || !username)
{
$scope.errormessage= response.data[0].errordetail;
}
else if(response.data[0].username == username)
{
$scope.loginuser = username ;
var currentpage = "/" + window.location.pathname.split('/')[1];
location.href ='indextest.html';
$scope.errormessage="";
}
else
{
$scope.errormessage= response.data[0].errordetail;
// alert(response.data[0].errordetail);
}
$scope.$digest();
}
);
}
});
</script>
</html>
I don't see your angular module (myApp) in the code... Try calling the script containing your angular module.
it work fine with android version greater then jellybean but not work with lower
so i send data with typescript format as ajaxcall("backend/accountf.php",{"verifylogin":true,"username":username,"password":password},function(response){
.
.
.
}
and now it work :)
Related
I am using reactJS to create a group of buttons.
However, I am unable to view the output (nothing comes on screen).
I have properly created a react class and rendered the HTML using babel. Here is the code. Please find where am I going wrong at this, why nothing gets printed on the screen.
I have imported the CDN of the required files.
react-min.js
react-dom.min.js
browser.min.js
babel.js
``
Main
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<style>
#side{
position: fixed;
width:10%;
height:100%;
background-color: black;
border:2px solid black;
color:white;
z-index: -1;
}
#buttons{
position: fixed;
top:10%;
left:2%;
color:white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type = "text/babel">
var side = React.createClass({
render:function(){
return
(
<div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
);
}
});
ReactDOM.render(
<side />,
document.getElementById('buttons'));
</script>
React Component names should start with a capital letter.
Change
var side = React.createClass({
...
});
ReactDOM.render(
<side />,
document.getElementById('buttons')
);
To
var Side = React.createClass({
...
});
ReactDOM.render(
<Side />,
document.getElementById('buttons')
);
Refer official docs - components must be capitalized for more info.
Adding executable code for clarity
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<style>
#side {
position: fixed;
width: 10%;
height: 100%;
background-color: black;
border: 2px solid black;
color: white;
z-index: -1;
}
#buttons {
position: fixed;
top: 10%;
left: 2%;
color: white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type="text/babel">
var Side = React.createClass({ render:function(){ return (
<div>
<div>Hello World</div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
); } }); ReactDOM.render(
<Side />, document.getElementById('buttons'));
</script>
HTML file - directive template
<div class='class1'>
<span ng-show="Edit1">
<script type="text/ng-template" id="editdetails.html">
<div class="modal">
<h3>Update Unit Details</h3>
<input type='text' name='email' value=''>
</div>
</script>
</span>
</div>
<div class='class2'>
<span ng-show="Edit2">
Some content
</span>
</div>
Angular JS code
I am loading this into html file called directive template and then want to get only the ng-template content of editdetails.html how to do that?
var directiveTemplate = null;
var req = new XMLHttpRequest();
req.onload = function () {
directiveTemplate = this.responseText;
};
var url1 = 'directivetemplate.html';
req.open('get', url1, false);
req.send();
$templateCache.put('template.html', directiveTemplate);
$edittemplate=directiveTemplate;
//The below code doesn't get me content inside the editdetails
$templateCache.put('editdetails.html',$edittemplate.filter('#editdetails.html').html());
Obviously you could read more about $templateCache and script documentation at Official AngularJS website. Other option is to try this one.
angular
.module("Example", [])
.controller("ExampleCtrl", ExampleCtrl);
ExampleCtrl.$inject = ['$scope', '$templateCache'];
function ExampleCtrl($scope, $templateCache) {
$scope.getContent = function() {
var script = document.getElementsByTagName("script");
var id = script[2].id;
var htmlContent = $templateCache.get(id);
document.getElementById("display").innerHTML = htmlContent;
};
}
/* Styles go here */
.content {
background-color: green;
color: white;
padding: 10px;
}
.button {
width: 150px;
padding: 10px;
background-color: red;
color: white;
border: 0px white solid;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="Example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<script type="text/ng-template" id="templateId.html">
<p class="content">This is the content of the template</p>
</script>
<p>
<input type="button" class="button" ng-click="getContent()" value="Get Template's Content">
</p>
<div id="display"></div>
</body>
</html>
I have a main index.html file and in that file, I want to include another .html using ng-include. This is my code:
(I will only upload the relevant code sections, if the whole code is needed, I can edit it)
index.html
<!DOCTYPE html>
<html>
<head>
<!-- include CAPH 3.0.1 default package -->
<link href="lib/caph/3.0.1/caph.min.css" rel="stylesheet" type="text/stylesheet">
<link href="styles/main.css" rel="stylesheet" type="text/stylesheet">
<!-- include jQuery file (you can use AngularJS & jQuery in your environment) -->
<script src="lib/caph/3.0.1/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lib/caph/3.0.1/bower_components/angular/angular.min.js" type="text/javascript"></script>
<!-- include the CAPH Package for AngularJS -->
<script src="lib/caph/3.0.1/caph-angular.min.js" type="text/javascript"></script>
</head>
<script>
var myApp = angular.module('myApp', ['caph.focus', 'caph.ui']);
myApp.factory('sharedProperties', function(){
var DEPTH={
MAIN_MENU: 1,
RESTAURANT: 2,
MOVIES: 3,
MOVIE_SELECT: 4
};
var currentDepth;
var focus = function($event) {
$($event.currentTarget).css({
border: '10px solid red'
});
}
var blur = function($event){
$($event.currentTarget).css({
border : '3px solid transparent'
});
}
var select = function($event){
if($event.target.id === "roomservice"){
currentDepth = DEPTH.RESTAURANT;
} else if($event.target.id === "vod"){
currentDepth = DEPTH.MOVIES;
} else if($event.target.id === "back"){
currentDepth = DEPTH.MAIN_MENU;
} else if($event.target.id === "fantasy"){
currentDepth = DEPTH.MOVIE_SELECT;
}
return currentDepth;
}
return{
focus: focus,
blur: blur,
select: select,
currentDepth: currentDepth,
depth: DEPTH
}
});
myApp.controller('myController', function($scope, sharedProperties) {
$scope.currentDepth = sharedProperties.depth.MAIN_MENU;
$scope.focus = function($event){
sharedProperties.focus($event);
}
$scope.blur = function($event){
sharedProperties.blur($event);
}
$scope.select = function($event){
$scope.currentDepth = sharedProperties.select($event);
console.log($scope.currentDepth);
}
$scope.items = [];
for (var i = 0; i < 20; i++) {
$scope.items.push({
text: i+1,
image: 'image/moviepics/' + (i%2 + 1) + '.jpg'
});
}
</script>
<body ng-app="myApp">
<div ng-controller="myController">
<div ng-if="currentDepth === 4">
<h1>Pick a movie</h1>
<div ng-include="'new.html'">
</div>
</div>
</div>
</div>
</body>
</html>
And this is new.html:
<style>
.list{
position: absolute;
width: 600px;
height: 135px;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid transparent;
}
.item{
background: green;
box-sizing: border-box;
border: 3px solid white;
width: 200px;
height: 135px;
}
</style>
<caph-list container-class="list" on-focus-item-view="onFocusItemView($context)" items="item in items">
<div class="item" focusable data-focusable-initial-focus="{{$index===0?true:false}}">
<div class="test" style="width:100%; height:100%; background-size:100% 100%; background: url({{item.image || ''}})"></div>
</div>
</caph-list>
I am getting an ng-areq error with a WARNING of angular loaded more than once. For the full error, please see the attached picture.
I hope my question and code is clear
Any and all help is appreciated. Thank you.
When you include a template, HTML of relevant section of the page needs to be present in it.
In your new.html, you've included everything from the HTML tag which is unnecessary. Remove those and have only the necessary div and other elements.
Here i created for simple form with validation, my requirement is i dont want html5 popup message but i need focus for particular valid field, how to do ?
Thanks for ur help in advanced .............................................
'use strict';
var app = angular.module('telstraApp', []);
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TelsApp</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
<div class="wrapper">
<div class="row" style=" position: relative; top: 0; height: 55px !important;z-index:9999;">
</div>
<!--<div id="header" ng-include="'layout/header/header.html'" ></div> -->
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style=" height: 100%; top: 10px; height:0px; padding-top: 60px;">
</aside>
<div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px; overflow-y: auto; ">
<!-- Main content -->
<form>
<input type="text" ng-required="true">
<input type="text" ng-required="false">
<input type="text" ng-required="true">
<input type="submit">
</form>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- /.Footer -->
<!-- /.Footer -->
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
<style>
.appBanner{
position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>
In order to hide html5 validation messages, you have to specify novalidate on your form like this:
<form name='xyz' novalidate>
//your form
</form>
Read more about it here: disable html5 validations
You will have to specify autofocus on the input on which you want focus.
have a look at this fiddle where focus is on email input. focus with novolidate
I have some dummy data in a mainMenu.json which will server to populate a list which will be the first template loaded by angular framework when app starts.
chrome console reporting no errors.
But I get a white "blank" page "right image" and not sure where I went wrong. Thanks
//mainMenu.json
[{
"name": "item1",
"image": "item1_"
}, {
"name": "item2",
"image": "item2_"
}, {
"name": "item3",
"image": "item3_"
}]
//--------------------------------------------------------------------
//app.js
var myApp = angular.module('myApp', [
'ngRoute', //turn on deep linking
'appControllers' //js to handle the route
]);
//Configure how the partials are going to run
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/mainMenu.html',
controller: 'MainMenuCtrl'
}).otherwise({ //home page
redirectTo: '/list'
});
}]);
//--------------------------------------------------------------------
// controlers.js
var appControllers = angular.module ('appControllers', []);
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('js/mainMenu.json').success (function (data){
$scope.menuItems = data;
});
}]);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main {
margin-top: 40px;
margin-bottom: 40px;
padding: 0.5em;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
width: 100%;
}
header, footer {
background-color: white;
}
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}
<!--index.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main ng-view></main>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
//--------------------------------------------------------------------
<!--mainMenu.html-->
<section>
<ul>
<li ng-repeat="item in menuItems">
<br/>
<p>dummy</p>
<h2>{{item.name}}</h2>
</li>
</ul>
</section>
You have an error in your code
var appControllers = angularModule ('appControllers', []);
It should be
var appControllers = angular.module ('appControllers', []);
To catch an error on $http.get promise do something like this :
$http.get(your_options).then(function(data){
}, function(err){
});
First function is your success callback and the second one is your error callback. More about $http can be found HERE