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.
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 am very, very new to html, but I am trying to try out a widget made by NCBO BioPortal. The widget is a javascript file that allows the admin to restrict a form field to certain terms pulled from an external vocabulary. Thanks for any insight you can give as to why it isn't working!
Here's the link for the widget: http://bioportal.bioontology.org/javascripts/widgets/form_complete.js
Here's what it's supposed to do:
-Look-ahead so that you don't need to type the whole term
-Controlled vocabulary provides consistency of the way different users use the term
Here's my HTML, written by following the guidelines on this page:
https://www.bioontology.org/wiki/index.php/NCBO_Widgets#Term-selection_field_on_a_form
<html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>
<meta charset="utf-8">
<title> NCBO Widget tester </title>
</head>
<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>
<form action="/action_page.php">
Term tagger:<br>
<input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I'm not sure but looks like your script is running before page is loaded.
You need to put your script bellow your html code in body or add defer to your <script> tag.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js " defer></script>
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.
I'm asking you because I'm stuck on something stupid I can't find out ...
I started using phonegap a couple days ago and I was progressing quite well but this morning, my index.html doesn't care my js/index.js anymore !
I have a button that is supposed to fire an alert but when I click the button, nothing happens at all.
I understand I must have moved something wrong but could you please have a look ?
I tried to remove as many useless info as I could.
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.mobile-1.1.0.js"></script>
<script src="jquery.url.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/AndroidHoloDarkLight.min.css" />
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>My Test App</h1>
</div>
<input type="button" name="goBack" id="goBack" onclick="goBack" value="Go Back to the previous View">
</div>
</body>
</html>
And here is the .js :
function goBack()
{
alert("test ...");
}
/*$("#bodyPage").ready(function(){
$.mobile.allowCrossDomainPages = true;
$("#page").bind("pageshow", function(event){
var url = $.url(document.location);
var arg1 = url.param("arg1");
$("#testP").text(arg1);
});
}
I'm learning by myself so I may have misunderstood something but could you please help enlightening me ?
Thanks a lot for your time.
Even though you've all been pretty useful in helping me getting better in javascript, the problem was much stupider...
In the .js file, I commented code with /* but I didn't use the */ because I thought it didn't matter much since I comment until the end. But I was wrong and I finaly found it thanks to everybody's help.
Have a nice day and thanks
in yout input tag try onclick="javascript:goBack();"
Try changing:
<input type="button" name="goBack" id="goBack" onclick="goBack" value="Go Back to the previous View">
in:
<input type="button" name="goBack" id="goBack" onclick="goBack()" value="Go Back to the previous View">
Update: There is something wrong in the file structure.
Advice: Do not use jQuery Mobile in mobile applications. Try more lightweight frameworks instead.
You habve included jquery two time:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery-1.7.2.js"></script>
I was actually trying to find some tutorials on Handlebar.js & I found this http://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial
But it is not actually working as expected.
What I am doing is I have an index.html file,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Messing with Handlebars</title>
</head>
<body>
<script id="ajax-comment" type="text/x-handlebars-template">
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
</script>
</body>
</html>
and an app.js which contains the code.
var source = $("#ajax-comment").html();
var template = Handlebars.compile(source);
var data = {
name : "Jack",
date : "12/04/12",
comment : "This is a really awesome tutorial. Thanks."
};
$("ul").append(template(data));
But all I am getting is a blank page. Any mistake I am making here? Detailed explanations would be helpful.
"ul" element doesn't exist, you must append it to something which actually exists.
just add a <ul></ul> somewhere in the body.
fiddle here
You might want to check the answer to this question
Seems like the jquery function was not able to access the element since the DOM wasnt loaded before the call was made. I tried some more combinations after the initial changes of calling the app.js code(without wrapping it inside a function) only after the DOM was loaded which worked.
For example I moved the script call just before the </body> which worked too.
... <script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
It also helped me to know whether we use HTML or XHTML as our document type, to understand this problem better.
try putting ref to your external JS at bottom, just above the closing body tag
eg
<body>
<ul></ul>
<!-- last thing on the page-->
<script src="app.js" type="text/javascript"></script>
</body>
this seemed to have solved it for me