I am relatively new to both Bokeh/Python and HTML. I have created a served-based Bokeh plot which I want to display on a webpage. I have been following the instructions at https://docs.bokeh.org/en/latest/docs/user_guide/embed.html. In particular, I am using autoload_server to generate a script. However, when I place the script tag in the head of the HTML document (which is apparently correct, according to the last line at the above link):
<!DOCTYPE html>
<head>
<script
src="http://localhost:5006/autoload.js?bokeh-autoload-element=6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100&bokeh-absolute-url=http://localhost:5006&bokeh-session-id=bTinOCNtjuDagomoQgcw1EKJ7dUMkzSQJIRKozmGiqTc"
id="6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100"
data-bokeh-model-id="676400d3-9929-4d9e-aefe-2fb440f526d6"
data-bokeh-doc-id=""
></script>
</head>
<body>
</body>
</html>
The following error message appears on the webpage:
Bokeh Error
Error rendering Bokeh model: element with id '6abffe3c-d0dc-4e7b-80d3-0e7dc2d1b100' must be under body
So then I remove the script from the head and place it in the body. But this results in a completely blank webpage; the plot doesn't render at all.
Any help is greatly appreciated!
If we inspect the html generated by a basic example:
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html
plot = figure()
plot.circle([1,2], [3,4])
html = file_html(plot, CDN, "plot")
print(html)
It follows this format:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
</head>
<body>
<!-- generated div -->
<div class="bk-root">
<div class="bk-plotdiv" id="7a7b6ca9-3dec-430d-98f2-a0a7067c9ae0"></div>
</div>
<!-- generated script -->
<script type="text/javascript">
(function() {..})
</script>
</body>
</html>
The autoloading script instead replaces the generated <div> and <script>, and optionally replaces the static css and js references.
<!DOCTYPE html>
<html>
<head>
<!-- optional -->
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
</head>
<body>
<!-- autoloading script -->
<script
src="https://demo.bokeh.org/slider/autoload.js?bokeh-autoload-element=aee6d395-d079-4e02-ae72-8e70e617990d&bokeh-app-path=/apps/slider&bokeh-absolute-url=https://demo.bokeh.org/slider"
id="aee6d395-d079-4e02-ae72-8e70e617990d"
data-bokeh-model-id=""
data-bokeh-doc-id=""
></script>
</body>
</html>
Related
I'm pretty new to JQuery and I may be missing a few things about it.
I have created a .php file which contains the header of my website. I included it into my main .php file. The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php".
I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".
Hope you'll be able to help me about what I'm missing.
The main homepage in which I load the JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>DSI Welcome</title>
<link rel="stylesheet" href="../css/homepage.css" />
</head>
<body>
<header>
<?php include 'header.php';?>
</header>
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/homepage_script.js"></script>
</html>
The "header.php" file which I include into the main "homepage.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Header</title>
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<header>
<div class="userbox_rectangle_full_header"> </div>
</header>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/header_animation.js"></script>
</html>
Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php":
$(document).ready(function() {
$('#homepage_work_space').on('click', function(){
alert('hi');
});
});
Thank you in advance !
There is some points in your code thats better to know .
Your html structure is wrong! simple html5 structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Your JQuery Main File -->
</head>
<body>
Content of the document......
</body>
</html>
Define your main jquery file in head of your body.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!
It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.
here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ...
file index.php:
<html>
<head>
<script src="../js/jquery-3.3.1.js"/>
<script src="../js/jquery_color_animation.js"/>
<script src="../js/script/homepage_script.js"/>
</head>
<body>
<?php include 'header.php'; ?>
<!-- further content goes here -->
</body>
</html>
file header.php:
<div class="userbox_rectangle_full_header">
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>
file homepage_script.js:
$(document).ready(function() {
$('.work_space').on('click', function(){
alert('hi');
});
});
I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc.
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" />
I'm trying to get a simple qtip2 demo running but it wont work need help.
qtip2 is a framework that allows to create individual tooltips.
if you hover over the link a small yellow box should appear.
all files are in the same folder.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script>
Sample link
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
$('a[title]').qtip();
})();
</script>
Sample link
</body>
</html>
i removed unnessesary codes like the imagesloaded and replace the jQuery link you have with a CDN version.
And it works.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.qtip.js"></script>
Sample link
<script>
// self executing function here
(function() { $('a[title]').qtip(); })(); </script>
Sample link
</body>
</html>
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></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>