I am plotting some csv data using a java applet embedded in my simple html code. Things run fine when I plot the data without any frill; if I add labels and title I don't see the graphs anymore. What should I change in the html code, reported below?
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"
style="width:1000px; height:600px;"></div><br>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv"),
"combined_file.csv", // path to CSV file
{ title: 'Title',
xlabel: 'Time'
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
</script>
</body>
</html>
For the plotting options, I followed this example.
You forgot a comma after the xlabel property. It should be this:
{ title: 'Title',
xlabel: 'Time',
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
As a result, there was a javascript error stopping execution. To debug this yourself, use your browser's web developer tools and look at the console. It will report any javascript errors.
Related
I have issue in my project in Eclipse.I have Dynamic Web Project which consists of jsp,html and javascript files in it.It displays html content for a fraction of second before loading actual html content with js and CSS ad ons. I couldn't find issue in the code.Is there anything I am missing?
This is the order in which I have included all my css and js files:
<html>
<head>
<style><%#include file="/WEB-INF/style.css"%></style>
<style><%#include file="/WEB-INF/jquery-ui.css"%></style>
<style><%#include file="/WEB-INF/jqueryui-com.css"%></style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/file.js"></script>
</head>
I am trying to use React to render my UI in Play framework, but it doesn`t work. The same code just saved as .html file and opened directly can works normally, but if I place it in my play framework project as path: ./app/views/hello.scala.html, it just show title normally but nothing shown on my page. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="./react/react.js"></script>
<script src="./react/react-dom.js"></script>
<script src="./react/browser.min.js"></script>
<title>React Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
Please check weather all the js are loaded properly. check your assert path
<script src="assets/react/react.js"></script>
<script src="assets/react/react-dom.js"></script>
<script src="assets/react/browser.min.js"></script>
I'm currently doing a Scheduling module for our project, and to be able to achieve this, we are going to use DHTMLX Gantt. However, I cannot store the values that is entered into the gantt chart!
Here is my code for the chart
<!DOCTYPE html>
<html>
<head>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="codebase/dhtmlxgantt.js"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.load("events.php");
var dp = new dataProcessor("events.php");
dp.init(gantt);
</script>
</body>
</html>
and here is the code for the events.php
include ('codebase/connector/db_sqlite3.php');
include ('codebase/connector/gantt_connector.php');
$dbtype = "MySQL";
$res=mysql_connect("localhost", "root", "");
mysql_select_db("myfirstdb");
$gantt = new JSONGanttConnector($res, $dbtype);
$gantt->mix("open", 1);
$gantt->render_links("gantt_links", "id", "source,target,type");
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,progress,sortorder,parent");
?>
What seems to be the problem?
You php code seems ok. What happens when you try saving the event, can you check the server response? It may contain an error message.
Try also enabling logging for gantt connector so you could see an actual sql requests and their results
http://docs.dhtmlx.com/connector__php__errors.html
One other thing - make sure you've enabled auto increment for id column, otherwise connector will be unable to insert new records
This question already has answers here:
Parse JavaScript with jsoup
(2 answers)
Closed 9 years ago.
I've got a webpage that creates a table using Javascript. Right now I'm using JSoup in my Java project to parse the webpage. By the way JSoup isn't able to run Javascript so the table isn't generated and the source of the webpage is incomplete.
How can I include the HTML code created by that script in order to parse its content using JSoup? Can you provide a simple example? Thank you!
Webpage example:
<!doctype html>
<html>
<head>
<title>A blank HTML5 page</title>
<meta charset="utf-8" />
</head>
<body>
<script>
var table = document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
document.body.appendChild(table);
</script>
<p>First paragraph</p>
</body>
</html>
The output should be:
<!DOCTYPE html>
<html>
<head>
<title>
A blank HTML5 page
</title>
<meta charset="utf-8"></meta>
</head>
<body>
<script>
var table = document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
document.body.appendChild(table);
</script>
<table>
<tr></tr>
</table>
<p>
First paragraph
</p>
</body>
</html>
By the way, JSoup doesn't include the table tag as it isn't able to execute Javascript. How can I achieve this?
First possibility
You have some options outside Jsoup, i.e. employing a "real" browser and interact with it. An excellent choice for this would be selenium webdriver. With selenium you can use different browsers as back end, and maybe in your case the very lightweight htmlUnit would do already. If more complicated JavaScript is called there is often no other choice then running a full browser. Luckily, phantomjs is out there and its footprint is not too bad (headless and all).
Second possibility
Another approach could be that you grab the javascript source with JSoup and start a JavaScript interpreter within Java. For that you could use Rhino. However, if you go that path you might as well use HtmlUnit directly, which is probably a bit less bulky.
How can I read/access a JSP variable from JavaScript?
alert("${variable}");
or
alert("<%=var%>");
or full example
<html>
<head>
<script language="javascript">
function access(){
<% String str="Hello World"; %>
var s="<%=str%>";
alert(s);
}
</script>
</head>
<body onload="access()">
</body>
</html>
Note: sanitize the input before rendering it, it may open whole lot of XSS possibilities
The cleanest way, as far as I know:
add your JSP variable to an HTML element's data-* attribute
then read this value via Javascript when required
My opinion regarding the current solutions on this SO page: reading "directly" JSP values using java scriplet inside actual javascript code is probably the most disgusting thing you could do. Makes me wanna puke. haha. Seriously, try to not do it.
The HTML part without JSP:
<body data-customvalueone="1st Interpreted Jsp Value" data-customvaluetwo="another Interpreted Jsp Value">
Here is your regular page main content
</body>
The HTML part when using JSP:
<body data-customvalueone="${beanName.attrName}" data-customvaluetwo="${beanName.scndAttrName}">
Here is your regular page main content
</body>
The javascript part (using jQuery for simplicity):
<script type="text/JavaScript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var valuePassedFromJSP = $("body").attr("data-customvalueone");
var anotherValuePassedFromJSP = $("body").attr("data-customvaluetwo");
alert(valuePassedFromJSP + " and " + anotherValuePassedFromJSP + " are the values passed from your JSP page");
});
</script>
And here is the jsFiddle to see this in action http://jsfiddle.net/6wEYw/2/
Resources:
HTML 5 data-* attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
Include javascript into html file Include JavaScript file in HTML won't work as <script .... />
CSS selectors (also usable when selecting via jQuery) https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Get an HTML element attribute via jQuery http://api.jquery.com/attr/
Assuming you are talking about JavaScript in an HTML document.
You can't do this directly since, as far as the JSP is concerned, it is outputting text, and as far as the page is concerned, it is just getting an HTML document.
You have to generate JavaScript code to instantiate the variable, taking care to escape any characters with special meaning in JS. If you just dump the data (as proposed by some other answers) you will find it falling over when the data contains new lines, quote characters and so on.
The simplest way to do this is to use a JSON library (there are a bunch listed at the bottom of http://json.org/ ) and then have the JSP output:
<script type="text/javascript">
var myObject = <%= the string output by the JSON library %>;
</script>
This will give you an object that you can access like:
myObject.someProperty
in the JS.
<% String s="Hi"; %>
var v ="<%=s%>";
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<title>JSP Page</title>
<script>
$(document).ready(function(){
<% String name = "phuongmychi.github.io" ;%> // jsp vari
var name = "<%=name %>" // call var to js
$("#id").html(name); //output to html
});
</script>
</head>
<body>
<h1 id='id'>!</h1>
</body>
I know this is an older post, but I have a cleaner solution that I think will solve the XSS issues and keep it simple:
<script>
let myJSVariable = <%= "`" + myJavaVariable.replace("`", "\\`") + "`" %>;
</script>
This makes use of the JS template string's escape functionality and prevents the string from being executed by escaping any backticks contained within the value in Java.
You could easily abstract this out to a utility method for re-use:
public static String escapeStringToJS(String value) {
if (value == null) return "``";
return "`" + value.replace("`", "\\`") + "`";
}
and then in the JSP JS block:
<script>
let myJSVariable = <%= Util.escapeStringToJS(myJavaVariable) %>;
</script>
The result:
<script>
let myJSVariable = `~\`!##$%^&*()-_=+'"|]{[?/>.,<:;`;
</script>
Note: This doesn't take separation of concerns into consideration, but if you're just looking for a simple and quick solution, this may work.
Also, if you can think of any risks to this approach, please let me know.