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>
Related
Doing some basic practice/testing for a project I'm working on and can't get my html file to access the functions written in the attached javascript file. I feel like there's something super basic that I'm missing but I can't put my finger on it.
I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file
My html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
My js:
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
You need to add defer atrribute.
You should use <script> tag in body.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<input type="button" value="X" id="turn" onclick="turn();" />
<script src="app.js"></script>
</body>
</html>
For summary: Modern approach to old approach
You can use module which are defered by default <script type="module" src="/app.js"></script>
You can use defer to make sure your js is executed after page has load i.e <script src=app.js" defer></script>
You can put your <script> tag before </body> body tag closing
For more details, you can look at this excellent answer.
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here
Ive downloaded Notify.js'files and put them in root of webpage. im trying to test it but i didn't get anything when click on button
<html>
<head>
<title>Untitled</title>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$(".elem-demo").notify("Hello Box");">
</body>
</html>
Whats the problem?
This is your answer and working:
<html>
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$('.elem-demo').notify('Hello Box');"/>
<div class="elem-demo">a Box</div>
</body>
</html>
1-You forgot to include jquery to your file.
2-You should create an element that has a elem-demo class
3-Your javascript had a problem! You can't use double-quotation and it's child has double-quotation too.
here is your code example, and then my code:
onclick="$(".elem-demo").notify("Hello Box");" //Your code
onclick="$('.elem-demo').notify('Hello Box');" //My code
I have a basic web page with an HTML5 SELECT object that has 3 elements populated in it via js/jQuery. I want to take the value selected, and pass the value to a js file that runs a perl script.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
<script type="text/javascript" src="js/RunPerlScript.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1></h1>
</header>
<form name="myForm" method="GET" action="">
<select id="cdLDAP" onchange="run_script_func(this.textvar
<option/>
</select>
</form>
</body>
</html>
JS File:
var selection = #cdLDAP.text
function run_script_func(val){
window.alert=val;
}
Based on my PHP admin console I know the script isn't executing. My Perl script does work as expected, if I run it by itself, so I know it is not that aspect of my code.
Am I using the onchage="" element correctly? and/or is it how the RunPerlScript.js file is structured?
You've only got one
<option />
in your example. For the change event to fire you probably need something to actually change. Try adding another option.
Got the message box to work. The message box was being used to test the script was being called onchange
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
<script type="text/javascript" src="js/RunPerlScript.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1></h1>
</header>
<form name="myForm" method="GET" action="">
<select id="cdLDAP" onchange="run_script_func(this.value)">
<option/>
</select>
</form>
</body>
</html>
And this is the JS File:
function run_script_func(val){
alert(val)
}