{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:50Z","object_id":{"id":1327,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_wire","title":"wire","uri":"https:\/\/zotonic.com\/id\/1327"},"seq":1}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"in_module":{"objects":[{"created":"2020-05-30T05:48:20Z","object_id":{"id":1303,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_wires","title":"mod_wires","uri":"https:\/\/zotonic.com\/id\/1303"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"references":{"objects":[{"created":"2020-05-30T05:48:20Z","object_id":{"id":1324,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_mqtt","title":"mod_mqtt","uri":"https:\/\/zotonic.com\/id\/1324"},"seq":1000000},{"created":"2020-05-30T05:48:20Z","object_id":{"id":1512,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_fade_out","title":"fade_out","uri":"https:\/\/zotonic.com\/id\/1512"},"seq":1000000},{"created":"2020-05-30T05:48:20Z","object_id":{"id":1327,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_wire","title":"wire","uri":"https:\/\/zotonic.com\/id\/1327"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-10-07T11:13:01Z","object_id":{"id":1327,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_wire","title":"wire","uri":"https:\/\/zotonic.com\/id\/1327"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2026-10-07T11:13:50Z","object_id":{"id":2967,"is_a":["text","documentation","developerguide"],"name":"developer_browser_debugging","title":{"_type":"trans","tr":{"en":"Diagnose a failed browser interaction"}},"uri":"https:\/\/zotonic.com\/id\/2967"},"seq":1},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2960,"is_a":["text","documentation","developerguide"],"name":"developer_model_api","title":{"_type":"trans","tr":{"en":"Expose data through a model"}},"uri":"https:\/\/zotonic.com\/id\/2960"},"seq":2},{"created":"2026-10-07T11:13:50Z","object_id":{"id":1536,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_access_control","title":{"_type":"trans","tr":{"en":"Keep permission checks at the boundary"}},"uri":"https:\/\/zotonic.com\/id\/1536"},"seq":3},{"created":"2020-05-30T05:48:20Z","object_id":{"id":1340,"is_a":["text","documentation","cookbook"],"name":"doc_cookbook_custom_action","title":{"_type":"trans","tr":{"en":"Create a reusable browser action"}},"uri":"https:\/\/zotonic.com\/id\/1340"},"seq":4},{"created":"2020-05-30T05:48:20Z","object_id":{"id":1630,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_postback","title":"postback","uri":"https:\/\/zotonic.com\/id\/1630"},"seq":5},{"created":"2020-05-30T05:48:20Z","object_id":{"id":326,"is_a":["meta","category"],"name":"template_action","title":"Actions","uri":"https:\/\/test.zotonic.com\/id\/326"},"seq":6}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-10-07T11:13:50Z","object_id":{"id":2554,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_how_to_guide","title":"How-to guide","uri":"https:\/\/zotonic.com\/id\/2554"},"seq":1},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":3},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2624,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_wire_action","title":"Wire action","uri":"https:\/\/zotonic.com\/id\/2624"},"seq":4},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":5},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2582,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_forms","title":"Forms","uri":"https:\/\/zotonic.com\/id\/2582"},"seq":6},{"created":"2026-10-07T11:13:50Z","object_id":{"id":2670,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_erlang_otp","title":"Erlang\/OTP","uri":"https:\/\/zotonic.com\/id\/2670"},"seq":7}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1539,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1539"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_developerguide_wires","page_url":{"en":"https:\/\/zotonic.com\/docs\/1539\/handle-a-browser-event-with-a-wire","x-default":"https:\/\/zotonic.com\/docs\/1539\/handle-a-browser-event-with-a-wire"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"

Use scomp#wire<\/code><\/a> to connect a browser event to an action or a server postback. Give the target element a stable ID within the rendered page.<\/p>\n

<button id="show-help" type="button">{_ Show help _}<\/button>\n<div id="garden-help" style="display:none">{_ Choose a sunny spot. _}<\/div>\n{% wire id="show-help" action={show target="garden-help"} %}\n<\/code><\/pre>\n
Use a server postback when the action needs server data or writes content. A client-side action alone cannot authorize a write. Check the browser console and the server logs when an event appears to do nothing.<\/p>\n
Use a base template with the standard JavaScript includes and a final {% script %}<\/code>; enable mod_wires<\/code> on the site. Put the example inside its content block. Click Show help<\/strong> and expect the hidden text to appear without navigation. If this partial can appear twice, use generated template IDs such as #show_help<\/code> rather than repeating the literal ID.<\/p>\n
Handle a postback on the server<\/h2>\n
Use the active Garden module as the delegate. Add this header, export, and callback to mod_garden.erl<\/code>, merging with declarations and event clauses already present:<\/p>\n
-include_lib("zotonic_core\/include\/zotonic.hrl").\n-export([event\/2]).\n\n-spec event(Event, Context) -> z:context()\n    when Event :: #postback{}, Context :: z:context().\nevent(#postback{message = {garden_hello, []}}, Context) ->\n    z_render:growl(?__("Welcome to the garden", Context), Context).\n<\/code><\/pre>\n
In a page with the standard JavaScript includes, mod_wires<\/code>, and a final {% script %}<\/code>:<\/p>\n
<button id="garden-hello" type="button">{_ Say hello _}<\/button>\n{% wire id="garden-hello" postback={garden_hello} delegate=`mod_garden` %}\n<\/code><\/pre>\n
Compile and load the module, reload the page, and click the button. Expect the greeting notification. The returned context contains the queued browser response; returning the original context after another response call can lose that response.<\/p>\n
This public example changes no stored data. For a write, read only supported binary query keys, validate input, and authorize with the supplied context before calling a model. A signed postback does not make arbitrary form values trustworthy. A form submit delivers #submit{}<\/code>, not #postback{}<\/code>.<\/p>"}},"category_id":{"id":317,"is_a":["meta","category"],"name":"developerguide","title":"Developer guide","uri":"https:\/\/zotonic.com\/id\/developerguide"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:25Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[1327],"relation":[1536,2960,2967],"subject":[2554,2563,2582,2583,2624,2670,2673]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/developer-guide\/wires.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T11:14:04Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_developerguide_wires","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:26Z","slug":"handle-a-browser-event-with-a-wire","summary":{"_type":"trans","tr":{"en":"Use scomp#wire to connect a browser event to an action or a server postback. Give the target element a stable ID within the rendered page."}},"title":{"_type":"trans","tr":{"en":"Handle a browser event with a wire"}},"title_slug":{"_type":"trans","tr":{"en":"handle-a-browser-event-with-a-wire"}},"tz":"UTC","uri":null,"version":48,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1539","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1539"}},"status":"ok"}