{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:47:56Z","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:47:56Z","object_id":{"id":326,"is_a":["meta","category"],"name":"template_action","title":"Actions","uri":"https:\/\/test.zotonic.com\/id\/326"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1510,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_show","title":"show","uri":"https:\/\/zotonic.com\/id\/1510"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1511,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_hide","title":"hide","uri":"https:\/\/zotonic.com\/id\/1511"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","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":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1302,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_server_browser_interaction","title":{"_type":"trans","tr":{"en":"Handle a browser event with a wire"}},"uri":"https:\/\/zotonic.com\/id\/1302"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":1323,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_live","title":"live","uri":"https:\/\/zotonic.com\/id\/1323"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","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}],"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-09-09T13:48:06Z","object_id":{"id":1323,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_live","title":"live","uri":"https:\/\/zotonic.com\/id\/1323"},"seq":1000000},{"created":"2026-09-09T13:48:06Z","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":"2026-09-09T13:48:06Z","object_id":{"id":1510,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_show","title":"show","uri":"https:\/\/zotonic.com\/id\/1510"},"seq":1000000},{"created":"2026-09-09T13:48:06Z","object_id":{"id":1511,"is_a":["text","documentation","reference","template_action"],"name":"doc_template_action_action_hide","title":"hide","uri":"https:\/\/zotonic.com\/id\/1511"},"seq":1000000},{"created":"2026-09-09T13:48:06Z","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":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":"2020-05-30T05:47:56Z","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:47:56Z","object_id":{"id":1403,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_wire_args","title":"wire_args","uri":"https:\/\/zotonic.com\/id\/1403"},"seq":1000000},{"created":"2020-05-30T05:47:56Z","object_id":{"id":326,"is_a":["meta","category"],"name":"template_action","title":"Actions","uri":"https:\/\/test.zotonic.com\/id\/326"},"seq":1000000}],"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-09-09T13:48:07Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:07Z","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-09-09T13:48:07Z","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":3},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-09-09T13:48:07Z","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":5},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":6}],"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":1327,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1327"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_wire","page_url":{"en":"https:\/\/zotonic.com\/docs\/1327\/wire","x-default":"https:\/\/zotonic.com\/docs\/1327\/wire"},"preview_url":null,"resource":{"version":3356,"pivot_location_lat":null,"title":"wire","is_authoritative":true,"body":"

Connect actions and events to a HTML element.<\/p>\n

The wire tag is the basis for most Ajax interaction on web pages. It allows to connect actions to HTML elements.\nExamples of Actions<\/a> are action#show<\/code><\/a> \/\naction#hide<\/code><\/a> elements or action#postback<\/code><\/a> to the server.<\/p>\n

Wire actions to an element<\/h2>\n

The primary use of wire is to connect an action to a HTML element or javascript event.<\/p>\n

Example:<\/p>\n

{% wire id="show" action={show target="message"} %}\n<a id="show" href="#">Click to show a message<\/a>\n<p style="display: none" id="message">Hello World!<\/p>\n<\/code><\/pre>\n
A click on the link will show the message “Hello World!”.<\/p>\n
Wire postbacks to the server<\/h2>\n
Wire can post an event back to the server. Use for this the “postback” argument:<\/p>\n
{% wire id="mybutton" postback={hello world="round"} %}\n<button id="mybutton">Post event to server<\/button>\n<\/code><\/pre>\n
When the button is clicked the event function of the page controller will be called as:<\/p>\n
event(#postback{message=Postback, trigger=TriggerId, target=TargetId}, Context).\n<\/code><\/pre>\n
Where “Postback” will be {hello, [{world,<<"round">>}]}<\/code> and both “TriggerId” and “TargetId” will be <<"mybutton">><\/code>.<\/p>\n
Wire form submit events<\/h2>\n
Wire is also used to connect a form to the event routine handling the form.<\/p>\n
Example:<\/p>\n
{% wire id="myform" type="submit" postback="some_tag" action={toggle target="message"} %}\n<form id="myform" method="post" action="postback">\n  <input type="text" name="title" value="" \/>\n  <button id="mybutton" type="submit">Submit<\/button>\n<\/form>\n<\/code><\/pre>\n
The wire tag redirects the submit of the form to the event routine of the controller. A submit will also toggle the\nvisibility of the “message” element on the page. Note that the action is “postback”, this is obligatory.<\/p>\n
The event routine will be called as:<\/p>\n
event(#submit{message=Tag, form=FormId, target=TargetId}, Context).\n<\/code><\/pre>\n
Where Tag will be the postback set by the wire tag (in the example the atom some_tag<\/code>) and FormId and TargetId are both\nthe HTML id of the submitted form. The posted input fields can be fetched using z_context:get_q\/2<\/code>,\nz_context:get_q_all\/1<\/code> or z_context:get_q_validated\/2<\/code>.<\/p>\n
Title = z_context:get_q(<<"title">>, Context),\nAllArgs = z_context:get_q_all(Context);\n<\/code><\/pre>\n
There are some extra arguments added to every form post:<\/p>\n
Post argument<\/th>Description<\/th>Example<\/th><\/tr><\/thead>
z_trigger_id<\/code><\/td>Id of the HTML element that triggered the submit.<\/td><<"mybutton">><\/code><\/td><\/tr>
z_pageid<\/code><\/td>Id of the page in the browser, used to connect comet and other communication between the browser and the server.<\/td><<"1uTsbzIsWqmPpF32">><\/code><\/td><\/tr>
postback<\/code><\/td>Signed postback set by the wire tag. Handled internally.<\/td><\/td><\/tr><\/tbody><\/table>\n
Wire to the page load or unload<\/h2>\n
A {% wire %}<\/code> without an id will bind the actions and\/or postback to the window instead of an element. Omitting a type\nas well will execute all actions and\/or postback on page load.<\/p>\n
Example:<\/p>\n
{% wire action={alert text="Welcome to this page."} %}\n<\/code><\/pre>\n
The type “unload” will execute all actions and\/or postback when leaving the page:<\/p>\n
{% wire type="unload" action={alert text="Bye."} %}\n<\/code><\/pre>\n
Call a wire action from JavaScript<\/h2>\n
Use {% wire name="myname" %}<\/code> to define a named action and trigger it from JavaScript with z_event("myname")<\/code>.\nSee: Wires<\/a>.<\/p>\n
Wire an action to a MQTT topic<\/h2>\n
Note<\/p>
module#mod_mqtt<\/code><\/a> must be enabled before wiring to a topic<\/p><\/div>\n
Use {% wire type={mqtt topic=... topic=...} %}<\/code> to connect to one or more MQTT topics.<\/p>\n
Example:<\/p>\n
{% wire type={mqtt topic="~site\/public\/hello"} action={growl text="hello"} %}\n<\/code><\/pre>\n
And in Erlang this will trigger the above growl<\/em>:<\/p>\n
z_mqtt:publish(<<"~site\/public\/hello">>, <<>>, z_acl:sudo(z:c(mysite))).\n<\/code><\/pre>\n
See also scomp#live<\/code><\/a><\/p>\n
Arguments<\/h2>\n
The wire tag accepts the following arguments:<\/p>\n
Argument<\/th>Description<\/th>Example<\/th><\/tr><\/thead>
id<\/code><\/td>HTML id of the element the action gets connected to. When the id is not given then the event is bound to the window.<\/td>id=”mybutton”<\/code><\/td><\/tr>
type<\/code><\/td>The type of the event triggering the action. Defaults to “click”. Other types are: “enterkey”, “interval”, “continuation”, “submit” or one of the jQuery events “blur”, “focus”, “load”, “resize”, “scroll”, “unload”, “beforeunload”, “click”, “dblclick”, “mousedown”, “mouseup”, “mousemove”, “mouseover”, “mouseout”, “mouseenter”, “mouseleave”, “change”, “select”, “keydown”, “keypress”, “keyup” or “error”.  The types can be extended by modules using the #action_event_type<\/code> notification. The type must be a tuple, an example is the {mqtt topic=...}<\/code> type provided by module#mod_mqtt<\/code><\/a><\/td>type=”submit”<\/code><\/td><\/tr>
propagate<\/code><\/td>Specify this when you don’t want the event to be canceled after handling the wire. Useful for event types like focus, click etc. .. versionadded:: 0.6.1<\/td>propagate<\/code><\/td><\/tr>
target<\/code><\/td>Possible target for the action. The meaning of this argument depends on the action, defaults to id.<\/td><\/td><\/tr>
action<\/code><\/td>Action wired to the element. This parameter can be repeated to wire more than one action at a time. The value is a single or a list of action records.<\/td>action={toggle target="message"}<\/code><\/td><\/tr>
postback<\/code><\/td>Postback that will be sent to the event handler of the controller or the delegate. Either a string, which will be sent as an atom, or a tagged property list. The example will be in Erlang {myevent, [{foo,1},{bar,2}]}<\/code>.<\/td>postback="ajaxevent" postback={myevent foo=1 bar=2}<\/code><\/td><\/tr>
delegate<\/code><\/td>Name of the Erlang module that will receive the postback. Defaults to the controller that handled the page request.<\/td>delegate="event_handler"<\/code><\/td><\/tr><\/tbody><\/table>","slug":"wire","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"2068e839f3315520d41ff64bd2c609cf94c5290da553e498e7041f5736c334c7","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_wire.erl","publication_start":"2023-01-30T19:23:59Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_wire.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_wire","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:18Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_wires","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"c19e5c894d3bd01b57581e2af43e176d42c6877a\n","erlang_module":"scomp_wires_wire","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-08T10:41:04Z","title_slug":"wire"},"uri":"https:\/\/zotonic.com\/id\/1327","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1327"}},"status":"ok"}