Dynamic select options using a wired template


Suppose you want to wire a change event for a select box to update a div based on the selected value i.e. you want to wire the action to use the selected value when rendering the template.


Readers are assumed to be comfortable editing templates and have Zotonic Scomp knowledge.


This is how the main template will look:

{% wire id="node_customer" type="change" action={ update target="mydiv" template="_items_list.tpl" }%}
<select name="node_customer" id="node_customer"> <option value="">--Select a Customer--</option>
{% for cid in m.search[{query cat="customer" sort='+rsc.pivot_title'}] %}
    <option value="{{cid}}"> {{ m.rsc[cid].title }}</option>
{% endfor %}
<select name="item_list" id="item_list">
  <option value="">--Select an item--</option>
  <div id="mydiv">
  {# this is where we dynamically update our template #}

So, when an item is selected (on change) “mydiv” will be replace by _item_list.tpl which looks like this:

{% for itemid in m.search[{query cat="node" hasobject=[q.triggervalue, "node_customer"] sort='+rsc.pivot_title'}] %}
  <option value="{{itemid}}"> {{ m.rsc[itemid].title }}</option>
{% endfor %}

This template uses the q.triggervalue returned from the postback of the wire event to query for items of category “node” that have q.triggervalue as the object id and a predicate of “node_customer”.

This example shows one way of using the q.triggervalue to dynamically render templates after the main template has been rendered.

Table Of Contents

Previous topic

Site-specific signup actions

Next topic

Customizing the layout of an admin edit page