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;"
Related
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.
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?
I am able to use the opencpu function ocpu.rpc. But not the function ocpu_r_fun_call. Why the above code does not work?
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.opencpu.org/opencpu-0.4.js"></script>
<script>
$(document).ready(function(){
$("#submitbutton").click(function(){
var req = ocpu.r_fun_call("mean", {"x" : 10}, function(session){
$("#namefield").val(session);
});
});
});
</script>
</head>
<body>
<input type="text" id="namefield" value="">
<button id="submitbutton" type="button">Submit!</button>
</body>
</html>
I also tried:
$("#submitbutton").click(function(){
var req = ocpu.r_fun_call("mean", {"x" : 10}, function(session){
session.getObject(function(data){
$("#namefield").val(data);
});
});
});
And I also tried with session.getConsole, and also:
var req = ocpu.r_fun_call("mean", {"x" : 10}, function(session){
$("#submitbutton").on("click", function(){
$("#namefield").val(session.getObject());
});
});
The main problems were:
the js function is ocpu.call, not ocpu.r_fun_call
the fact that the mean function does not belong to my package. If I put an average function in my package:
average <- mean
Then I can use it with opencpu like this:
<html>
<head>
<script src="opencpu/jquery-1.10.2.min.js"></script>
<script src="opencpu/opencpu-0.4.js"></script>
<script>
$(document).ready(function(){
$("#submitbutton").on("click", function(){
var req = ocpu.call("average", {
x : 10
}, function(session){
session.getObject(function(data){
$("#namefield").val(data)
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
});
});
});
</script>
</head>
<body>
<button id="submitbutton" type="button">Submit!</button>
<input type="text" id="namefield" value="">
</body>
</html>
Note the tip to know more when there's a problem:
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
});
In below ExamppleController function a value is entered into message variable local storage. For the first time value is getting stored but when entered again value is not getting stored. When browser cache is cleared then value is stored again and second time no value is getting stored.
Mystorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {
$scope.save = function() {
$rootScope.newq=$scope.name;
$scope.$apply();
**$localStorage.message = $scope.name;**
console.debug($localStorage.message);
$window.location.href = 'nextstorage.html';
}
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
{{data}}
</div>
</body>
</html>
NextStorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$window,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<span>{{data1}}</span>
</div>
</body>
</html>
You should really be doing things the AngularJS way. I think this is where the disconnect happens.
See the following code:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage", "ui.router"]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('1', {
url: '/1',
templateUrl: 'templates/1.html',
controller: 'FirstController'
})
.state('2', {
url: '/2',
templateUrl: 'templates/2.html',
controller: 'SecondController'
});
$urlRouterProvider.otherwise('/1');
});
example.controller("FirstController", function($scope,$localStorage,$location) {
$scope.save = function() {
$localStorage.message = $scope.name;
$location.path("/2");
}
});
example.controller("SecondController", function($scope,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ui-view></div>
<script id="templates/1.html" type="text/ng-template">
<div>
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
</div>
</script>
<script id="templates/2.html" type="text/ng-template">
<div>
<span>{{data1}}</span>
</div>
</script>
</body>
</html>
You'll notice I'm using routes and navigating between them using the $location provider. The $localStorage works fine when doing it this way.
Read up on the ui-router or ngRoute.
Regards,