Wires
Wires are the older way to code actions and client/server interaction. It is now advised to use MQTT topics with mod_mqtt instead.
Actions
The action defines what should happen when the wire is triggered. Actions can be client-side (such as JavaScript animations) or server-side postbacks.
Trigger actions from JavaScript
To trigger an action from an HTML element, you attach a wire to the element:
<a href="#" id="link">Click me!</a>
{% wire type="click" id="link" action={fade_out target="link"} %}
The wire’s id value must match the id value of the HTML element. This
wires up a link with a fade_out action, so that when the link
is clicked, it fades away.
Actions can be called from the template, but can also be called when some server-side event occurs.
Server postbacks
Postbacks are server-side actions. For instance, to submit a form asynchronously through Ajax, use a postback:
{% wire type="submit" id="myform" postback="form_submitted" delegate="mysite" %}
<form id="myform" method="post" action="postback">
<input name="username" />
<button>Submit form</button>
</form>
This will submit the form over Ajax; the result is that a function will be
called in the specified delegate module mysite.erl, called event/2:
event(#submit{}, Context) ->
io:format("The value of 'username' is: ~s~n", z_context:get("username", Context),
Context.
Trigger browser actions from the server
Named actions
If you want to trigger actions from your JavaScript code, give the action a name:
{% wire name="my_action" action={growl text="Hello World"} %}
You can then refer to it in your JavaScript code:
z_event("my_action");
And pass arguments to the action:
z_event("my_action", { foo: bar });
The argument foo will become a query argument, that you can access in your
Erlang module with z_context:get_q(foo, Context).
Auto-generated identifiers
If you include a template many times (i.e. from a for loop), then having fixed element identifiers are no good. Zotonic provides a mechanism to generate an identifer which has a unique value within the template.
To prefix the id with a unique value (per invocation of the
template) prefix the id with a #-sign:
<div id="{{ #foo }}">
This special notation will replace #foo with an auto-generated
identifer, which will expand to something like this:
<div id="ubifgt-foo">
Unique ids can also be generated inside a for loop:
{% for id in mylist %}
<li id="{{ #foo.id }}">{{ id.title }}</li>
{% endfor %}
This will generate HTML like this:
<li id="gdjqa-foo-1234">Some great news</li>
When using a wire tag, that same unique id can be referenced:
{% for id in mylist %}
<li><a id="{{ #list.id }}" href="#">{{ m.rsc[id].title }}</a></li>
{% wire id=#list.id action=some_action %}
{% endfor %}