{"id":107,"date":"2020-07-31T17:00:00","date_gmt":"2020-07-31T22:00:00","guid":{"rendered":"https:\/\/www.grizzly-hills.com\/?p=107"},"modified":"2020-07-31T17:00:00","modified_gmt":"2020-07-31T22:00:00","slug":"jupyter-widgets-sending-custom-event-to-backend-from-frontend","status":"publish","type":"post","link":"https:\/\/www.grizzly-hills.com\/index.php\/2020\/07\/31\/jupyter-widgets-sending-custom-event-to-backend-from-frontend\/","title":{"rendered":"Jupyter Widgets: Sending Custom Event To Backend From Frontend"},"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 frontend to the backend.<\/p>\n\n\n<p>In your Widget\u2019s backend (Python) code, listen for the custom event from the frontend:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>    def __init__(self, **kwargs):\n        super().__init__(**kwargs)\n        self.on_msg(self._handle_custom_msg)\n    def _handle_custom_msg(self, content, buffers):\n        if content&#91;'event'] == 'another_important_event':\n            print(content&#91;'value'])<\/code><\/pre>\n\n\n<p>Now, in the Widget\u2019s frontend (Javascript) code, send the message as needed:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>    sendMessageToBackend: function() {\n        this.model.send({event: 'another_important_event', value: 'green'});\n    },<\/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 frontend to the backend. In your Widget\u2019s backend (Python) code, listen for the custom event from the frontend: Now, in the Widget\u2019s &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.grizzly-hills.com\/index.php\/2020\/07\/31\/jupyter-widgets-sending-custom-event-to-backend-from-frontend\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Jupyter Widgets: Sending Custom Event To Backend From Frontend&#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-107","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\/107","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=107"}],"version-history":[{"count":0,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}