{"id":96,"date":"2020-08-05T16:59:00","date_gmt":"2020-08-05T21:59:00","guid":{"rendered":"https:\/\/www.grizzly-hills.com\/?p=96"},"modified":"2020-08-05T16:59:00","modified_gmt":"2020-08-05T21:59:00","slug":"jupyter-widgets-sending-custom-event-to-frontend-from-backend","status":"publish","type":"post","link":"https:\/\/www.grizzly-hills.com\/index.php\/2020\/08\/05\/jupyter-widgets-sending-custom-event-to-frontend-from-backend\/","title":{"rendered":"Jupyter Widgets: Sending Custom Event To Frontend From Backend"},"content":{"rendered":"\n<p>Jupyter Widgets can have a separate frontend and backend component. Sometimes, you need to send a message from one to the other. This example shows the basics on sending a message from the backend to the frontend.<\/p>\n\n\n<p>In your Widget&#8217;s frontend (JavaScript) code, listen for the custom event from the backend:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>    render: function() {\n        this.model.on('msg:custom', this.customEvent.bind(this));\n    },\n    customEvent: function(event) {\n        switch (event.type) {\n            case 'my_important_event':\n                console.log(event.value);\n                break;\n        }\n    }<\/code><\/pre>\n\n\n<p>Now, in the Widget&#8217;s backend (Python) code, send the message as needed:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>    def send_message_to_frontend(self):\n        self.send({\"method\": \"custom\", \"type\": \"my_important_event\", \"value\": \"blue\"})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Jupyter Widgets can have a separate frontend and backend component. Sometimes, you need to send a message from one to the other. This example shows the basics on sending a message from the backend to the frontend. In your Widget&#8217;s frontend (JavaScript) code, listen for the custom event from the backend: Now, in the Widget&#8217;s &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.grizzly-hills.com\/index.php\/2020\/08\/05\/jupyter-widgets-sending-custom-event-to-frontend-from-backend\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Jupyter Widgets: Sending Custom Event To Frontend From Backend&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[12,15,17],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-coding","category-jupyter-extensions","tag-javascript","tag-jupyter","tag-python"],"_links":{"self":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":0,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}