CODEWITHSUNDEEP
jqueryjupyter-notebookjupyter
user239874
user239874

Reputation: 33

Jupyter Notebook Extension - Loading HTML

I have written a jupyter notebook extension. It adds an item to the kernel menu that, when clicked, launches a modal dialogue containing a form.

That form is currently defined entirely in javascript. Eg, document.createElement("form"), etc. How could I instead define it in an HTML file and import that HTML into the javascript code? I have attempted to use jquery's load method like this:

var form = document.createElement("form");
form.id = "form";
$( "#form" ).load("form.html");

where form.html is in the same directory as the javascript code. However, nothing happens. No error is noted in the console. This behavior is consistent with the HTML file not being found. I believe _jupyter_nbextension_paths is not copying the HTML file along with the javascript file. As such, nothing is getting loaded.

I have looked through existing jupyter notebook extensions and have not found an example of someone importing html into their javascript code.

Upvotes: 2

Views: 438

Answers (1)

user239874
user239874

Reputation: 33

My ultimate solution involved having my html in a variable FORM_HTML passed into jquery and then displayed in a modal via jupyter's dialog library. It looks something like this

define([
  "base/js/dialog"
], function(dialog){
dialog.modal({
      title: "title",
      body: $(FORM_HTML),
      open: onModalOpen,
      buttons: {
        Exit: {id: EXIT_BUTTON_ID},
      }
    });
})

Upvotes: 1

Related Questions