Jupyter NB prevents Javascript execution from taking effect - javascript

I am running a jupyter notebook on a local server and spent the entire last day trying to get a javascript library for charting to run. It's called Dygraph (http://dygraphs.com/). Outside of the jupyter notebook everything is working as it should, but if I want to use the library inside a notebook, then things get messy. Even displaying a simple html file, which uses the library and works just fine outside jupyter, is not working when viewed via the server. All resources are in the right place and seem to get executed, just without having a lasting effect.
I know that the script is executed, because I appended "console.log('okay')" to the local source file (http://dygraphs.com/2.1.0/dygraph.min.js) and "okay" is in fact showing up in the browser console.
I executed the script in the following ways (none of which were effective):
By using IPython to paste a script tag, which links to the resource (src="...")
By reading the content of the script using python and using IPython to execute the javascript directly
The most obvious way: by manually copy-pasting the content of
dygraph.min.js into the console
If I execute 3) on any other site, then I can successfully run the following simple statement:
console.log(Dygraph)
However when I am inside the notebook and try the same, I instead just get:
ReferenceError: Dygraph is not defined
How is this possible and how to fix it?
PS:
I also tried using the python wrapper PyDyGraphs (https://github.com/DayStarEngineering/PyDyGraphs). The example code of the github page throws the same ReferenceError and the graph is not displayed correctly (instead there is just the empty div).

Related

ReferenceError: document is not defined (JavaScript in VS Code)

Im learning JS. Found a good video "JavaScript Programming - Full Course" and stucked at the 2nd part where I need to use DOM. I have the HTML document, in i refered to the JS file. Other stuff working well, but this:
let messageEL = document.getElementById("message-el")
Always get this error:
ReferenceError: document is not defined
I installed live server, and it works one time, than stops.
What can I do, to fix this? Do I need to download some extension?
Please tell me the solution as simple as u can Im at the beginning of the learning path.
This is the code and the error
In your screenshot, you're attempting to run the script using Node.js (the server-side JavaScript executable).
Since you say you're running live-server, you should be looking at your browser instead, not trying to run your code via Node.

Run isolated JavaScript commands in VS Code (not current file)

I am looking for a way to run individual commands in VS Code but not the whole file. I do work on client websites where a lot of my code will not run in a standard debugger or in the Quokka extension because it relies on the page that I am working on (and running in the debugger does not perfectly emulate how my code will run. But sometimes I like to run a few lines of code or a single function separately to make sure I have it set right without having to copy my code over to the online platform used to execute it and load up a preview link. Normally what I like to do is open a new chrome tab at about:blank and use the dev console there to paste in my code and this is my "playground" of sorts. Is there any form of active JS engine that I can do this in without having to save these lines to a new file and run the debugger?
If you looking all these things in VS code I think it will be a bit hard because of this.
to run JS code snippet VS code must have JS engine like same for PHP its compiler or same for any other language and adding these compilers in IED will again make these IEDs fat and CPU costly.
BUT Still, you can do one thing if you have a node js installed open Terminal outside or inside the VS code.
and type
$node
This will open a JS playground. Where you can execute js code snippets
but here you will not be able to access DOM, WINDOW object, etc.
In case you found any plugin which executes js code in VS CODE with DOM, window please let me know.

Getting Custom Widgets, Static Javascript, and Voilà to all play nicely with each other in Jupyter Notebook

I’ve been working on a Jupyter Notebook for the last month and put together a very nice toolkit for my DevOps team out of it. I want to be able to containerize this tool, or at least host it on our own intranet, so that the rest of the team can use it without having to go through a long install/configuration sequence on their own machines. Voilà seems to be the best tool for doing that, as my tool uses the Python kernel extensively and this seems to be a way to host it on a remote machine while still retaining the ability to use the kernel.
My tool involves a couple of custom widgets. They’re very simple and there to communicate information better through the UI - they’re an image object and a label object that can slowly fade out over the course of several seconds to indicate that an operation (such as saving) was either recently completed or done so long ago that the information is likely no longer relevant. (I don’t want the user to see a ‘Data saved!’ message from 15 minutes ago, for example.) I managed to put these custom widgets together just fine - but like all custom widgets, they needed additional Javascript code to display on the Notebook.
Putting the relevant javascript in a cell with the ‘%%javascript’ magic tag causes the custom widgets to work perfectly - however, I do not want to rely on this as a long-term solution for two reasons. One reason is that I want the javascript to be able to be easily rewritten, stored to a repository, and viewed on tools outside the notebook itself - I don’t want to commit a new version of the notebook every time I need to change the Javascript, and I certainly don’t want to go digging through the .ipynb file when I want to read the code itself.
The other problem is that Voilà does not seem to support the ‘magic %%Javascript’ tag, at least at the moment. Putting the javascript code inside a cell before the cell containing the application and then running the entire notebook through Voilà does not seem to execute the Javascript code, only injecting it into the HTML - errors pop up throughout the Javascript console, and all of my custom widgets fail to render.
Is there some accepted way to create a Javascript file, one that would be kept in a /static folder or something like that to match up with images and HTML files, and then configure some Python code so that the Javascript file is imported and executed at the very least before my application’s widgets are created? I’ve looked at the custom.js option inside the root Jupyter settings, and would like something more local to the project if at all possible. I’ve also tried to move the files I created into an existing /static folder inside Voila and import them in the template with the following lines of code:
<script type=“text/javascript” src="{{resources.base_url}}voila/static/image_extra_features.js"></script>
<script type=“text/javascript” src="{{resources.base_url}}voila/static/label_extra_features.js"></script>
But this seems to just include, but never actually execute, the relevant code.
I’m sure I must be missing something. (I thought I found something promising when I chased the ’ _view_module_version’ section of the Python model of the custom widget down, as the version of the custom widget isn’t specified anywhere in the Javascript file, but that seemed to be a dead end- where is the module version supposed to be listed? Is it only in the Python file?)
Does anyone have any idea as to what could be the issue?

Adding JQuery/Javascript Files to Project

I have a project I am working on at work that is ASP.NET in TFS. I have checked out the solution and have made some adjustments to the code behind with no issues. When I try to add JQuery and a Javascript file to the project, it does it fine in Visual Studio 2012. But when rebuilding and running it won't execute the javascript code. It's like it ignores it. When I put breakpoints in the Javascript file I get the message 'The breakpoint will not currently be hit, no symbols have been loaded for this document'. I simply cannot get the web page to acknowlegde either the JS file, or the JQuery file.
(And yes, I have scoured StackOverflow.com and tried all the suggestions mentioned)
Any suggestions appreciated!

Where do I find the code behind a dynamically generated .aspx file

I'm trying to debug a dynamically generated aspx file, which is throwing an error. I've been unable to find where the dynamic code is generated from. When debugging the application, I get an error from the line
_dialog.dialog('close');
as there is no dialog to be closed. I'm looking to find where I can change this in the static code, but don't know how to trace dynamic code. The call stack goes back only one function to JScript global code.
Thanks.
If you are using VS2012+, use the project window as it shows the actual generated code (during runtime). Also don't dismiss the new IE11 developer tools (F12). You can get loads of information on where the source is coming from.

Categories

Resources