8

I am using the Jupyter Notebook, and am trying to create a widget, based on a template found on Github.

The template uses at some point the magic %%javascript. This works fine when directly pasted in the cells of the notebook.

However when I tried to make a function out of the widget, having the %%javascriptexpression makes it returns the error:

%%javascript SyntaxError: invalid syntax

Anyone knows how to "convert" the magic command so that it can be invoked properly from within a function (the function is saved in a separate file)

Radar
  • 935
  • 3
  • 9
  • 23

1 Answers1

6

If you use the ? IPython builtin, you can see the path for the magics. For example, %%javascript? shows that it is in lib\site-packages\ipython\core\magics\display.py

You can then just import it and use it as standard; for example, the following pops up an alert box if you run it from a notebook:

from IPython.core.magics.display import Javascript
Javascript('alert("hello world")')

EDIT: To get the example you posted in the comments working, just wrap the Javascript you'd like to run in quotes and call it with Javascript. Replacing In[4] with this pops out the window as normal and should be fine to include in a normal Python function.

from IPython.core.magics.display import Javascript
Javascript("""$('div.inspector')
    .detach()
    .prependTo($('body'))
    .css({
        'z-index': 999, 
        position: 'fixed',
        'box-shadow': '5px 5px 12px -3px black',
        opacity: 0.9
    })
    .draggable();""")
Randy
  • 14,349
  • 2
  • 36
  • 42
  • Do you know how Javascript is supposed to be called if in a function? If the original block is called with `%%javascript`, it works fine. But as soon as I merged its cell with the prior code(this is before making it a function) I receive an error message on the dollar sign. `invalid syntax`. The block of code I am trying to have to work is the following: `%%javascript $('div.inspector') .detach() .prependTo($('body')) .css({ 'z-index': 999, position: 'fixed', 'box-shadow': '5px 5px 12px -3px black', opacity: 0.9 }) .draggable();` – Radar Jan 10 '17 at 05:46
  • In fact maybe that is clearer: this is the snippet I am trying to make as a function: https://github.com/ipython/ipywidgets/blob/master/docs/source/examples/Variable%20Inspector.ipynb. The problem arise from the cell in[4] – Radar Jan 10 '17 at 05:56
  • This works on its own, but does not seem to work when called from within a function. For example, if using IPython.notebook.kernel.execute in the JS to set a python variable, nothing will get added to either globals() or locals() when called within a function, but will when called in a cell. – Daniel Apr 09 '18 at 19:02
  • For magic **aliases** like the alias `%%hist` for `%%history` you have to use the target magic name (`%%history`). And for me, this only seemed to work when I used a single `%` so: `%history?` is what I used to get the docs on history. – hobs Apr 19 '19 at 18:13
  • `%%` are cell-level magics, and `%history` only has a line-level version – Randy Apr 20 '19 at 02:39