How can I get the source code from a page using javascript - javascript

I'm trying to get the source code of that page (using js and d3js library)
http://www.brightpointinc.com/interactive/budget/index.html?source=d3js
I want to run it localy, so i've downloaded the source of the css file and "scripts/d3.js" file and places those file in the right place. However it seems that the javascript don't want to load anyway. Is it possible to run the page localy getting the source code ? If that's the case, how should I do ?

In firefox, you can simply right-click the page and do Save As... to download the complete website including all referenced files.
I looked at the website you mention and the reason that this doesn't work for this website is because this website is not completely client-side. The javascript does server-requests, which won't work on a local copy, because of security reasons.
This results in the following error:
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
d3.js (row 1674): request.send(data == null ? null : data);

Related

Javascript to read Text File to Array without a Webserver or external libraries local on Windows PC

I have an HTML file with JavaScript that I am running without any Webserver/host so I am just opening the file in a browser local to my windows PC. In that HTML file I would like to be able to read a text file in the same folder as the html file. That file will contain data in rows and columns separated with tabs. i.e
1 a
2 b
3 c
I want to keep this as simple as possible so all I have to do is share the HTML and Text file to others so the can open it up local to their computer without any webserver/host and without having to also copy of external libraries like node.js or jquery.
I have searched and tested everything I can find but either I need to reference an external library or I have to run it in a webserver or I need to click a button to load the file through the browser, none of what I want.
Does native JavaScript support the function to read a text file and save it to an array? If so, any code direction would be great.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
XMLHttpRequest() exists in native JavaScript, I think it will help you.
You also can send a request to the file. Or use library: axios.js because when you use XMLHttpRequest() you lose many time to write code which just get content from file, with axios I got file content with one line: `axios.get('file.txt').then(result => console.log(result.data));
To connect Axios: <script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
You can read official documentation about axios.js and XMLHttpRequest() in the net.

<!DOCTYPE html> in JS file

I am referencing two JS files in my map.HTML header. Chrome console gives
Uncaught SyntaxError: Unexpected token <
Here is why I'm confused. When I click on the Chrome Console error message, it takes me to the Sources tab. Under Sources, it puts me on the relative JS tab, and shows code starting with < !DOCTYPE html> then continues with a ton of code that is not in my map.html file or JS file. Presumably this is generated when the JS is read?
The two JS files are:
https://github.com/socib/Leaflet.TimeDimension/tree/master/dist
https://github.com/calvinmetcalf/leaflet-ajax/tree/gh-pages/dist
I am opening map.HTML locally with Chrome using a simple python server using a batch file (python.exe -m http.server).
I am sure this is very basic, but it's confusing me because I reference plenty of other JS files both online and locally and I don't get this error.
Thanks
If you try https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js in your browser, you will get an HTML page.
If you try https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js you will get what seams a source javascript file. But your browser may also consider it text/html, because that's what github sends in content-type header.
You can use third party sites which will serve files with appropriate content-type header, (example: https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js ).
In the future, try to do more research before posting here, otherwise a lot of people are going to downvote your questions, and even insult you.
A simple Google search for the differences between html and javascript may be a good start. The first step would be to remove those doctype lines. They mean nothing in Javascript. Just like the word granola has no meaning in Japanese. Different languages.
However, looking at your code, I don't see any DOCTYPE text in your javascript. In order to really debug this, you're going to want to open your webpage (html) in a browser (I recommend Chrome) and press F12 to open the developer tools. Go to the console and trace the error back through all of the files to find the origin.
In order to check and make sure that you're trying to pull javascript files and not html, take all the src urls you're using and paste them in a browser. If you land on a webpage, that url will serve up html, not javascript like you want. If you get a wall of text, you're probably referencing it correctly.
Correct: https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js
Incorrect: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
Hopefully this helps before this question gets deleted or put on hold. Also notice that people are going to downvote me for actually answering and trying to help.
You can't directly reference code stored in a github repo like you're trying to.
The URLs you're listing aren't javascript files; they're github webpages. That's why they contain HTML doctypes and code you don't recognize -- it's the github website code.
You can get the URL for the actual javascript files by clicking the "raw" button at the top of any of those pages (after selecting a specific individual file -- the urls you gave were for directories, not individual files.) For example:
This is an HTML file: https://github.com/socib/Leaflet.TimeDimension/blob/master/dist/leaflet.timedimension.min.js
This is the raw javascript:
https://raw.githubusercontent.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js
(That said, I don't believe it's a good idea to treat github like a CDN; usually you would use that purely as a repository and host the actual files in use elsewhere.)

How to get the CSV from a visualization online?

I want to be able to get this visualization working locally on my machine :
http://www.brightpointinc.com/interactive/political_influence/index.html?source=d3js
I got the javascript, html and css files from the Resources tab in the developer tools (Rightclick + inspect element). But it wont run as I haven't got the csv files needed.
Can someone tell me if it's possible to get the csv files from the developer tools the same way i got the javascript html and css files :)
go to devtools -> network. refresh your browser and type in csv in the filter box
example:
Request URL:http://www.brightpointinc.com/interactive/political_influence/data/Contributions_Senate.csv
Yes, if you look in "data.js", you'll see that there is a function called fetchData that pulls the data from a few different urls.
For example, the first one, addStream("data/Candidates_House.csv"..., is pulling from http://www.brightpointinc.com/interactive/political_influence/data/Candidates_House.csv

How do I write a Marvin extension for my MediaWiki installation?

Marvin JS (downloaded from http://dl.chemaxon.com/marvinjs/15.2.16/marvinjs-15.2.16-all.zip) is a JavaScript-based chemical structure editing program that I would like to be able to embed into MediaWiki articles on my local server. I have read https://www.mediawiki.org/wiki/Manual:Developing_extensions but my understanding of PHP is very rudimentary so it wasn't particularly helpful.
I would like such an extension to create the following parser extension tag:
<marvin src = URL width = W height = H></marvin>
where URL is the location (on the local server) of the file being loaded by the Marvin JS program, W is the width of the applet and H is its height.
My efforts to date to add Marvin JS to articles via other means
I have seen several examples of how this applet can be embedded into HTML pages and as I knew writing an extension would be very difficult for me with my lack of PHP knowledge I did attempt to embed this applet as a Widget and via the AddScriptCss extension, both have failed me.
AddScriptCss
For AddScriptCss after installing the extension I added:
<addScript src = "Marvin/js/lib/jquery-1.9.1.min.js"></addScript>
<addScript src="Marvin/js/lib/rainbow/rainbow-custom.min.js"></addScript>
<addScript src="Marvin/gui/lib/promise-0.1.1.min.js"></addScript>
<addScript src="Marvin/js/marvinjslauncher.js"></addScript>
to an article and received this output on the page after I saved this:
UNIQ5d2750bb5e9527b2-addScript-00000004-QINU UNIQ5d2750bb5e9527b2-addScript-00000005-QINU UNIQ5d2750bb5e9527b2-addScript-00000006-QINU UNIQ5d2750bb5e9527b2-addScript-00000007-QINU
adding the rest of the URL to the src field (e.g., http://127.0.0.1/mediawiki/) doesn't seem to correct this problem. Opening up 'Developer tools' (I'm using Chrome) shows two errors:
Uncaught SyntaxError: Unexpected string (# index.php line 154. Which is a WikEd line)
http://ads.dfgio.com/loader.js?client=topaz0001 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
I also saw this Mediawiki Extension add Javascript in Header stackoverflow question so I attempted following 2nd's answer (Mediawiki Extension add Javascript in Header) and after replacing script with addHeadItem and saving the page all I was left with was my original wikitext except with the URLs hyperlinked.
Widgets
As far as Widgets go I tried adding:
<includeonly><script type = "text/javascript" src="http://127.0.0.1/mediawiki/Marvin/gui/lib/promise-0.1.1.min.js"></script>
<script type = "text/javascript" src="http://127.0.0.1/mediawiki/Marvin/js/marvinjslauncher.js"></script></includeonly>
To Widget:Marvin, then I added {{#widget:Marvin}} to a page with no results (quite literally; when I loaded the page after saving this edit there was nothing there). Here is a screenshot showing the screen that came up upon opening developers tools on this page.
Try the Gadgets extension. It's the one Wikipedia uses; well-maintained and fairly easy to use.
Or, is this is a local wiki, only accessible to you, and you don't care about security at all, you can just enable arbitrary HTML in wikitext via $wgRawHtml.

Windows 8 Metro open Local files (.html)

I want to open a local html file from windows 8 metro (javascript ) App.
I tried doing it the way : http://msdn.microsoft.com/en-us/library/windows/apps/hh701484.aspx . It works fine as soon as i keep giving the actual http address but as soon as i replace them with my local file path , the success return is false everytime.
Any help ??
You can use the StorageAPIs and read all the HTML in a file. Then create a DOM element and set its innerHTML. (This is much easier if you use jQuery to manipulate the DOM).
I've got an example of something similar - where I read files from the app's local storage directory, and show the HTML in a web browser control. The example is in C# / XAML, but a similar logic can be used (without the need for a web browser control - since your app would be running inside a host that can directly show HTML like a browser):
http://krishnanadiminti.blogspot.com.au/2012/09/howto-provide-in-app-help-using-html.html

Categories

Resources