CODEWITHSUNDEEP
javascriptipythonjupyter-notebookjupyter
B0ltz
B0ltz

Reputation: 425

IPython 3 to Jupyter migration, custom.js and events

in IPython3 my 'custom.js' was listening for the event :

$([IPython.events]).on("app_initialized.NotebookApp", function() { ... })

After having a look at this post, I'm listening for the 'notebook_loaded.Notebook' event.

require(['base/js/namespace', 'base/js/events'], function(IPython, events) {
  events.on('notebook_loaded.Notebook', function() { ... });
});

But I was using 'app initialized' event to do some stuff including hiding the header, ie:

$('#header').hide()

And now, with this event, it's hiding, but just after a short display... I think there is an event before notebook loaded, just like in IPython3 notebook

I didn't find any docs about those events..

Does it still have any event fired at the app initialization?

Thanks,

Upvotes: 2

Views: 697

Answers (1)

B0ltz
B0ltz

Reputation: 425

For some reason, you can't listen on the app_initialized.NotebookApp event when you use the require('base/js/events') function.

The app_initialized.NotebookApp event is still fired if you look the notebook static/notebook/js/main.js code.

but you have to listen at this event using the define() function from requireJS:

define([
  'base/js/namespace',
  'base/js/events'
], function(IPython, events) {
   events.on('app_initialized.NotebookApp', function() {
     // Your Code
   });
});

Here your callback will be executed.

If you put in your custom.js :

 require(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('require & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
        console.log('require & app_initialized.NotebookApp');
     });
 });

 define(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('define & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
         console.log('define & app_initialized.NotebookApp');
     });
 });

The result in the console will be :

define() & app_initialized.NotebookApp
define() & notebook_loaded.Notebook
require() & notebook_loaded.Notebook

I guess that with the require() you register to an event that had already happen...

require() is waiting for all dependencies and submodules to be intialized... which might be too late for the app_initialized.NotebookApp event.

Upvotes: 3

Related Questions