I have a single page angular app with an authentication service. The landing page of the app is a form where the user can sign in. There is also a link to a "sign up" page where the user can create an account. These are implemented via the ng-switch directive as my authentication service seems to prevent me from redirecting to a new url when the user clicks on "sign up". When the user has signed in, they see a menubar which should only be seen when the user is authenticated. My problem is that when I hit the refresh button while on the landing page, the "sign up" form and the menubar flash in the background of the "sign in" form for a split second. Hope that explanation makes sense, anyone know how to fix it or have a suggestion for a better structure?
Here's my index.html:
<html ng-app="myApp" >
<head>
<title> My App</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/signin.css">
<link rel="stylesheet" type="text/css" href="css/passwordvalidation.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.controller">
<div ng-switch-default ng-controller="UserCtrl">
<div ng-show="!isAuthenticated">
<form class = "form-signin">
//Sign In Form code here
<button class = "btn btn-primary" ng-click="signIn()">Sign In</button>
//This button performs the ng-switch based on the controller name
<button class = "btn btn-default" ng-click= "view.controller = 'UserNewCtrl'" >Register</button>
</div>
</div>
</form>
</div>
<!--This part of index.html is only shown when a user has been authenticated -->
<div ng-show="isAuthenticated">
//MenuBar Code here
</div>
<!--This is where partials will be loaded depending on menu item selection-->
<div class="col-md-10">
<div ng-view></div>
</div>
</div>
</div>
<!--Start of sign up form-->
<div ng-switch-when="UserNewCtrl" >
<div ng-controller = "UserNewCtrl" >
<div ng-show="!isAuthenticated">
//Sign Up Form Code here
</div>
</div>
</div>
<!--End of Sign Up Form-->
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/transition.js"></script>
<script src="js/ui-utils.js"></script>
</body>
</html>
And my MainCtrl which is supposed to control the whole page, and sets the default Controller to the one which handles signing in so that the sign in form is the first thing you land on, if it helps:
angular.module('myApp.controllers')
.controller('MainCtrl', function($scope) {
$scope.view={
controller: 'UserCtrl'
};
})
This is an FOUC issue. The form flashes because it appears in the default state of your page before AngularJS has finished bootstrapping.
Check out ngCloak or consider moving your form into an element directive that is rendered conditionally.
Related
I have written an HTML file, in the same when I try to pass data to a .gs file in order to print or console.log then it doesn't give the log in the output of the console and instead, it reflects these statements in the console:
Net state changed from IDLE to BUSY
Net state changed from BUSY to IDLE
Attaching the code UI, HTML file, and .gs file below for reference.
HTML output:
HTML file:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">insert_link</i>
<input id="zz" type="text" class="validate">
<label for="zz">Insert Text</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="testBox.gs"></script>
<script>
var gSheetUrl = document.getElementById("zz");
document.getElementById("btn").addEventListener("click",abc);
function abc(){
console.log("inside abc");
var data = {
zzz: zz.value
}
google.script.run.getData(data);
}
</script>
</body>
</html>
.gs file:
function openIndexDialog() {
var template = HtmlService.createTemplateFromFile("indexDialog");
var html = template.evaluate().setHeight(450).setWidth(600);
SlidesApp.getUi().showModalDialog(html,"Demo App");
}
function getData(data){
console.log(data)
console.log("data logged")
}
Console output:
Main Problem: Not able to print data when passed through getData(data)
Those are not error messages, they are information logs about the server- client communication .
Every time that your client code call a server-side function using google.script.run there will be a Net state changed from IDLE to BUSY log and when the server-side function ends will be a Net state changed from BUSY to IDLE.
Regarding
Main Problem: Not able to print data when passed through getData(data)
If you want to print data on the client side, you have use console.log on the client-side, not on the server-side. Logs printed from the server side can be found in the executions page.
Related
Unwanted Output In Console
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
I'm stuck on something very simple and can't seem to figure out what I'm doing wrong. I've created a blank project in ionic and would like to set a default home screen as the first view loaded. I'm staring at a blank screen when I run this in the browser.
My code is as follows:
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home_screen', {
url:'/',
templateUrl: 'home_screen.html'
})
})
home_screen.html
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Home Screen</h1>
</ion-header-bar>
<ion-content>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<button class="button button-block button-balanced">Play</button>
</div>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<a class="button button-outline button-block button-balanced" href="#/app/about">About</a>
</div>
</ion-content>
</ion-pane>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
home_screen.html will work just fine when I include it in the index.html but does not work when I try to set it as the default view. I tried following the tutorial from here:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Any help would be appreciated.
Actually you have to uncomment the ion-nav-view in your index.html file. You don't have to give that a name even. Try to add this in your index.html file:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
To get started with ionic I also recommend to look at other starter projects like tabs or sidemenu which are described here.
I have included a php file using javascript function getApi() it working properly in my intel-xdk emulator but when i load it in to my android device it will not working properly
so pleas tell me what's wrong with my code , and my device is also connected with internet so it may able to retrive data from the server ,but it can't
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="app_framework/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="app_framework/css/icons.min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js">
</script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function getApi() {
alert("Yes");
$.ajax({
type: "GET",
url: "http://exam.coreducation.in/api.php",
success: function(data){
var total = "";
var record = JSON.parse( data );
for(i=0; i<record.length; i++){
total += ("Contact: "+record[i]['contact']+", Name: "+record[i]['name']+", City: "+record[i]['city'] + "<br/>");
}
$('#ddata').html("<h4 style='text-align:center'>"+total+"</h4>")
}
});
}
</script>
<script type="application/javascript" src="app_framework/appframework.min.js"></script>
<script type="application/javascript" src="app_framework/appframework.ui.min.js"></script>
</head>
<body id="afui">
<!-- content goes here-->
<div class="uwrap" id="content">
<div class="upage panel" id="page0" data-header="none" data-footer="none">
<div class="upage-outer">
<div class="upage-content">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col">
<div class="widget-container content-area vertical-col">
<a class="button widget uib_w_1 d-margins icon graph" data-uib="app_framework/button" onclick="return getApi();">GetApiData</a><span class="uib_shim">
</span>
<div id="ddata">DAta Will Show Here</div>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
</div>
<!-- /uwrap -->
</body>
</html>`enter code here`
The api is blocked due to Cross domain access, same reason why your code will not work in any browser. But there is a way to make it work in Intel XDK apps, just add <script src="xhr.js"></script> after your intelxdk.js script inclusion. It will then work on device.
More info about AJAX and XDK here: http://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps
I resolved similar problem using domain whitelistening.
In Intel XDK it can be done by following next steps:
Open Projects Tab
Expand Build Settings
Enter "*" (without quotes) to Domain List field.