I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
Related
I've attached copies of the code below. Only two files in my project now, app.js and index.html. When I go to google developers' tool and console, the log statement isn't going through. When I type react or react-dom into console I am told Reference Error: React is not defined. This is what a Udemy tutorial has told me to do last updated 5/19 so this should work. I have tried putting import React from "react"; in the top of the files but that doesn't work either. Any suggestions?
//app.js
console.log("App.js is running!)
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
<script src="https://unpkg.com/react#16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
Looks like you'll need to also specify the crossorigin attribute on the scripts as per the react CDN-links docs.
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
I need to create an html file that contains only content within a form tag of another html file, and nothing else. Is there any way to do this?
You can dynamically load html snippets after your main page loads using javascript. Something like this:
main.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Form</h1>
<div id="container"></div>
</body>
</html>
form.html
<form>
<input value="testing" />
</form>
script.js
var formUrl = 'form.html';
$(window).on('load', function(){
$.get(formUrl, function(res){
$('#container').append($(res));
})
})
Here is a working plunk
Using webcomponents, it possible to import HTML from other files.
But this isn't widespread nor supported by all major browsers and maybe not what you're looking for.
You should really start by using a programming language like PHP, Ruby, Python or similar.
I would like to include a webix table such as this one into a sphinx document.
I've found that directive:
.. raw::
:file: data.html
Unfortunately it does not work because the head should be included into <head>. Also the relative links should be updated according to the sphinx generated html.
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8">
<script src="webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="samples.css">
<script src="testdata.js" type="text/javascript" charset="utf-8"></script>
</head>
How to include a webix widget into a static sphinx page?
One possible solution would be to fully include the html using jquery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
However this requires to add stuff into the <head> of the page
It sounds like what you want to do is create a custom HTML theme for use in Sphinx. This is less work than it sounds like, since you can probably just inherit from an existing theme, and only override a small part of it in your new theme. See the Sphinx docs re: templating and theming
Also, see this answer, which might be helpful:
Adding a javascript script tag some place so that it works for every file in sphinx documentation
I have small requirement that i want to include productresults.html file in productsearch.html in durandal(Single Page Application). Can any one help me on this and i have tried the following ways also.
<link rel="components" href="productResults.html">
<!--#include virtual="productSearch.html" -->
Thanks,
shiva
Solution using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("productResults.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Hope this helps.
Thanks for your support and information.
Finally the code snippts works fine for me in SPA.
<!--ko compose: {view: 'nav'} -->
<!--/ko-->
What you're trying to do is a Server side include.
Your web server must be configured to support it - it sounds like maybe your server isn't?
It's also possible your web server might require the file to have a special suffix, e.g. "productSearch.shtml".
You can look here for more details:
http://stackoverflow.com/questions/13612391/enabling-ssi-on-iis
http://blogs.msdn.com/b/robert_mcmurray/archive/2010/12/28/iis-notes-on-server-side-includes-ssi-syntax-kb-203064-revisited.aspx
http://httpd.apache.org/docs/2.2/howto/ssi.html
i need to display the section as PopUp while onload(). but i don't know how to call this javascript function(function($)). name has confused me. also if any other way to call this div section as popup .please sugesst. Thanks
<html>
<head>
<script>
// function name is function($)
function($){
}
</script>
</head>
<body>
<div>
<!-- body of the popUp -->
</div>
</body>
</html>
The $ function is probably the one defined in jQuery, so you will need to include the jQuery JavaScript library if you want to use it for showing a pop up.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Including just this library will define the $ function and you can then use jQuery functions in your JavaScript code. However this will not create a pop-up. There are many jQuery plugins that can be used to create a pop-up.
jQuery dialog?
http://jqueryui.com/demos/dialog/
Loads of examples on there