Getting this error on every browser when trying to render a simple paragraph in React:
Uncaught Error: Invariant Violation: _registerComponent(...): Target
container is not a DOM element.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<div class="container">
<p>this should not be seen</p>
</div>
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script>
"use strict";
var BoxTile = React.createClass({
render: function () {
return React.createElement("p", null, "Imageine this is a tile...");
}
});
ReactDOM.render(React.createElement(BoxTile), document.getElementById('container'));
</script>
</body>
</html>
document.getElementById can not find the relevant node because container is a class attribute and not id.
Change
<div class="container">
<p>this should not be seen</p>
</div>
To
<div id="container">
<p>this should not be seen</p>
</div>
Related
I'm getting Error:
[$controller:ctrlreg] The controller with the name 'quizController' is not registered.
quizController.js:
angular.module("quizApp",[])
.controller("quizController", function($scope) {
$scope.message = "Hello World";
});
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="quizApp">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body ng-controller="quizController">
<!-- <h1>hello world please work!</h1> -->
{{message}}
<script src="src/libs.js"></script>
<script src="src/scripts.js"></script>
<script src="app.js"></script>
</body>
</html>
Change your index.html accordingly. Also, make sure that you have your imports sorted.
<div ng-app="quizApp">
<h1>Controllers</h1>
<div ng-controller="quizController">
<p>{{ message }}</p>
</div>
</div>
<script src="quizController.js"></script>
I'm trying clone this example in my source but not working. All external links is added.
My HTML source:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<script src="app.js"></script>
<div id="wrapper">
<div ng-controller="SignatureController">
<div>items length: {{items.length}}</div>
<img ng-src="{{hash}}" alt="signature image" />
<j-signature-directive sig="customSignature" save="testAction" bg-color="#00f" color="#ffcc00"></j-signature-directive>
</div>
<div id="tabs">
<div class="tCont result active" id="result"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
if (typeof (EmbedManager) === undefined) {
EmbedManager.loadResult();
}
}, false);
</script>
</div>
</div>
</body>
</html>
In app.js file is all from javascript from above link.
Be sure to place all your code in JS file inside
$(document).ready( function() { ... });
Should it be possible to select content from a child element in Polymer 1? Can't find anything about it in the docs, but this doesn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
<template>
<content select="#aaa"></content>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: "my-element"
});
});
</script>
</dom-module>
</head>
<body>
<my-element>
<div>
<div id="aaa">zzzzzzzzzzz</div>
</div>
</my-element>
</body>
</html>
No way !! everything were changed in Polymer 1.
This docs will help you a lot: Polymer Elements docs
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>
When I use sencha CMD (I have tried 4 and 5 with similar results), I get an error on loading app like:
Uncaught TypeError: Cannot read property 'setPath' of undefined
This error is referring to: Ext.Loader.setPath(), but also fires on Ext.application, and Ext.Loader.setConfig( if I re-order them.
There are no errors before or after this, it loads fine when loading without building, produces same results with production and development microloaders.
Any thoughts?
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script type="text/javascript">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onResume() {
}
</script>
</head>
<body onload="init()">
<img id='splashImage' src='resources/images/splash.png' />
<img id="splashLogo" src='resources/images/splashLogo.png' />
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>