In D3.js, one usually loads data from an external csv file. This is very efficient for large data, and avoids changing the code when the data changes.
However, there are two situations (only using small csv data) where I want to embed csv directly in an HTML page:
A page that can be loaded locally (i.e. from file:///), without requiring to run a local HTTP server.
A small jsfiddle example explaining a D3.js question for use on stackoverflow.
This is the solution I have come up with, using the example from the D3.js API.
Embedding the csv data:
<pre id="csvdata">
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
</pre>
Hidding the raw data on the page:
#csvdata {
display: none;
}
Parsing it:
var raw = d3.select("#csvdata").text();
var parsed = d3.csv.parse(raw);
Optionally, show the result:
d3.select("#parsed").text(JSON.stringify(parsed));
// Assuming <div id="parsed"></div> somewhere on the page
If think this is flawed, or if you have a more elegant solution, I will gladly accept your answer!
EDIT: see it in action in this fiddle
Related
I am using EJS in the browser (not on the server).
I have some ejs that I would like to use in multiple pages, so I want to put that in its own file, say table.ejs.
Is there a way I can include it in my HTML such that it is immediately accessible to my javascript after onload?
I was thinking something like:
<script id="table-ejs" type="text/ejs" src="ejs/table.ejs"></script>
then in my javascript:
ejs.render(document.querySelector('#table-ejs').???, data)
Is this possible?
I could use the Fetch API to retrieve the ejs file but then I would need to rewrite a lot of code to make it async. I was wondering if I could avoid that.
Well,
place all your ejs-files within a file "views" - within your views you can create another file "partials" - in this file you place your header and footer.ejs.
Within, lets say, your home.ejs you have to include the following code:
<%- include('partials/header'); -%>
// the rest of your code
<%- include('partials/footer'); -%>
You can find more here: https://ejs.co/#docs
If you use doxygen, you'll have noticed how certain adornments can appear in the header bar for the detailed info for a given function. Here's an example, it has the inline adornment, another one I've seen is static and I expect there are others.
I'm actually using doxygen to document Javascript on a mixed C++/Javascript project and would like to put an async adornment into the documentation for functions that are asynchronous. I'm using Coherent labs excellent script to do to this.
So, is there a way to insert custom adornments? I'd like the syntax to be something like this:
/// #adorn async
I don't see a direct solution in doxygen for "custom" labels. Problem would of course also be that it should work for all output types.
In e.g. LaTeX / PDF the static is shown as [static].
In HTML I think the relevant part is:
<td class="mlabels-right">
<span class="mlabels"><span class="mlabel">static</span></span> </td>
Maybe you could do something with the css files / or embedding a javascript script in the HTML code.
Other solution would be to add a command to doxygen that handles this type of requests, but this would mean again a new command in doxygen.
I have this xml as part of the responseXml of an Ajax call:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
When I used this jQuery(responseXml).find("title").text(); the result is "Title".
I also tried jQuery(responseXml).find("title:first-child") but the result is [object Object].
I want to get the result:
<span style="color:#ffff00;"><strong>Title</strong></span>
Please let me know how to do this in jQuery.
Thanks in advance for any help.
Regards,
Racs
Your problem is that you cannot simply append nodes from one document (the XML response) to another (your HTML page). The issue is two-fold:
You can use jQuery to append nodes from the XML document to the HTML page. This works; the nodes appear in the HTML DOM, but they stay XML nodes and therefore the browser ignores the style attribute, for example. Consequently the text will not be yellow (#ffff00).
As far as I can see, jQuery offers no built-in way to get the XML string (i.e. a serialized node) from an XML node. jQuery can handle XML documents quite well, but there is no equivalent to what .html() does in HTML documents.
So to make this work we need to extract the XML string from the XML document. Some browsers support the .xml property on XML nodes (namely, IE), the others come with an XMLSerializer object:
// find the proper XML node
var $title = $(doc).find("title");
// either use .xml or, when unavailable, an XMLSerializer
var html = $title[0].xml || (new XMLSerializer()).serializeToString($title[0]);
// result:
// '<title><span style="color:#ffff00;"><strong>Title</strong></span></title>'
Then we have to feed this HTML string to jQuery so new, real HTML elements can be created from it:
$("#target").append(html);
There is a fiddle to show this in action: http://jsfiddle.net/Tomalak/QWHj8/. This example also gets rid of the superfluous <title> element.
Anyway. If you have a chance to influence the XML itself, it would make sense to change it:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
Just XML-encode the payload of <title> and you can do this in jQuery:
$("#target").append( $(doc).find("title").text() );
This would probably work:
$(responseXml).find("title").html();
Is it possible to load an XML / HTML document with node.js and perform operations such as getElementsByTagName ?
node.js doesn't give you a DOM "out of the box", but there is a great module that provides a proper HTML DOM: https://github.com/tmpvar/jsdom.
Edit: there are also several modules that help with interacting with XML. Here's a list of them on the wiki (this page is deprecated): https://github.com/joyent/node/wiki/modules#wiki-parsers-xml
Cheerio: Tiny, fast, and elegant implementation of core jQuery designed specifically for the server.
var cheerio = require('cheerio'),
$ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> <h2 class="title welcome">Hello there!</h2>
Also check out https://github.com/robtweed/ewdDOM
This is a persistent DOM implementation using the Globals database
I have a <table> in a web page that I populate using JavaScript code like this:
var cellBarcode = row.insertCell(1);
var textNode = document.createTextNode(barcode);
cellBarcode.appendChild(textNode);
var cellItemName = row.insertCell(2);
var textNode = document.createTextNode(itemName);
cellItemName.appendChild(textNode);
I need to save its data to my database... So I need to know how I can submit it to php... Is it possible...? If yes, please provide some sample codes that are easy to understand for a beginner like me... thanks...
Yes, you can submit this information to a server-side script, but not without extra JavaScript code.
The extra JavaScript code would collect the information in the table (either from the DOM you've built, or by accessing the same data you used when building the table) into a string, which can then be sent to the server using one of standard ways.
Since you've used the term "submit", I'm assuming you want to send the table's data as part of an HTML <form> submission, you can put the generated string in an <input type="hidden"> element.