I'm trying to use d3-graphviz in a very basic html page to render a graph for display. However, nothing ever renders. I worked my example down to the exact content of the "basic example" from the documentation and still nothing renders. Here is my page content which is exactly the same as https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b which is referenced from https://github.com/magjac/d3-graphviz
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/#hpcc-js/wasm#0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz#3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>
If I load that file (chrome, firefox, or safari) then I just get a blank page. I can throw in HTML above the <div> which renders, but the graph doesn't render. Any ideas what I'm doing wrong?
This code runs if I set up a local web server and access it. To do the same, you'll need to set up a web server.
Related
Any suggestions on how to get or borrow the div from another page. My pages consist of two csr view(customer service representative terminal) and the customers terminal view
Right now I'm doing a queuing system what I want to do is share some part of div of the csr view to the terminal view
terminal view is only a view of data like que code for them to know whos next to be call by our csr and etc and I want to include there the timer for every que that the csr made, a timer must set and I want to display this timer on the terminal view itself as well for the customer to know how long it is already for that cue, obviously timer must only initialized on the csr view page only and cant be on the terminal view
and terminal view is only viewing on a wide screen tv/monitor so user/customer cant navigate it
my code for the timer is here
<div class="stopwatch">
<div class="controls">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
</div>
<div class="display">
<span class="minutes">00</span>:<span class="seconds">00</span>:<span class="centiseconds">00</span>
</div>
</div>
<script src="stopwatch/stopwatch.js"></script>
I need to borrow or get/share the <div> <div class="display"> and display it on the terminal view and if the que is finish timer will stop and on the next and same process must be initialized.
I look for some similar question but it is not the exact what i need
jQuery get variable value from another html page
my structured pages is like this
RQS
|_csrpage(index.php where stopwatch is included)
|_terminalview(index.php inside here must display)
they are both from separate folder
If the window with the DIV that you wish to get or borrow can be opened using a standard hyperlink or similar on the main window then it is fairly trivial to share data between pages using postMessage after capturing a reference to the opening page
As example here are two basic html pages.
index.html
the main page that is to display the "borrowed" data
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
document.addEventListener('DOMContentLoaded', function(){
const view=document.getElementById('view');
window.addEventListener('message', function(e){
view.innerHTML=e.data
});
});
</script>
</head>
<body>
<a href='source.html' target='_blank'>Open Source page with clock/timer</a>
<div id='view'></div>
</body>
</html>
source.html
the page with the timer/ clock ( data to be "borrowed" )
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>#clock{border:1px solid black;padding:1rem;text-align:center;width:50%;float:none;margin:auto}</style>
</head>
<body>
<div id='clock'></div>
<script>
(function(){
const target=window.opener;
(function(){
document.getElementById('clock').innerHTML=new Date().toLocaleTimeString('en-GB');
target.postMessage( document.getElementById('clock').innerHTML, '*' )
setTimeout( arguments.callee, 1000 );
})();
})();
</script>
</body>
</html>
In the above source.html page there is a simple clock running which acts as the data to be shared with the original page. In your code this would be your timer
I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?
Why I can't reload the same page after I create two cookies by setcookie() function?
The page kept on loading to timeout after reload,no any error message in apache log and nothing in chrome developer tool.
The problem maybe crashed with javascript,because I removed the line in HTML,the page can load,any method to correct this bug?
this is code:
<!doctype html>
<html>
<head>
<?php include "**cookie2.php**";?>
<!--other content in head-->
</head>
<body>
**<!--a button onclick will run cookie1.php-->**
<!--other contents in body-->
<script src="**readcookie1.js**" language="javascript"></script>
</body>
</html>
in file **cookie1.php**
{
**setcookie("login",1,0,"/");**
}
in file **cookie2.php**
{
**setcookie("pageView",0,0,"/");**
}
in file **readcookie1.js**
{
//use **document.cookie** to get cookie2
}
oh,I found the problem.
My function to read cookies in javascript had bug,so process stuck there.I have revised it.
I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"
The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
Activities
<!-- this stays the same -->
</div>
<div id="body">
<p>this is the content that arrives without needing prompting</p>
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
This is the content of "test02.html":
<p>---</p>
<p>Hello world!</p>
<p>---</p>
I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.
Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.
Anyone have an idea about how to get this working in IE?
The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):
I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
IE's default for intranet sites is to display them in "compatibility" mode.
At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.
Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).
add meta tag below to your page
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :
$(document).ready(function(){
$("#activities").click(function( e ){
e.preventDefault(); //<---- add here
$("#body").load("test02.html");
});
});
I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.
Main-page(index.php):
<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>
Child-page(loaded in div(graph.php)):
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>
Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:
Put eval() around my code [I saw on a guide that this could lead
to malicious user attacks].
Create the scripts on the main page then just import the data using:
document.createElement() and .parentNode.insertBefore()
Create a listener and call the functions when I open graph.php
And this good example
Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.
From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.
For example:
...
<div id="main-page-container">
<iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
</div>
...
See reference and usage example.
I would suggest using jQuery's .load() function for this.
Take a look here: jQuery API
Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.
Take for instance:
function addScriptText(js_code) {
var element = document.createElement("script");
element.innerHTML = js_code;
document.head.appendChild(element);
}
will not work in IE8 and below.
You must use eval to accomplish this:
function addScriptText(js_code) {
window.eval.call(window, js_code);
}
Otherwise you need to dynamically request an external js file such as:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);
Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)
Working solution with jQuery:
Page 1:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page2").load("page2.html");
});
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>
Page 2:
<h2>Page 2 Header</h2>
<script type="text/javascript">
alert("Page 2 loaded and javascript executed!");
</script>