I am not able to make my custom element appear.
This is the project structure:
.
This is the index.html file with my element :
<link rel="import" href="./../bower_components/polymer/polymer.html">
<link rel="import" href="./../bower_components/iron-input/iron-input.html">
<dom-module id="neito-sidebar">
<template>
<style></style>
<iron-input bind-value="{{mot}}">
<label for="test">Name : </label>
<input id="test" type="text" value="{{mot::input}}">
</iron-input>
<span>[[mot]]</span>
</template>
<script>
Polymer({is: 'neito-sidebar' });
</script>
</dom-module>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="import" href="./bower_components/polymer/polymer.html">
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./components/neito-sidebar.html">
<title>Polymer Element</title>
</head>
<body>
<neito-sidebar></neito-sidebar>
</body>
</html>
To open it I opened the local file with Firefox (file:///C:/...).
What am I doing wrong?
Okay guys, one of the answer is : You need to use a web server to use Polymer. You cannot access it with file:///C:/ ..., So I setup a quick nodejs Express Server just for the developpement of the element and it is working well now. Here is how I do it :
The project structure
The index.html that use my polymer custom elements :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./elements/neito-sidebar.html">
<title>Polymer Element</title>
</head>
<body>
<neito-sidebar></neito-sidebar>
</body>
</html>
The server app.js (really ultra simple) :
var express = require('express'),
path = require('path');
const _port = 3000;
var app = express();
app.use(express.static(path.join(__dirname, '/..', 'public')))
app.get('/', function (req, res){
res.sendFile('../public/index.html', {root: __dirname});
})
.listen(_port, function (){
console.log('Server listening on : '+_port);
})
And the component definition :
<!DOCTYPE html>
<link rel="import" href="./../bower_components/polymer/polymer.html">
<dom-module id="neito-sidebar">
<template>
<style>
span
{
padding: 5px;
border: 1px solid black;
}
</style>
<label for="test">Name : </label>
<input type="text" name="test" id="test">
<button onclick="_updateSpan">Valider</button>
<span>{{mot}}</span>
</template>
<script>
Polymer({
is: 'neito-sidebar',
properties:
{
mot:
{
type: String,
notify: true
}
},
_updateSpan: function()
{
this.mot = $('#test').val();
}
});
</script>
</dom-module>
For now the updateSpan doesnt work but the element is displayed :).
So here my auto-answer, have a good day
Related
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
I got this template from this site: After trying out some templates, they were ok. But trying out this bot template am getting a blank html return on this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
What could be the issue?
Regards
The template is working fine, the only issue here is that you need to remove following line
document.getElementById("hello-world").innerHTML = content;
I am not sure, why you have added this line. All the messages should be rendered via botui.message.add() method. BotUI will handle content insertion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
// document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
this is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="data:;base64,=">
<style>
</style>
</head>
<body>
<ul class="papa">
<li>input</li>
<li>output</li>
</ul>
<ng-view></ng-view>
<script>
var app1 = angular.module('myApp', ['ngRoute']);
app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/1_input', {
controller: 'input_control',
templateUrl: '/1_input.html'
})
.when('/2_output/:firstnamehh/:lastnamehh', {
controller: 'output_control',
templateUrl: '/2_output.html'
})
.otherwise({redirectTo:'/1_input'});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}]);
app1.controller('input_control',function($scope, $location){
//$scope.init_table = {name1:"", name2:""};
//$scope.score_card = [];
//
$scope.loadView2 = function(){
// $scope.score_card.push({
// name1: $scope.firstnamehh,
// name2: $scope.lastnamehh
// })
// console.log($scope.score_card);
$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.score_card;
//$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
//$location.path('/2_output/'+$scope.score_card);
}
});
app1.controller('output_control',function($scope, $routeParams){
$scope.name1=$routeParams.firstnamehh;
$scope.name2=$routeParams.lastnamehh;
//$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
//$scope.out_score=$routeParams.score_card;
//$scope.name3 = $routeParams[score_card];
});
</script>
</body>
</html>
this is the 1_input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1_input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
First name: <input type="text" ng-model="firstnamehh"/> <br/>
Last name: <input type="text" ng-model="lastnamehh"/> <br/>
<button ng-click="loadView2()">to output page</button>
</body>
</html>
this is the 2_output.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2_output</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
From View2.
<ul>
<li>{{name1}}</li>
<li>{{name2}}</li>
<!-- <tr ng-repeat="aa in score_card">
<td>{{aa.name1}}</td>
<td>{{aa.name2}}</td>
</tr> -->
</ul>
</body>
</html>
hello guys, i'm new to angularjs and looking for some help!. What I'm trying is, making firstnamehh and lastnamehh as a list and pass it to 2_output.html and finally print it out in a table. The part I'm struggling is what should i put after $routeParams and $location.path().
$routeParams.???
..
$location.path('/2_output/'+$scope.???);
any advice would be appreciated!! thank you for reading this question
You can achieve this by using service
app.factory('DataService', function() {
var appData = {}
function set(data) {
appData = data;
}
function get() {
return appData;
}
return {
set: set,
get: get
}
}
In your input_control you can set the data to the service :
DataService.set(shredData);
In your output_control get the data from ther service :
$scope.appdata = DataService.get();
Inject DataService in the controllers by passing it as a parameter
app.controller('input_control', ['DataService', function($scope, $location, DataService){
//Your logic
}]);
I have used paper-icon-button in my page in the following way:
<template is="dom-bind" id="t">
<paper-icon-button id="back" icon="arrow-back" style="display:{{displayArrow}}" alt="arrow-back" title="arrow-back" on-click="onBackPress"></paper-icon-button>
</template>
Now, I want Java script to change the display value to 'none' or 'block' on certain condition.
My java script is:
<script>
var template = document.querySelector('#t');
template.displayArrow='none';
</script>
This does not seem to work, as template.displayArrow is undefined. Please suggest
This is what my final code looks like:
<!doctype html>
<html>
<head>
<title>Test Home</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<style>
</style>
</head>
<body>
<template is="dom-bind" id="t">
<paper-toolbar id="header">
<paper-icon-button id="b" icon="arrow-back" style="display:{{displayArrow}}" alt="arrow-back" title="arrow-back" on-click="onBackPress"></paper-icon-button>
<h3>TestPage</h3>
</paper-toolbar>
</template>
<script>
var template = document.querySelector('#t');
template.displayArrow='none'
</script>
</body>
</html>
displayArrow is a variable.
Below snippet will work for you
/* To hide the element */
document.getElementById("back").style.display = "none";
/* To show the element */
document.getElementById("back").style.display = "block";