I'm trying to understand the Web Components, so I want to create a web component that would "wrap" a select tag into the select2.
Here's my main HTML:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select2-select>
</div>
</body>
</html>
And my custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"></link>
<polymer-element name="select2-select">
<template>
<select id="main">
<content></content>
</select>
</template>
<script>Polymer({});</script>
</polymer-element>
The problem is, the option tags aren't being inserted in the shadow DOM:
What am I doing wrong? I'm running Firefox on Ubuntu 14.04.2, if it's anyhow relevant.
Thank you very much.
Yeah that happens, the easiest way around it is to use attributes. I've amended your original script to make it work.
Main html:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select options='[
{"value":"1","text":"1"},
{"value":"2","text":"2"},
{"value":"3","text":"3"},
{"value":"4","text":"4"}
]'></select2-select>
</div>
</body>
</html>
custom element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="select2-select" attributes="options">
<template>
<select id="main">
<template repeat="{{option in options}}">
<option value={{option.value}}>{{option.text}}</option>
</template>
</select>
</template>
<script>
Polymer('select2-select', {
publish: {
options: {},
}
});
</script>
</polymer-element>
The first thing I can think of is that JQuery & Select2 are not accessible to the element because you have added them to the global scope. As per The Golden Standard Expressed Dependencies section Web Components should be responsible for their own dependencies.
The other thing to look at is that some HTML elements will only render inside other specific elements. For example - If I add option tags to div, they will not render unless they are wrapped in a select tag.
Related
I am working on CS50 Week8 problem set. In the following code, I have a dropdown list and a button, and the link embedded in the latter depends on the former. For some reason the button gets automatically clicked without being intended. Any idea why this is going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken">1. Interlaken</option>
<option value="hokkaido" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite(); return false">Confirm!</button>
<script>
var location = document.getElementById("location").value;
function gotosite(){
location.href(location + ".html");
}
</script>
</form>
</div>
</body>
</html>
You need the get the value of the select field when someone clicks on the Submit button not on loading the page so you should keep the value getting logic inside the function.
I have also updated the window.location.href thing, have a look.
This is working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite()">Confirm!</button>
<script>
function gotosite(){
window.location.href = document.getElementById("location").value;
}
</script>
</form>
</div>
</body>
</html>
The button is not being clicked.
<script>
var location = document.getElementById("location").value;
location is a predefined variable in the global scope. You can't redeclare it there. Your assignment is going straight to the existing global location.
Since that line of code is outside of any function, it executes immediately.
It indeed is what Quentin said.
You can fix it by using the code from the example above, or look at my example.
It is a little bit different.
The main difference is that I've placed the script just before the body closes.
And I did not use an onclick attribute on the button.
Instead I used an eventListener attached to your button. I prefer the eventListener as it does not nead to live inside the html.
You can simply create a js file scripts.js (<script src="scripts.js"></script>) and insert this code inside.
The advantage is that you only need to have this code once while you can have the same functionality on multiple pages.
Please note that I've also removed the <form> around the button. The reason for this is that you don't need it. You did add the type="button" which marks this button as simply a button instead of a form submit, so the form won't submit a GET request to itself, but as I've learned years ago; less is more.
Of course there is plenty more to tell and help you with, but I hope this gives you some insight in other ways to fix the same issue.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<button class="p1" type="button" >Confirm!</button>
</div>
<script>
document.querySelector('button').addEventListener('click', () => {
window.location.href = document.getElementById("location").value
});
</script>
</body>
</html>
I have a React JS file which renders the following:
React.render(
<TreeNode node={tree} />,
document.getElementById("tree")
);
I reference it from a HTML file in the following way:
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="app/listTree/treenode.css">
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
<script src="/listTree/TreeNode.js"></script>
</div>
</html>
However, the contents of the JS file are not displayed.
I don't have experience in working with JavaScript.
Why is this happening?
Your script is already selecting the tree div element. So, there is no need to put a script tag inside of the div tag.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
You are also missing the <head> and <body> html tags.
Further, if you want to render jsx in your React code, you need to add <script> tags for them as well (and type="text/jsx" as a tag attribute):
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
EDIT:
As a test to make sure your environment is working (and you don't just have a problem in your Component. Try to replace the code inside Treenode.js with this:
React.render(
<div>Testing...</div>,
document.getElementById("tree")
);
Then, you have no external dependencies. If you see Testing... rendered, you know that the environment is set up correctly.
Try to load your script after your div and not inside
<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>
You need to load React also
Here is how I get it working add the following script
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
and change the type to 'text/babel'
<script type="text/babel" src="script.js"></script>
and the external js file should be with
.jsx
extension
please see working example here
You should not place a slash before "listTree".
So your script tag should look like this:
<script src="listTree/TreeNode.js"></script>
It's my first time using polymer.And I wanted to import some external scripts, but it's not working...
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="geo-dropdown">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.rightClick.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="GeoDropdown.js"></script>
<template>
<!-- entry point (earth ID) -->
<fieldset style="display:none;">
<div id="earth" gid="6295630" class="id_6295630"></div>
</fieldset>
<div>
<select id="continent" name="continent"></select>
<select id="country" name="country"></select>
<select id="adm1" name="adm1"></select>
<select id="adm2" name="adm2"></select>
<select id="adm3" name="adm3"></select>
<select id="adm4" name="adm4"></select>
<select id="adm5" name="adm5"></select>
<input id="submitBtn" type="submit" value="Submit" onclick="getLocation();"></input>
</div>
</template>
<script>
Polymer({
is: "geo-dropdown"
});
</script>
</dom-module>
Can someone help me? I believe that I'm making a stupid error, but I can't find it.
Remove the type="text/javascript".
Best way would be to load the dependency from a different html through import and reuse it again when needed.
Checkout marked-element to handle the scope.
Very hard to guess what the problem is without being told the error, or at least the expected vs actual behaviour... but having said that, the old croney gazing into tea leaves in the corner of my office is murmuring something about putting <script type="text/javascript" src="GeoDropdown.js"></script> after the template tag as it refers to DOM elements that have not come into existence yet... no - she is whispering it wont work... and something about loading it dynamically from the ready property of the Polymer definition object instead... and now she has passed out. Hmph.
I'm trying to get started with Google's Polymer Paper Elements 1.0 by displaying a simple message dialog:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents.min.js"></script>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
The words "Dialog test" appear on the page, but there's no dialog. Does anyone know what I'm missing?
You are missing a reference to the paper-dialog element definition.
<html>
<head>
<title>Example</title>
<script src="path/to/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
Including the proper import (<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />) will allow the element to be recognized by the browser and provide the functionality you expect including behavior and style.
For an interactive tutorial on using web components you can check out the tutorial on component.kitchen.
I have a piece of code which works fine in Angular 1.2 without including Bootstrap, but when I use the selectpicker class of Bootstrap the data binding is not happening. Below is the piece of demo code.
<html ng-app>
<head>
<script src="assets/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrap-select.js"></script>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet" />
</head>
<body>
<div ng-controller='Contact'>
<select class="selectpicker" ng-model='selected_person' ng-options='person.name for person in people'>
<option value="">Choose option</option>
</select>
<br>
Selected name = {{selected_person.name}}
</div>
<br>
<script>
$('.selectpicker').selectpicker();
function Contact($scope){
$scope.people = [
{name:"Abc",number: 65},
{name:"Xyz",number: 75},
{name:"Pqr",number: 85}
];
}
</script>
</body>
</html>
You don't want to have have some jQuery in a file and some AngularJS in another file, usually. If jQuery creates elements etc, they probably won't be picked up by angular.
The correct solution is to use an Angular directive. Here, it looks like somebody made one for you.
angular-bootstrap-select
this is what i got for you, the question asked in stackoverflow the same answer I copied for you see here docs download here