Forgive me for this beginner question. I am trying to implement d3 on a HTML page, which is displayed in a JScrollPane in a Swing project. Am following the tutorial # http://alignedleft.com/tutorials/d3/adding-elements.
As I type code, I do not see template proposals after every dot. Would not like to run it on a temp server at the moment. The new paragraph that's supposedly generated when I run the application does not appear.
Does that mean that my source link to d3 is implemented wrongly & hence no template proposals? Is there any way to determine if elements from the DOM are selected correctly? Elements not embedded within the script is shown correctly however. Please advise.
Code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
<script type = "text / javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type = "text / javascript" src="d3.js">
d3.select("body").append("p").text("New paragraph!!!");
</script>
</body>
</html>
the other class:
jfxpanel = new JFXPanel();
Platform.runLater(new Runnable() {
#Override
public void run() {
try {
WebView browser = new WebView();
WebEngine engine = browser.getEngine();
//String url = "http://www.hotmail.com";
File f = new File ("src/d3/index.html"); //display local html, instead of external webpage
System.out.println("current directory: " + f.getAbsolutePath());
String url = f.toURI().toURL().toString();
engine.load(url);
Scene scene = new Scene(browser);
jfxpanel.setScene(scene);
}
catch (Exception e){
while (e != null) {
e.printStackTrace();
}
}
}
});
spVisual = new JScrollPane(jfxpanel);
//spVisual.setEnabled(false);
spVisual.setViewportBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
spVisual.setSize(800, 420);
spVisual.setLocation(100, 140);
spVisual.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
//spVisual.setVerticalScrollBarPolicy(javax.swing.ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED);
spVisual.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
SwingUtilities.invokeLater(new Runnable() {
public void run() {
spVisual.getViewport().setViewPosition(new java.awt.Point(0, 0));
}
});
add (spVisual);
Don't know anything about embedding html in swing but I do know that, using src and inline javascript on the same tag is not a good idea.
Also that TEST is within a <script> tag, so it'll be executed as javascript and it's not valid.
Finally, you assuming d3 is loading, your selector, append and text are fine.
Perhaps try:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>D3 test</title>
<script src="d3/d3.v3.js"></script>
</head>
<body>
<script>
d3.select("body").append("p").text("New paragraph!!!");
</script>
TEST
</body>
</html>
Related
When loading the latest version of fbevents.js for Facebook Pixel the JSON global object is being overrided. I don't know why this is happening, but this broke some applications that was using the JSON implemented by MooTools (they add encode and decode to JSON global object). I did some tests and verified that the problem was introduced on version 2.9.42.
On the version 2.9.41 the problem don't occur.
The code for the test is below: (change the ID for yours)
You can change the fbevents version using the v param
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-nocompat.js"></script>
<!-- Facebook Pixel Code -->
<script>
!(function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod
? n.callMethod.apply(n, arguments)
: n.queue.push(arguments);
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = "2.0";
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s);
})(
window,
document,
"script",
"https://connect.facebook.net/en_US/fbevents.js?v=2.9.42"
);
fbq("init", "YOUR_ID");
fbq("track", "PageView");
</script>
<noscript>
<img
height="1"
width="1"
src="https://www.facebook.com/tr?id=YOUR_ID&ev=PageView
&noscript=1"
/>
</noscript>
<script>
console.log("Version 2.9.42: ", JSON);
console.log("JSON before FB execute: ", JSON);
setTimeout(function () {
console.log("JSON after FB execute: ", JSON);
}, 3000);
</script>
</body>
</html>
I was researching on this and found something interesting.
The code inside fbevents.js didn't mess with the global scope, but another script was loaded, and this script is changing the global JSON.
The script is on this URL: https://connect.facebook.net/signals/config/1718502398417441?v=2.9.42&r=stable
You can open this and search for j.JSON=n. If you prettify the file, add spaces. It also adds JSON3 to the global scope. You can test typing window.JSON3.
See image for details:
That's my guess for now.
Edit 2:
You can also load different versions of this javascript file using the v parameter.
If you compare https://connect.facebook.net/signals/config/1718502398417441?v=2.9.41&r=stable and https://connect.facebook.net/signals/config/1718502398417441?v=2.9.42&r=stable
you can verify that the code on the image above was introduced on this version.
somehow my CSS-file is not included into my thymeleaf-template.
First of all I need to explain the workflow:
User clicks on form-Submit to send a POST to /historyDetails/{history_id}
Some data will be fetched from database using the history_id
The data will be rendered on history-detail-view.html
This is my DispatcherServlet:
#Configuration
#EnableWebMvc
#ComponentScan("*")
public class DispatcherServlet extends WebMvcConfigurerAdapter {
#Autowired
private WebApplicationContext ctx;
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/*
* resolve path to static ressources (images, stylesheets, javascript-files)
*/
registry.addResourceHandler("img/**").addResourceLocations("/WEB-INF/static/img/");
registry.addResourceHandler("css/**").addResourceLocations("/WEB-INF/static/css/");
registry.addResourceHandler("js/**").addResourceLocations("/WEB-INF/static/js/");
}
#Bean
public ThymeleafViewResolver getViewResolver() {
ThymeleafViewResolver vr = new ThymeleafViewResolver();
vr.setTemplateEngine(getTemplateEngine());
return vr;
}
#Bean
public SpringTemplateEngine getTemplateEngine() {
SpringTemplateEngine te = new SpringTemplateEngine();
te.setTemplateResolver(getTemplateResolver());
te.setEnableSpringELCompiler(true);
return te;
}
#Bean
public SpringResourceTemplateResolver getTemplateResolver() {
SpringResourceTemplateResolver tr = new SpringResourceTemplateResolver();
tr.setApplicationContext(ctx);
tr.setOrder(1);
/*
* resolve path to html to WEB-INF/<name>.html
*
* name can be something like templates/xxx.html
*/
tr.setPrefix("WEB-INF/");
tr.setSuffix(".html");
return tr;
}
}
My projectstructure (from root-directory):
This is the htistory-detail-view.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="#{css/style.css}"/>
<script type="text/javascript"
th:src="#{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="#{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY_DETAIL')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>
While the index.html is rendered with css, the history-detail-view.html is not but rather plain html.
The only errormessage, which I took from the network-tab in firefox is:
Loading failed for the <script> with source “http://localhost:9080/MyProject/historyDetails/js/utilities.js”.
The reason why I put the DispatcherServlet into this thread is becouse it is responsible for resolving the paths to the static ressources. When comparing the path from the projectstructure with the path in the errormessage, the DispatcherServlet doesn't seem to work properly but I don't know how to make it resolve the correct path.
The only difference I see here is the Pathvariable.
EDIT: I'm providing my index.html, since it is working properly here:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="#{css/style.css}"/>
<script type="text/javascript"
th:src="#{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="#{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>
The issue might be because of the spring security configuration if any. Add the path to your CSS static files as an exception in the spring security configuration.
If you are not using spring security or that you have provided the exception, make sure you have followed the standard folder structure.
Go through this link for more details.
To override the chrome web store new tab page I use the following code:
"chrome_url_overrides": {
"newtab": "index.html"
}
I have a backend which serves the html files so instead of using the index.html file I would like to get a html file via a http request.
Is this possible? Or is there a workaround Thanks.
You could make an ajax call from your index page to remote server, and replace the entire html with external html. Sample code looks like the following
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
index.js
var SERVER_URL = "";
var xhr = new XMLHttpRequest();
xhr.onload = function() {
replaceHtml(xhr.responseText);
};
xhr.open("GET", SERVER_URL);
xhr.send();
function replaceHtml(data) {
document.open("text/html");
document.write(data);
document.close();
}
You could simply have some javascript inside a <script></script> tag in your index.html file that grabs your generated html content from a custom domain.
This probably a very simple question, but I can't figure it out alone. I have the following controller:
#RestController
public class TestController extends AbstractCloudController {
private final EquipmentRepository equipmentRepository;
#Autowired
TestController(EquipmentRepository er) {
equipmentRepository = er;
}
#RequestMapping(method=RequestMethod.GET) void index() {
List<String> codes = equipmentRepository.findAllEquipments();
String output = "";
for (String code : codes) {
output += "ID "+code+"\n";
}
}
}
And the following index.html:
<!doctype html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet"
href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" />
</head>
<body ng-app="testApp">
<div class="outer">
<h1>Hello World!</h1>
<div class="container">
<div ng-controller="TestController" ng-cloak="ng-cloak">
<p>This is a test page</p>
</div>
</div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>
</div>
</body>
</html>
How do I get the information from the controller to the server side without it overriding the html? When I make the controller return something, it ends up overwriting the html and printing only the equipment code instead instead of the "Hello World", even the page title doesn't show.
I don't know what do you returned in your controller, but you may check this document: http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-ann-return-types
If you want to print the content of output, you may add it to a Model
#RequestMapping(method=RequestMethod.GET, Model model) void index() {
List<String> codes = equipmentRepository.findAllEquipments();
String output = "";
for (String code : codes) {
output += "ID "+code+"\n";
}
model.addAttribute("output", output);
}
then use JSP Expression Language to get the content
${output}
PS. Spring will treat a returned string as view name, not html content by default.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
</head>
<body>
I want to get this text
<script>
var test=function()
{}
</script>
</body>
</html>
and the result is:
line:7,
position :4
content:
var test=function()
{}
Have you tried the HTML Agility Pack?
This typically works quite well and gives you a nice intuitive interface into parsing HTML content.
You should be able to use it something like this:
HtmlDocument doc = new HtmlDocument();
doc.Load("yourfile.html");
foreach(HtmlNode link in doc.DocumentElement.SelectNodes("//script)
{
// do something with your script nodes
}