Collection

Browser interaction and APIs

Connect browser actions to server-side behavior.

Choose the task that matches what you need to do. The pages explain the relevant workflow and link to related guides and reference material. Examples use the local site garden; use your own site name and check the command’s scope before running it.

Start with the greeting model in Expose data through a model, then call it through browser messaging or HTTP. Use wires for declarative page actions and postbacks when an Erlang handler should respond to a form or button. These approaches can coexist on one page.

In this section

  1. 1Handle a browser event with a wireUse 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.
  2. 2Validate a form on both sidesUse semantic form controls with labels and meaningful names. Add Zotonic validators for immediate feedback, then validate the submitted values again at the server boundary.
  3. 3Use Cotonic and MQTT for browser messagingUse the existing Cotonic browser models and Zotonic MQTT bridge when components need to communicate through topics. First identify whether the topic stays inside the browser or crosses to the server.
  4. 4Expose an operation through an APIStart from the site's existing model API or controller patterns. Specify the method, input fields, response shape, and errors before connecting a browser or external client.
  5. 5Diagnose a failed browser interactionReproduce one action with the browser console and network panel open. Check for a JavaScript error before the request, a failed request, or a successful response that the page does not apply.