I am trying to show a View using ng-view, but it's not working as it should be.
Trips.cshtml:
#section Scripts{
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-route/angular-route.min.js"></script>
<script src="~/js/simpleControls.js"></script>
<script src="~/js/app-trips.js"></script>
<script src="~/js/tripsController.js"></script>
<script src="~/js/site.js"></script>
}
<div class="row" ng-app="app-trips">
<div ng-view></div>
App-trips.js:
(function () {
"use strict";
angular.module("app-trips", ["simpleControls", "ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/", {
controller: "tripsController",
controllerAs: "vm",
templateUrl:" /views/tripsView.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
})();
And I am trying to show a view tripsView.html that is in /wwwroot/views.
bower.json:
"angular" : "~1.6.5",
"angular-route" : "~1.6.5",
"jquery": "2.2.0",
"bootstrap" : "3.3.7"
tripsView.html:
<p>hello world </p>
I get an error using a diferent non connected script:
$(function (){
########## not connected stuff
})();
error: "is not a function", could this be connected? Even thought the script is working fine.
Related
I have the following polymer element (with many lines of import for paper elements and firebase-auth removed) that I'd like to test using Web Component Tester.
<dom-module id="my-login">
<template>
<firebase-auth id="auth" app-name="myapp" provider="email"></firebase-auth>
<paper-input id="email" label="Enter Email"></paper-input>
<paper-input id="password" label="Enter password" type="password"></paper-input>
<paper-button id="signin" on-tap="_signIn" raised primary>Login</paper-button>
<paper-button id="signup" on-tap="_register" secondary>Register</paper-button>
</template>
<script>
Polymer({
is: 'my-login',
ready: function () {
this.$.email.value = "xxxxxxxxxxxxxxx";
this.$.password.value = "zzzzzzzzzzz";
},
_signIn: function () {
const email = this.$.email.value;
const passw = this.$.password.value;
const sgn = this.$.auth;
sgn.signInWithEmailAndPassword(email, passw) // *** ERRROR HERE ***
.then(response => {
});
}
});
</script>
</dom-module>
using the following test suite (lots of irrelevant details removed):
<!doctype html>
<html lang="en">
<head>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="../src/my-login.html">
</head>
<body>
<test-fixture id="login">
<template>
<my-login></my-login>
</template>
</test-fixture>
<script>
suite('LOGIN', function () {
var el, loginBtn;
setup(function () {
el = fixture("login");
loginBtn = el.$$('#signin');
});
test('user login', done => {
loginBtn.click();
flush(_ => {
done();
});
});
});
</script>
</body>
</html>
but the test failed with the following error:
Error: Cannot read property 'signInWithEmailAndPassword' of undefined
HTMLElement.signInWithEmailAndPassword at /bower_components/polymerfire/firebase-auth.html:211
HTMLElement._signIn at /src/my-login.html:20
I noticed that the error says
Cannot read property signInWithEmailAndPassword of undefined
instead of
Cannot read property signInWithEmailAndPassword of null
The code snippet shows no <link rel="import" ...> but in my code I do have those lines included and other test cases for <paper-input> and <paper-button> are passing.
What did I do wrong?
I'm not sure if the following is the answer to my own question, but
after adding a stub that returns a Promise, the error disappeared and the above test is passing. However, I still did not figure out the cause of the undefined error above.
stub('firebase-auth', {
signInWithEmailAndPassword: function (e, p) {
return new Promise( (resolve, reject) => {
resolve("Yes");
});
}
});
I am following the example from the documentation on https://developers.google.com/vr/concepts/vrview-web. Here is my code:
<head>
<script src="vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
video: 'http://localhost/360/spa360injected.mp4',
is_stereo: true,
width:'640',
height:'480'
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
I get the error
vrview.min.js:1 GET http://localhost/index.html?video=http://localhost/360/spa360injected.mp4&is_stereo=true& 404 (Not Found)
This should be a plug and play example. What am I doing wrong?
(Warning: requirejs newbie) I'm trying to set my baseUrl for require.config but I'm getting an error on a very very simple setup. I've tried many different combos with slashes but no luck.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Requirejs way</title>
<meta charset="utf-8" />
</head>
<body>
<h1><span id="foo">Hello World</span></h1>
<input id="Button1" type="button" value="button" />
<script data-main="common" src="Scripts/require.js"></script>
<script type="text/javascript">
require(['common'], function () {
//Load up this page's script, once the 'common' script has loaded
require(['home']);
});
</script>
</body>
</html>
common.js
/*
The first JS file to be loaded. Takes care of setting up all the required paths.
*/
// Configure RequireJS
requirejs.config({
baseUrl: "Scripts",
paths: {
jquery: [
//If the CDN fails, load it from the following
'jquery-3.1.1'
]
}
});
require(['home'], function (Methods) {
Methods.doSomething();
})
home.js
define(['jquery'], function ($) {
$('#Button1').on("click", function () {
$('#foo').text('[changed by jQuery]');
});
var Methods = {
doSomething: function () {
alert('i just did something');
}
};
return Methods;
});
Resource for code Go
I can not understand why and what this error is there - du you know why?
Update: I am running this in an nginx docker container.
Error message:
Uncaught Error: Parse Error: Line 10: Unexpected token ILLEGAL
at http://x.x.x.x/scripts/example.js:10:undefined
enter code here... R OTHER DEALINGS IN THE SOFTW
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx;harmony=true" src="scripts/example.js"></script>
</body>
</html>
script/example.js
var Simple = React.createClass({
getInitialState: function(){
return { count: 0 };
},
handleMouseDown: function(){
alert('I was told: ' + this.props.message);
this.setState({ count: this.state.count + 1});
},
render: function(){
return <div>
<div className="clicker" onMouseDown={this.handleMouseDown}>
Give me the message!
</div>
<div className="message">Message conveyed
<span className="count">{this.state.count}</span> time(s)</div>
</div>
;
}
});
React.render(<Simple message="Keep it Simple"/>,
document.body);
I run in NGINX no problem, I doubt this is an issue, but you never know if it's somehow a JSX compiler issue. Can you try the below and see if it's the same result in your environment?
var Simple = React.createClass({
getInitialState: function(){
return { count: 0 };
},
handleMouseDown: function(){
alert('I was told: ' + this.props.message);
this.setState({ count: this.state.count + 1});
},
render: function(){
render (
<div>
<div className="clicker" onMouseDown={this.handleMouseDown}>
Give me the message!
</div>
<div className="message">Message conveyed
<span className="count">{this.state.count}</span> time(s)</div>
</div>
)
}
});
React.render(<Simple message="Keep it Simple"/>,
document.body);
Problem:
nginx was caching
Solution:
Set nginx.conf setting to "expires off;"
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});