In order to internationalize I used fake button technique. When I try the fake button everything happens fine except that form does not submit.
It only submits when I click the actual browse button and select the file.
Can some one throw some light on this behaviour.
<html>
<script>
function triggerFileUpload()
{
try{
document.getElementById("theFile").click();
}catch(e){
alert(e);
}
}
function setHiddenValue()
{
document.getElementById("dummyField").value = document.getElementById ("theFile").value;
}
</script>
<body>
<div id="dummyDiv">
<form action="http://www.google.com">
<input type="Text" disabled="disabled" class="inputField" id="dummyField"/>
<input type="button" class="inputField" value="Buscar Archivo" onclick="triggerFileUpload()"/>
</div>
<div id="uploadDiv" style="display: block;">
<input type="file" id="theFile" name="theFile" onchange="setHiddenValue()"/>
</div>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Although the above behavior still remains unanswered but I was able to achieve the localization of File upload control -
<html>
<head>
<link rel="stylesheet" href="browse.css" type="Text/css"/>
<script>
function openBrowse(){
document.getElementById("realBrowse").click();
}
function populateFakeField(){
document.getElementById("fakeBrowseField").value=document.getElementsByName("q")[0].value;
}
</script>
</head>
<body>
<form action="https://www.google.co.in/search">
<input type="Text" id="fakeBrowseField"/>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<span>Buscar Archivo</span>
<input type="file" name="q" multiple="" onchange="populateFakeField()">
</span>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The browse.css
.fileinput-button {
position: relative;
overflow: hidden;
float: left;
margin-right: 4px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0;
filter: alpha(opacity=0);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.btn-success {
background-color: #5bb75b;
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #d4d0c8;
border: 1px solid #cccccc;
/*border: 0;*/
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #d4d0c8 #d4d0c8 #bfbfbf;
border-bottom-color: #b3b3b3;
}
Related
In the following image which is my implementation, I have two sets of photos, the first group is uploading ones, and the second groups are the uploaded ones.
In reality, right after the last uploading image, the second group should start.
I started style with available photos, later adding uploading images stamp was added, and codes are becoming spaghetti.
I looking for a way to make the asked scenario. Any idea?
My simplified HTML codes is (beside the html comments, I put some comments with ** here for explanation)
<div class="gallery-wrapper">
<ng-container *ngFor="let file of progressFiles; let i = index;">
<div class="frame">
<div class="photo-wrapper">
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
</div>
<div class="waiting-frame">
<div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
<div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
</div>
</div>
</ng-container>
<!-- this part read medias -->
<div *ngIf="mediaContent && mediaContent.length">
<!-- draged and dropped medias -->
<div dnd-sortable-container [sortableData]="mediaContent">
<ng-container *ngFor="let media of mediaContent ; let i = index">
<div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
<div class="photo-wrapper">
<img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
</div>
<div class="modifiers hidden-sm hidden-xs">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
<div class="modifiers visible-sm-inline-block visible-xs-inline-block">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2"></div>
<div class="sprite sprite-editor adjust"></div>
<div class="sprite sprite-garbage-bin-black"
(click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
*ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
And here is my SASS codes using flex-box technique.
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-left: -5px;
margin-right: -5px;
.frame {
margin: 10px;
border-radius: 6px;
border: 1px solid $gray;
max-width: 152px;
height: 194px;
overflow: hidden;
position: relative;
cursor: move !important;
display: inline-block;
.photo-wrapper {
width: 100%;
height: 150px;
overflow: hidden;
border-bottom: 1px solid $gray;
display: flex;
align-items: center;
background-color: $gray-light;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 150px;
pointer-events: none;
}
}
.modifiers {
display: inline-block;
position: relative;
padding: 8px 20px;
}
.waiting-frame {
display: inline-block;
text-align: center;
position: absolute;
background-color: $gray-base;
opacity: 0.6;
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 194px;
border-radius: 6px;
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 50px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 247, 0, 0.2);
border-right: 1.1em solid rgba(255, 247, 0, 0.2);
border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
border-left: 1.1em solid $brand-primary;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}
I'm trying to build a SPA using AngularJS. However, I cannot get the routing working for the life of me. Basically I cannot get it to where when you click on one of the list items it routes the view to display different content.
I'm thinking that maybe one of the angularJS files is cancelling itself out or that I am messing up something in the directive.
index.html:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "assetView.html",
controller: "MainController"
})
.state("assetView", {
url: "/assetView",
templateUrl: "assetView.html",
controller: "MainController"
})
;
}
]);
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('MainController', function MainController($scope){
console.log("inside of MainController");
var vm = this;
$scope.selectedAsset = undefined;
$scope.startDate;
$scope.endDate;
// Current array for testing typeahead feature
// This needs to be an ajax call in the future to populate
// the asset array w/ all ticker symbols
$scope.asset = ['AAAP', 'AABA', 'AABA', 'AAME', 'AAOI',
'AAON', 'AAPL', 'AAWW', 'AAXJ', 'BMTC', 'BNCL',
'BNDX', 'BNFT', 'BNSO', 'CAKE', 'CALA', 'CALD', 'CALI',
'CALL', 'CALM', 'DWTR', 'DXGE', 'DXJS', 'ERII',
'ESBK', 'ESCA'];
/* Datepicker Functions */
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
startDate = getDate(this);
console.log("start date: " + startDate);
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
endDate = getDate(this);
console.log("end date: " + endDate);
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
/* End of Datepicker functions */
/* Chart Data */
var myChart = Highcharts.chart('highchartsContainer', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [1, 4, 4]
}, {
name: 'Sample2',
data: [5, 7, 3]
},{
name: 'Sample3',
data: [2, 3, 4]
}]
});
/* End Chart Data */
/* Highchart 2 */
var myChart2 =
Highcharts.chart('highchartsContainer2', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [3, 1, 1]
}, {
name: 'Sample2',
data: [9, 8, 2]
},{
name: 'Sample3',
data: [9, 2, 5]
}]
});
/* End Highchart 2 */
/* Highchart 3 */
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function (data) {
Highcharts.stockChart('highchartsContainer3', {
rangeSelector: {
selected: 1
},
title: {
text: 'GOOG Stock Price'
},
series: [{
name: 'GOOG Stock Price',
data: data,
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
/* End Highchart 3 */
});
/* Body Styling */
body {
background-image: url("images/background_image1.png");
}
/* End Body Styling */
/* help.html div */
#helpDiv{
height: 500px;
width: 500px;
background-color: red !important;
}
/* End help.html div */
/* Wrapper Styling */
.wrapper{
background-color: #FFFFFF;
box-shadow: 0px 30px 40px rgba(0,0,0,.5);
margin: 0 auto;
margin-top: 60px;
margin-bottom: 80px;
width: 1200px;
height: 1350px;
}
/* End Wrapper Styling */
/* Header Styling */
.header{
background-color: #66A8EA;
margin: 0 auto;
width: 1250px;
height: 100px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
left: 0;
right: 0;
}
.leftTriangle{
width: 0;
height: 0;
margin-top: 46px;
border-style: solid;
border-width: 0 25px 20px 0;
border-color: transparent #054e9c transparent transparent;
}
.rightTriangle{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 0;
border-color: #054e9c transparent transparent transparent;
margin-top: -20px;
margin-left: 1225px;
}
#stockImageSVG{
height: 65px;
width: 65px;
margin-left: 40px;
margin-top: 20px;
position: absolute;
}
#uncImageSVG{
margin-left: 150px;
margin-top: 10px;
height: 80px;
width: 300px;
position: absolute;
}
#searchBar{
margin-left: 760px;
margin-top: 20px;
width: 388px;
margin-right: 60px;
}
#searchBarButton{
margin-top: -1px;
}
/* Typeahead Dropdown Styling */
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #333333;
text-decoration: none;
background-color: #B9DDFA !important;
}
/* End Typeahead Dropdown Styling */
#dateRangeSelector{
position: absolute;
color: white;
margin-left: 760px;
margin-top: 60px;
}
#from, #to{
color: #5B5B5B;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: thin;
border-color: #D4D4D4;
font-family: Arial;
}
#toLabel{
margin-left: 26px;
}
/* End Header Styling */
/* Navbar Styling */
#custom-bootstrap-menu{
position: absolute;
margin-top: 140px;
margin-left: 30px;
margin-right: 30px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 12px;
background-color: rgba(230, 225, 225, 0.51);
border-width: 0px;
border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
width: 93px;
text-align: center;
color: rgba(119, 119, 119, 1);
background-color: rgba(247, 247, 247, 1);
margin: 0 auto;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(51, 51, 51, 1);
background-color: rgba(169, 207, 242, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(219, 219, 219, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #e6e1e1;
}
/* End Navbar Styling */
/* Data Table Styling */
#tableArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-top: 190px;
margin-left: 30px;
height: 500px;
width: 500px;
}
#tableContainer{
position: absolute;
margin-top: 10px;
margin-left: 40px;
width: 500px;
height: 480px;
background-color: #fff;
}
#dataTable2{
margin-top: 20px;
margin-left: 50px;
margin-right: 10px;
width: 400px;
background-color: #F9F9F9;
}
/* End Data Table Styling */
/* Chart Area Styling */
#chartArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-left: -10px;
margin-top: 190px;
height: 500px;
width: 621px;
}
#chartContainer{
background-color: #fff;
margin-top: 10px;
margin-left: 80px;
height: 480px;
width: 500px;
}
/* End Chart Area Styling */
/* customArea3 Styling */
#customArea3{
display: inline-grid;
height: 520px;
width: 555px;
margin-left: 30px;
margin-top: -10px;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 5px;
}
#customArea3Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 40px;
background-color: #fff;
}
/* End Custom Area 3 Styling */
/* customArea4 Styling */
#customArea4{
display: inline-grid;
position: relative;
margin-top: -10px;
height: 520px;
width: 561px;
margin-left: -5px;
background-color: #EBEBEB;
border-radius: 0px 0px 5px 0px;
}
#customArea4Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 20px;
background-color: #fff;
}
/* End Custom Area 4 Styling */
/* Highcharts Styling */
#highchartsContainer{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer2{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer3{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
/* End Highcharts Styling */
/* Print Button Styling */
#printButton{
position: absolute;
margin-top: 200px;
margin-left: 1150px;
}
#printButton:hover{
background-color: #99badd;
border-color: #fff !important;
}
/* End Print Button Styling */
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>c426</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<!-- Angular JS / Angular JS UI Router CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Style Sheets -->
<link rel="stylesheet" href="project.css">
<!-- Controllers -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/MainController.js" type="text/javascript"></script>
<!-- SweetAlert2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.all.min.js"></script>
<!-- Highcharts CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/adapters/standalone-framework.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- Favicon for Browser Tab -->
<link rel="shortcut icon" type="image/x-icon" href="images/uncIcon2.ico">
</head>
<body ng-controller="MainController">
<div class="header">
<img id="stockImageSVG" src="images/stock_bar_image.svg"/>
<a href="http://www.unc.edu/" target="_blank">
<img id="uncImageSVG" src="images/UNC_logo_white.png"/>
</a>
<div id="dateRangeSelector">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label id="toLabel" for="to">To</label>
<input type="text" id="to" name="to">
</div>
<div class="row">
<div class="col-lg-6">
<div id="searchBar" class="input-group">
<input type="text" class="form-control" placeholder="Search for asset..."
uib-typeahead="name for name in asset | filter:$viewValue | limitTo:8" class="form-control"
ng-model="selectedAsset"/>
<span class="input-group-btn">
<button id="searchBarButton" class="btn btn-default glyphicon glyphicon-search" type="button"></button>
</span>
</div>
</div>
</div>
<div class="leftTriangle"></div>
<div class="rightTriangle"></div>
</div>
<div class="wrapper">
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>GOOGL</li>
<li><a ui-sref="assetView">BIDU</a></li>
<li><a ui-sref="home">YNDX</a></li>
<li>AAPL</li>
<li>IBM</li>
<li>TWTR</li>
<li>VZ</li>
<li>WIFI</li>
<li>FB</li>
<li>IAC</li>
<li>GDDY</li>
<li>AOL</li>
</ul>
</div> <!-- Ends Custom Navbar -->
<button type="button" id="printButton" onclick="window.print();"
class="btn btn-default glyphicon glyphicon-print"
title="Print Page"></button>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<div id="assetView">
<div id="tableArea">
<div id="tableContainer">
<table id="dataTable2" class="table table-bordered">
<thead>
<tr>
<th>{{asset[0]}}</th>
<th>{{asset[11]}}</th>
<th>{{asset[17]}}</th>
<th>{{asset[20]}}</th>
<th>{{asset[25]}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>0.001</td>
<td>0.002</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>b</td>
<td>0.002</td>
<td>0.003</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>c</td>
<td>0.2</td>
<td>0.3</td>
<td>0.001</td>
<td>0.002</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="chartArea">
<div id="chartContainer">
<div id="highchartsContainer"></div>
</div>
</div>
<div id="customArea3">
<div id="customArea3Container">
<div id="highchartsContainer2"></div>
</div>
</div>
<div id="customArea4">
<div id="customArea4Container">
<div id="highchartsContainer3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
here is my code:
I Have no idea where the error should be. i just received this error.
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=studentfeedback&p1=….c%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.0%2Fangular.min.js%3A20%3A449)
I delete everything I added that day but i didn't change anything.
only if i fully cleared my html and angular the error is gone :p. so I have no clue where to find the error. I hope somebody can help me. thanks
(function(){
var app = angular.module('studentfeedback', ['ngAnimate']);
app.factory('Global', function(){
var user = {};
user.loggedin = false;
user.achternaam;
user.voornaam;
user.vakken = [];
user.periodecodes = [];
return user;
})
/*
app.service('sharedProperties', function () {
var loggedin = false;
return {
getloggedin: function () {
return loggedin;
},
setloggedin: function(value) {
loggedin = value;
}
};
});
*/
app.controller('LoginController', [ '$http', '$scope','$timeout', 'Global', function($http, $scope , $timeout, Global ){
this.panelToggle = true; //true= login / false = register
this.loggedin = Global.loggedin;
//console.log("user:0110495-12, pass:LV ");
this.checklogin = function(){
var logincontroller = this;
//studentid 0110495-12 initials LV
$http.jsonp("http://multimediatechnology.be/workload/stud.php?studentid="+ this.username+ "&initials="+ this.passwoord +"&callback=JSON_CALLBACK"
/* , {apikey:"test", params:{
studentid : $scope.username ,
initials : $scope.passwoord
}}*/
).success( function(data){
if (data.state == "Success") {
$(".formdiv").addClass("vanish");
$timeout(function(){ logincontroller.loggedin = true; Global.loggedin=true;}, 500).then( $("h2").addClass("slidein") );
$("body").addClass("whitebackground");
Global.achternaam = data.student.achternaam;
Global.voornaam = data.student.voornaam;
for(vak in data.courses){
for (code in Global.periodecodes ) {
if(data.courses[vak].periodecode == Global.periodecodes[code]){
Global.vakken.push(data.courses[vak]);
}
}
}
console.log(data.courses);
console.log(Global.vakken);
}else{
$(".loginform").addClass("shake");
$timeout(function(){ $(".loginform").removeClass("shake"); }, 500);
}
});
};
}]);
app.controller('TimeController', [ '$http', '$scope','$timeout', 'Global',function($http, $scope , $timeout , Global){
$scope.week;
$scope.date;
$scope.periodenaam = [];
$scope.periodecode = [];
$http.jsonp("http://multimediatechnology.be/workload/week.php?callback=JSON_CALLBACK").success( function(data){
//WEEK
$scope.week = data.weeknr;
console.log("week="+ $scope.week);
//DATUM
this.year = data.date.year;
this.month = data.date.month;
this.day = data.date.day;
if(this.month < 10){
this.month = "0"+this.month;
}
if(this.day < 10){
this.day = "0"+this.day;
}
$scope.date = this.year+"-"+this.month +"-"+this.day;
console.log("date="+ $scope.date);
});
$http.jsonp(" http://multimediatechnology.be/workload/periode.php?callback=JSON_CALLBACK").success( function(data){
for(periode in data.periods){
if( $scope.date > data.periods[periode].start.full && $scope.date < data.periods[periode].eind.full) {
Global.periodecodes.push(data.periods[periode].periodecode);
//$scope.periodenaam.push(data.periods[periode].periodenaam);
}else{
//not right period
}
}
console.log("alle periodecodes = "+ Global.periodecodes);
//console.log("alle periodenamen = "+ $scope.periodenaam);
});
}]);
app.controller('UserController', [ '$http', '$scope','$timeout', 'Global', '$rootElement',function($http, $scope , $timeout , Global, $rootElement){
this.data = Global;
this.savepunten = function(){
};
}])();
});
<!DOCTYPE html>
<html ng-app="studentfeedback">
<head>
<meta charset="utf-8">
<title>Student Feedback</title>
<link href='https://fonts.googleapis.com/css?family=Oxygen|Lobster|Nunito|Asap|Merriweather+Sans|Pacifico|Righteous|Comfortaa|Fredoka+One|Amaranth|Gloria+Hallelujah|Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body >
<div class="formdiv" ng-controller="LoginController as Login" ng-hide="Login.loggedin">
<img class="owl" src="img/ow2l.png" alt="owl" />
<img class="owl2" src="img/owl3.png" alt="owl" />
<form name="loginform" class="loginform" ng-submit="loginform.$valid && Login.checklogin()" novalidate>
<h1>Student Feedback</h1>
<div class="login" ng-show="Login.panelToggle" >
<a class="logintab active" href="" >Login</a>
<a class="registreertab " href="" ng-click="Login.panelToggle = !Login.panelToggle">Registreer</a>
<label for="username">Studenten nummer</label>
<input type="input" name="username" id="username" value="0110495-12" placeholder="0086868-53" ng-model="Login.username" required>
<label for="passwoord">initialen</label>
<input type="input" name="passwoord" id="passwoord" placeholder="BD" ng-model="Login.passwoord" required>
Passwoord vergeten?
<input class="loginbutton" type="submit" name="login" class="preload" value="Login" >
</div>
<div class="register" ng-show="!Login.panelToggle">
<a class="logintab2" href="" ng-click="Login.panelToggle = !Login.panelToggle" >Login</a>
<a class="registreertab2 active" href="">Registreer</a>
<label for="studentennummer">Studentennummer</label>
<input type="input" name="studentennummer" id="studentennummer">
<label for="kdgmail">kdgmail</label>
<input type="input" name="kdgmail" id="kdgmail">
<label for="username">gebruikersnaam</label>
<input type="input" name="username" id="username">
<label for="password">passwoord</label>
<input type="password" name="password" id="password">
<input type="submit" name="registreer" class="preload" value="Registreer">
</div>
</form>
</div>
.
<div class="studentpanel" ng-controller="UserController as User" ng-show="User.data.loggedin">
<header class="clearfix">
<h2 class="s">{{User.data.voornaam +" "+ User.data.achternaam}} </h2>
<div class="weekdiv" ng-controller="TimeController as Time">
<div class="activeweek">
<h4 >WEEK {{week}}</h4>
</div>
</div>
</header>
<div class="vakkendiv clearfix">
<form method="post" ng-submit="Login.savepunten()" >
<div class="vakken" ng-repeat="vak in User.data.vakken" >
<p>{{vak.vaknaam}}</p>
<input class="punt" type="text">
<img class="underline" src="img/underline.png" alt="underline">
</div>
<input type="submit" name="oplsaan" value="Opslaan">
</form>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-animate.min.js"></script>
<script type="text/javascript" src="js/jquery.spriteOnHover-0.2.5.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="style.js"></script>
</body>
</html>
There is a problem in your javascript file
var app = angular.module('studentfeedback', ['ngAnimate']);
app.factory('Global', function(){
var user = {};
user.loggedin = false;
user.achternaam;
user.voornaam;
user.vakken = [];
user.periodecodes = [];
return user;
})
/*
app.service('sharedProperties', function () {
var loggedin = false;
return {
getloggedin: function () {
return loggedin;
},
setloggedin: function(value) {
loggedin = value;
}
};
});
*/
app.controller('LoginController', [ '$http', '$scope','$timeout', 'Global', function($http, $scope , $timeout, Global ){
this.panelToggle = true; //true= login / false = register
this.loggedin = Global.loggedin;
//console.log("user:0110495-12, pass:LV ");
this.checklogin = function(){
var logincontroller = this;
//studentid 0110495-12 initials LV
$http.jsonp("http://multimediatechnology.be/workload/stud.php?studentid="+ this.username+ "&initials="+ this.passwoord +"&callback=JSON_CALLBACK"
/* , {apikey:"test", params:{
studentid : $scope.username ,
initials : $scope.passwoord
}}*/
).success( function(data){
if (data.state == "Success") {
$(".formdiv").addClass("vanish");
$timeout(function(){ logincontroller.loggedin = true; Global.loggedin=true;}, 500).then( $("h2").addClass("slidein") );
$("body").addClass("whitebackground");
Global.achternaam = data.student.achternaam;
Global.voornaam = data.student.voornaam;
for(vak in data.courses){
for (code in Global.periodecodes ) {
if(data.courses[vak].periodecode == Global.periodecodes[code]){
Global.vakken.push(data.courses[vak]);
}
}
}
console.log(data.courses);
console.log(Global.vakken);
}else{
$(".loginform").addClass("shake");
$timeout(function(){ $(".loginform").removeClass("shake"); }, 500);
}
});
};
}]);
app.controller('TimeController', [ '$http', '$scope','$timeout', 'Global',function($http, $scope , $timeout , Global){
$scope.week;
$scope.date;
$scope.periodenaam = [];
$scope.periodecode = [];
$http.jsonp("http://multimediatechnology.be/workload/week.php?callback=JSON_CALLBACK").success( function(data){
//WEEK
$scope.week = data.weeknr;
console.log("week="+ $scope.week);
//DATUM
this.year = data.date.year;
this.month = data.date.month;
this.day = data.date.day;
if(this.month < 10){
this.month = "0"+this.month;
}
if(this.day < 10){
this.day = "0"+this.day;
}
$scope.date = this.year+"-"+this.month +"-"+this.day;
console.log("date="+ $scope.date);
});
$http.jsonp(" http://multimediatechnology.be/workload/periode.php?callback=JSON_CALLBACK").success( function(data){
for(periode in data.periods){
if( $scope.date > data.periods[periode].start.full && $scope.date < data.periods[periode].eind.full) {
Global.periodecodes.push(data.periods[periode].periodecode);
//$scope.periodenaam.push(data.periods[periode].periodenaam);
}else{
//not right period
}
}
console.log("alle periodecodes = "+ Global.periodecodes);
//console.log("alle periodenamen = "+ $scope.periodenaam);
});
}]);
app.controller('UserController', [ '$http', '$scope','$timeout', 'Global', '$rootElement',function($http, $scope , $timeout , Global, $rootElement){
this.data = Global;
this.savepunten = function(){
};
}]);
body{
background-color:#d8d8d8 ;
font-family: 'Merriweather Sans', sans-serif;
margin: 0px;
animation-duration: 3s;
animation-fill-mode: both;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ease{
-webkit-transition: all 2s ease ; /* property duration timing-function delay */
-moz-transition: all 2s ease ;
-o-transition: all 2s ease ;
transition: all 2s ease ;
}
.preload{
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
.loginform{
background-color: rgb(49, 49, 49);
box-shadow: 0 10px 15px 10px rgba(0,0,0,0.2);
margin-left: auto;
margin-right: auto;
margin-top: 10%;
width: 400px;
display: block;
overflow: auto;
animation-duration: 0.5s;
animation-fill-mode: both;
}
.formdiv{
margin-left: auto;
margin-right: auto;
margin-top: 10%;
width: 400px;
display: block;
animation-duration: 0.5s;
animation-fill-mode: both;
}
h1{
margin: 20px;
text-align: center;
font-family: 'Nunito', sans-serif;
color: white;
}
.registreertab, .logintab , .logintab2 , .registreertab2{
border: none;
background-color: rgb(42, 42, 42);
width: 50%;
float: left;
font-size: 18px;
color: white;
text-decoration: none;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 30px;
border-bottom: 1px solid white;
border-top: 1px solid white;
box-shadow: inset 0 0 0 0 white;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.active{
color: rgb(49, 49, 49);
background-color: white;
box-shadow: inset 0 0 0 0 rgb(42, 42, 42);
}
.loginhover {
box-shadow: inset 200px 0px 0px 0px rgb(42, 42, 42);
color: white;
}
.registreerhover{
box-shadow: inset 200px 0px 0px 0px white;
color: rgb(49, 49, 49);
}
.loginhover2 {
box-shadow: inset -200px 0px 0px 0px rgb(42, 42, 42);
color: white;
}
.registreerhover2{
box-shadow: inset -200px 0px 0px 0px white;
color: rgb(49, 49, 49);
}
label{
margin-left: 10%;
color: white;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}
input{
margin-left: 10%;
margin-top: 10px;
margin-bottom: 20px;
display: block;
transition: border 0.4s;
border: none;
}
input:not(:last-child){
width: 80%;
height: 30px;
font-size: 18px;
border-radius: 2px;
box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
}
.loginbutton{
margin-right: 10%;
background-color: green;
border-radius: 30px;
color: white;
float: right;
padding: 8px;
padding-left: 30px;
padding-right: 30px;
font-weight: 700;
font-size: 15px;
outline: none;
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */
-webkit-transition: background-color 0.5s ease, color 0.5s ease ;
-moz-transition: background-color 0.5s ease, color 0.5s ease;
-ms-transition: background-color 0.5s ease, color 0.5s ease;
-o-transition: background-color 0.5s ease, color 0.5s ease;
transition: background-color 0.5s ease, color 0.5s ease;
}
.loginbutton:hover{
background-color: rgb(165, 255, 165);
color: green;
}
input.ng-invalid{
outline-color: #FA787E;
border: 1px solid #FA787E;
}
input.ng-valid{
outline-color: #78FA89;
border: 1px solid #78FA89;
}
.passlink{
display: inline-block;;
font-size: 13px;
margin-top: 15px;
margin-left: 10%;
color: white;
}
.owl{
position: absolute;
z-index: -1;
margin-left: 240px;
width: 150px;
animation-name: OwlSearchingForYou;
animation-duration: 30s;
animation-iteration-count: infinite;
}
.owl2{
position: absolute;
float: right;
margin-top: 10%;
z-index: -1;
width: 150px;
animation-name: OwlSearchingForYou2;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes OwlSearchingForYou {
0%,35%, 53% {transform: translateX(0);}
40%, 50%{transform: translateX(130px);}
}
#keyframes OwlSearchingForYou2 {
0%,82%, 100% {transform: translateX(0);}
87%, 97%{transform: translateX(-110px);}
}
#keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 50%, 90% {transform: translateX(-10px);}
30%, 70% {transform: translateX(10px);}
}
.shake {
-webkit-transform: translate3d(0,0,0);
animation-name: shake;
}
#keyframes vanish {
0% {transform: scale(1); opacity: 1;}
100% {transform: scale(1.15); opacity: 0;}
}
.vanish {
-webkit-transform: translate3d(0,0,0);
animation-name: vanish;
}
/*USER INTERFACE*/
h2 {
color: white;
font-size: 2vw;
margin: 0px;
display: inline;
margin-top: 5%;
margin-bottom: 5%;
padding-top: 2%;
float: left;
height: 130px;
width: 50%;
text-align: center;
animation-duration: 2s;
animation-fill-mode: both;
background-image: url(img/paperstroke3.png);
background-repeat: no-repeat;
background-size: 100%;
}
#keyframes slidein {
0% {transform: translateX(-100%); }
100% {transform: translateX(0px); }
}
.slidein {
-webkit-transform: translate3d(0,0,0);
animation-name: slidein;
}
#keyframes whitebackground {
0% { background-image:url(img/flatcolor.jpg) ;}
100% {background-image:url(img/table.jpg);}
}
.whitebackground {
animation-name: whitebackground;
}
.weekdiv{
float: right;
width: 50%;;
}
h3, h4{
font-family: 'Special Elite', cursive;
margin: 0px;
text-align: center;
display: block;
margin-right: 2%;
}
h4, .activeweek a{
display: inline-block;
vertical-align: top;
}
h4{
font-size: 4vw;
padding-top: 10%;
padding-bottom: 10%;
width: 18vw;
}
.activeweek{
height: 10vw;
font-size: 4vw;
margin-bottom: 50px;
background-image: url(img/week.png);
background-size: 100%;
background-repeat: no-repeat;
}
#prevweek{
width: 24.1666666666%;
float: left;
display: inline-block;
height: 83.854166666666%;
background: url(img/spritesheetprevweek.png) ;
background-size: 1500%;
}
.vakkendiv{
margin-top: 200px;
width: 80%;
margin: auto;
}
.vakken{
float: left;
display: inline-block;
height: 200px;
width: 200px;
background-image: url(img/yellow-sticky-note.png);
background-size: cover;
margin-right: 20px;
margin-bottom: 20px;
-webkit-transition: all 1s ease ;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.vakken.ng-enter{
opacity: 0;
-webkit-transition:0.5s linear all;
transition:0.5s linear all
}
.vakken.ng-enter-stagger{
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit- transition-duration: 0s;
-moz- transition-duration: 0s;
-ms- transition-duration: 0s;
-o- transition-duration: 0s;
transition-duration: 0s;
}
.vakken.ng-enter-active{
opacity: 1;
}
.vakken p {
text-align: center;
height: 25%;
}
input.punt{
margin: auto;
height: 45%;
width: 85%;
margin-left: 5%;
text-align: center;
font-size: 45px;
outline: none;
box-shadow: none;
font-family: 'Gloria Hallelujah', cursive;
background-color: rgba(255, 255, 255, 0);
}
.underline{
width: 70%;
opacity: 0.8;
vertical-align: top;
margin-left: 15%;
}
/*CLEARFIX*/
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<!DOCTYPE html>
<html ng-app="studentfeedback">
<head>
<meta charset="utf-8">
<title>Student Feedback</title>
<link href='https://fonts.googleapis.com/css?family=Oxygen|Lobster|Nunito|Asap|Merriweather+Sans|Pacifico|Righteous|Comfortaa|Fredoka+One|Amaranth|Gloria+Hallelujah|Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body >
<div class="formdiv" ng-controller="LoginController as Login" ng-hide="Login.loggedin">
<img class="owl" src="img/ow2l.png" alt="owl" />
<img class="owl2" src="img/owl3.png" alt="owl" />
<form name="loginform" class="loginform" ng-submit="loginform.$valid && Login.checklogin()" novalidate>
<h1>Student Feedback</h1>
<div class="login" ng-show="Login.panelToggle" >
<a class="logintab active" href="" >Login</a>
<a class="registreertab " href="" ng-click="Login.panelToggle = !Login.panelToggle">Registreer</a>
<label for="username">Studenten nummer</label>
<input type="input" name="username" id="username" value="0110495-12" placeholder="0086868-53" ng-model="Login.username" required>
<label for="passwoord">initialen</label>
<input type="input" name="passwoord" id="passwoord" placeholder="BD" ng-model="Login.passwoord" required>
Passwoord vergeten?
<input class="loginbutton" type="submit" name="login" class="preload" value="Login" >
</div>
<div class="register" ng-show="!Login.panelToggle">
<a class="logintab2" href="" ng-click="Login.panelToggle = !Login.panelToggle" >Login</a>
<a class="registreertab2 active" href="">Registreer</a>
<label for="studentennummer">Studentennummer</label>
<input type="input" name="studentennummer" id="studentennummer">
<label for="kdgmail">kdgmail</label>
<input type="input" name="kdgmail" id="kdgmail">
<label for="username">gebruikersnaam</label>
<input type="input" name="username" id="username">
<label for="password">passwoord</label>
<input type="password" name="password" id="password">
<input type="submit" name="registreer" class="preload" value="Registreer">
</div>
</form>
</div>
.
<div class="studentpanel" ng-controller="UserController as User" ng-show="User.data.loggedin">
<header class="clearfix">
<h2 class="s">{{User.data.voornaam +" "+ User.data.achternaam}} </h2>
<div class="weekdiv" ng-controller="TimeController as Time">
<div class="activeweek">
<h4 >WEEK {{week}}</h4>
</div>
</div>
</header>
<div class="vakkendiv clearfix">
<form method="post" ng-submit="Login.savepunten()" >
<div class="vakken" ng-repeat="vak in User.data.vakken" >
<p>{{vak.vaknaam}}</p>
<input class="punt" type="text">
<img class="underline" src="img/underline.png" alt="underline">
</div>
<input type="submit" name="oplsaan" value="Opslaan">
</form>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-animate.min.js"></script>
<script type="text/javascript" src="js/jquery.spriteOnHover-0.2.5.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="style.js"></script>
</body>
</html>
I think there's and issue with }])(); in the javascript file
I wasn't able to find helpfull answer to the following problem.
Angular $resource POST/PUT (both) generate 405.0 - Method Not Allowed error on a simple WebAPI calls. Get works just fine. App is an MVC with WebAPI running in IIS 7.5. When I try to run a sample locally - works fine. It's not a CORS issue and Auth was stripped out.
PUT http://portal.local.com/api/products/5 405 (Method Not Allowed)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IIS 7.5 Detailed Error - 405.0 - Method Not Allowed</title>
<style type="text/css">
<!-- body {
margin: 0;
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #CBE1EF;
}
code {
margin: 0;
color: #006600;
font-size: 1.1em;
font-weight: bold;
}
.config_source code {
font-size: .8em;
color: #000000;
}
pre {
margin: 0;
font-size: 1.4em;
word-wrap: break-word;
}
ul,
ol {
margin: 10px 0 10px 40px;
}
ul.first,
ol.first {
margin-top: 5px;
}
fieldset {
padding: 0 15px 10px 15px;
}
.summary-container fieldset {
padding-bottom: 5px;
margin-top: 4px;
}
legend.no-expand-all {
padding: 2px 15px 4px 10px;
margin: 0 0 0 -12px;
}
legend {
color: #333333;
padding: 4px 15px 4px 10px;
margin: 4px 0 8px -12px;
_margin-top: 0px;
border-top: 1px solid #EDEDED;
border-left: 1px solid #EDEDED;
border-right: 1px solid #969696;
border-bottom: 1px solid #969696;
background: #E7ECF0;
font-weight: bold;
font-size: 1em;
}
a:link,
a:visited {
color: #007EFF;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
h1 {
font-size: 2.4em;
margin: 0;
color: #FFF;
}
h2 {
font-size: 1.7em;
margin: 0;
color: #CC0000;
}
h3 {
font-size: 1.4em;
margin: 10px 0 0 0;
color: #CC0000;
}
h4 {
font-size: 1.2em;
margin: 10px 0 5px 0;
}
#header {
width: 96%;
margin: 0 0 0 0;
padding: 6px 2% 6px 2%;
font-family: "trebuchet MS", Verdana, sans-serif;
color: #FFF;
background-color: #5C87B2;
}
#content {
margin: 0 0 0 2%;
position: relative;
}
.summary-container,
.content-container {
background: #FFF;
width: 96%;
margin-top: 8px;
padding: 10px;
position: relative;
}
.config_source {
background: #fff5c4;
}
.content-container p {
margin: 0 0 10px 0;
}
#details-left {
width: 35%;
float: left;
margin-right: 2%;
}
#details-right {
width: 63%;
float: left;
overflow: hidden;
}
#server_version {
width: 96%;
_height: 1px;
min-height: 1px;
margin: 0 0 5px 0;
padding: 11px 2% 8px 2%;
color: #FFFFFF;
background-color: #5A7FA5;
border-bottom: 1px solid #C1CFDD;
border-top: 1px solid #4A6C8E;
font-weight: normal;
font-size: 1em;
color: #FFF;
text-align: right;
}
#server_version p {
margin: 5px 0;
}
table {
margin: 4px 0 4px 0;
width: 100%;
border: none;
}
td,
th {
vertical-align: top;
padding: 3px 0;
text-align: left;
font-weight: bold;
border: none;
}
th {
width: 30%;
text-align: right;
padding-right: 2%;
font-weight: normal;
}
thead th {
background-color: #ebebeb;
width: 25%;
}
#details-right th {
width: 20%;
}
table tr.alt td,
table tr.alt th {
background-color: #ebebeb;
}
.highlight-code {
color: #CC0000;
font-weight: bold;
font-style: italic;
}
.clear {
clear: both;
}
.preferred {
padding: 0 5px 2px 5px;
font-weight: normal;
background: #006633;
color: #FFF;
font-size: .8em;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>Server Error in Application "LITE_PORTAL"</h1>
</div>
<div id="server_version">
<p>Internet Information Services 7.5</p>
</div>
<div id="content">
<div class="content-container">
<fieldset>
<legend>Error Summary</legend>
<h2>HTTP Error 405.0 - Method Not Allowed</h2>
<h3>The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.</h3>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Detailed Error Information</legend>
<div id="details-left">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Module</th>
<td>WebDAVModule</td>
</tr>
<tr>
<th>Notification</th>
<td>MapRequestHandler</td>
</tr>
<tr class="alt">
<th>Handler</th>
<td>WebDAV</td>
</tr>
<tr>
<th>Error Code</th>
<td>0x00000000</td>
</tr>
</table>
</div>
<div id="details-right">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Requested URL</th>
<td>http://portal.local.com:80/api/products/5</td>
</tr>
<tr>
<th>Physical Path</th>
<td>C:\_Dev\Applications\liteangular_portal\LiteAngular\api\products\5</td>
</tr>
<tr class="alt">
<th>Logon Method</th>
<td>Anonymous</td>
</tr>
<tr>
<th>Logon User</th>
<td>Anonymous</td>
</tr>
</table>
<div class="clear"></div>
</div>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Most likely causes:</legend>
<ul>
<li>The request sent to the Web server used an HTTP verb that is not allowed by the module configured to handle the request.</li>
<li>A request was sent to the server that contained an invalid HTTP verb.</li>
<li>The request is for static content and contains an HTTP verb other than GET or HEAD.</li>
<li>A request was sent to a virtual directory using the HTTP verb POST and the default document is a static file that does not support HTTP verbs other than GET or HEAD.</li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Things you can try:</legend>
<ul>
<li>Verify the list of verbs enabled for the module handler this request was sent to, and ensure that this verb should be allowed for the Web site.</li>
<li>Check the IIS log file to see which verb is not allowed for the request.</li>
<li>Create a tracing rule to track failed requests for this HTTP status code. For more information about creating a tracing rule for failed requests, click here.</li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Links and More Information</legend>
This error means that the request sent to the Web server contained an HTTP verb that is not allowed by the configured module handler for the request.
<p>View more information »
</p>
</fieldset>
</div>
</div>
</body>
</html>
I can make ajax calls to this api methods, so they should be fine. I've tried adding/removing Http ResponseType attributes to them all to no luck. Can some web/angular guru shed some light on this problem? Is it something in IIS? I found this: https://support.microsoft.com/en-us/kb/942051 and this http://www.c-sharpcorner.com/Blogs/47627/wepapi-http-error-405-0-method-not-allowed.aspx
But messing with the IIS apphost config seems hackish. And I'm not familiar enough with it to make educated decision.
EDIT: My config:
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept, Authorization" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Allow-Methods" value="POST,GET,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Max-Age" value="1728000" />
</customHeaders>
Thanks in advance!
P.S. It looks like the problem has to do with WebDAVModule:
Notification MapRequestHandler
Handler WebDAV
Error Code 0x0000000
Anyone knows what it might be, though? Anyone?...
It turned out removing WebDAV handler and WebDAVModule took care of the problem:
<handlers>
<remove name="WebDAV" />
</handlers>
<modules runAllManagedModulesForAllRequests="true">
<remove name="WebDAVModule" />
</modules>
I have custom checkboxes, and the content is jumping when I click between checked and unchecked states. How can I stop this from happening? Here's my code:
CSS:
input[type=checkbox] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 15px;
color: red;
text-align: center;
line-height: 15px;
}
HTML:
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
Thank you in advance!
It's no problem to correct the jumping. See the below code:
input[type=checkbox] {
display: none;
}
label {
font-size: 15px;
vertical-align: top;
}
label:before {
content: "\2713";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
input[type=checkbox]:checked + label:before {
color: red;
}
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
However, I wouldn't recommend you to continue with this solution, because it's seems to be impossible to make a correct vertical alignment of the elements here. For example, instead of label with 'before' you could realize it by an outside div with display:table property and three inside element with display:table-cell. At least you will have a full control on elements' placement not dependent on font size.