Call the new action from a controller with javascript

Questions & Help Questions
, ,
6

Sounds like you want something like a modal rather than a submittable form.

See Considerations for Styling a Modal (demo) to see how the HTML/CSS/JS elements interact to achieve the basic desired result with vanilla JS. Of course you are going to still have to add:

  • the input fields (and a cancel button)
  • the dayClick code to fetch the data from Phoenix with fetch (some people prefer axios)
  • the handler for the returned promise that populates and opens the modal when the response arrives.
  • The JS code to send the updated information to Phoenix when the modal is closed (but not canceled).

For improved performance you may want to consider having all the detailed information relating to any dates already on the screen inside the browser so that you can grab the information from there and only send the changes back to Phoenix while you update your local copy.

For example TodoMVC maintains an array of todo objects as a model (though in your case use of LocalStorage would be overkill) - any information in the DOM is simply a copy of information inside that client side model.

There is an example todo backend implementation with an older version of Phoenix here (demo).

In particular look at the router.ex and todo_controller.ex.

In general I wouldn’t pay any attention to the JavaScript client used here because it’s ancient. It uses Backbones.js fetch.