{"result":{"depiction_url":null,"edges":{},"id":1592,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1592"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_frontend_template_select_value","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1592\/dynamic-select-options-using-a-wired-template","x-default":"https:\/\/zotonic.com\/cookbook\/1592\/dynamic-select-options-using-a-wired-template"},"preview_url":null,"resource":{"body":"
\n \n
\n\n
\n

Why<\/h2>\n

Suppose you want to wire a change event for a select box to update a\nanother select box, i.e. you want to wire the action to\nuse the selected value when rendering the template.<\/p>\n<\/div>\n

\n

Assumptions<\/h2>\n

Readers are assumed to be comfortable editing templates and have\nZotonic Scomp knowledge.<\/p>\n<\/div>\n

\n

How<\/h2>\n

We want to select an image from a page in 2 steps. First we select a page from the pages that have images. Then we select an image from the selected page.<\/p>\n

This is how the main template will look:<\/p>\n

<\/span><div class="form-group"><\/span>\n    <\/span>{%<\/span> wire<\/span> id<\/span>=<\/span>"pages"<\/span> type<\/span>=<\/span>"change"<\/span> action<\/span>={<\/span>update<\/span>\n        target<\/span>=<\/span>"media_list"<\/span>\n        template<\/span>=<\/span>"_media_list.tpl"<\/span>\n    }<\/span>%}<\/span><\/span>\n    <select id="pages" class="form-control"><\/span>\n        <option value="">--Select a page--<\/option><\/span>\n        <\/span>{%<\/span> for<\/span> page_id<\/span> in<\/span> m.search<\/span>[{<\/span>query<\/span>\n            hasobjectpredicate<\/span>=<\/span>'depiction'<\/span>\n            sort<\/span>=<\/span>'+rsc.pivot_title'<\/span>\n        }]<\/span> %}<\/span><\/span>\n            <option value="<\/span>{{<\/span> page_id<\/span> }}<\/span>"><\/span>\n                <\/span>{{<\/span> m.rsc<\/span>[<\/span>page_id<\/span>]<\/span>.title<\/span> }}<\/span><\/span>\n            <\/option><\/span>\n        <\/span>{%<\/span> endfor<\/span> %}<\/span><\/span>\n    <\/select><\/span>\n<\/div><\/span>\n<div id="media_list"><\/span>\n    <!- contents will be updated --><\/span>\n<\/div><\/span>\n<\/pre><\/div>\n<\/div>\n
When an item is selected (by the change event), element with id “media_list” will be replaced by _media_list.tpl<\/span><\/code> which looks like this:<\/p>\n
<\/span>{%<\/span> with<\/span> q.triggervalue<\/span> as<\/span> page_id<\/span> %}<\/span><\/span>\n<div class="form-group"><\/span>\n    <select class="form-control"><\/span>\n        <option value="">--Select an image--<\/option><\/span>\n        <\/span>{%<\/span> for<\/span> media_id<\/span> in<\/span> m.rsc<\/span>[<\/span>page_id<\/span>]<\/span>.media<\/span> %}<\/span><\/span>\n            <option value="<\/span>{{<\/span>media_id<\/span>}}<\/span>"><\/span>\n                <\/span>{{<\/span> m.rsc<\/span>[<\/span>media_id<\/span>]<\/span>.title<\/span> }}<\/span><\/span>\n            <\/option><\/span>\n        <\/span>{%<\/span> endfor<\/span> %}<\/span><\/span>\n    <\/select><\/span>\n<\/div><\/span>\n{%<\/span> endwith<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
This template uses the q.triggervalue returned from the postback of\nthe wire event, and it contains the value of the selected option.<\/p>\n
We can go one step further to show the selected image. _media_list.tpl<\/span><\/code> also gets a wire action:<\/p>\n
<\/span>{%<\/span> with<\/span> q.triggervalue<\/span> as<\/span> page_id<\/span> %}<\/span><\/span>\n<div class="form-group"><\/span>\n    <\/span>{%<\/span> wire<\/span> id<\/span>=<\/span>"images"<\/span> type<\/span>=<\/span>"change"<\/span> action<\/span>={<\/span>update<\/span>\n        target<\/span>=<\/span>"image"<\/span>\n        template<\/span>=<\/span>"_image.tpl"<\/span>\n    }<\/span>%}<\/span><\/span>\n    <select class="form-control" id="images"><\/span>\n        <option value="">--Select an image--<\/option><\/span>\n        <\/span>{%<\/span> for<\/span> media_id<\/span> in<\/span> m.rsc<\/span>[<\/span>page_id<\/span>]<\/span>.media<\/span> %}<\/span><\/span>\n            <option value="<\/span>{{<\/span>media_id<\/span>}}<\/span>"><\/span>\n                <\/span>{{<\/span> m.rsc<\/span>[<\/span>media_id<\/span>]<\/span>.title<\/span> }}<\/span><\/span>\n            <\/option><\/span>\n        <\/span>{%<\/span> endfor<\/span> %}<\/span><\/span>\n    <\/select><\/span>\n<\/div><\/span>\n<div id="image"><\/span>\n    <!- contents will be updated --><\/span>\n<\/div><\/span>\n{%<\/span> endwith<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
And we show the image using _image.tpl<\/span><\/code>:<\/p>\n
<\/span>{%<\/span> with<\/span> m.rsc<\/span>[<\/span>q.triggervalue<\/span>]<\/span>.medium<\/span> as<\/span> medium<\/span> %}<\/span><\/span>\n<div class="form-group"><\/span>\n    <\/span>{%<\/span> image<\/span> medium<\/span> width<\/span>=<\/span>300<\/span> %}<\/span><\/span>\n<\/div><\/span>\n{%<\/span> endwith<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n           <\/div>","category_id":{"id":318,"is_a":["meta","category"],"name":"cookbook","title":{"_type":"trans","tr":{"en":"Cookbook"}},"uri":"https:\/\/test.zotonic.com\/id\/318"},"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:27Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/frontend-template-select-value.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2022-02-15T10:01:42Z","modifier_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"name":"doc_cookbook_frontend_template_select_value","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:42Z","slug":"dynamic-select-options-using-a-wired-template","title":"Dynamic select options using a wired template","title_slug":"dynamic-select-options-using-a-wired-template","tz":"UTC","uri":null,"version":18,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1592","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1592"}},"status":"ok"}