Call the new action from a controller with javascript

Phoenix Forum Questions / Help
, ,
1

Hello,
I am a complete jasvascript newbie so please bear with me.
I am using fullcalnedar.io to render a calendar in one of my views and I would like to prompt the new action from my appointment controller when I click on a date on the calendar. So i have to create a function that corresponds to the dayClick helper from the api that calls the new action in the controller and passes to it the start and end date. I know how to get the start date and the other details in javascrit I just don’t know how to make the call. should I use ajax? if so could you give me an example of how you would do it that I coul use as an example for then my other actions such as edit?
Thank you very much for your patience
Carlo

2

You can read about making requests from js using XMLHttpRequest here or fetch here.

For XMLHttpRequest it would be something like this, probably (adapted from https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest)

var xhr = new XMLHttpRequest();
var endpoint = "/api/calendar";
var payload = JSON.stringify({startDate: startDate, endDate: endDate});
xhr.open("POST", endpoint);

xhr.setRequestHeader("content-type", "application/json");

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

xhr.send(payload);

And for fetch (adapted from https://stackoverflow.com/questions/29775797/fetch-post-json-data)

fetch("/api/calendar", {
  headers: {
    "accept": "application/json",
    "content-type": "application/json"
  },
  method: "POST",
  body: JSON.stringify({startDate: startDate, endDate: endDate})
})
.then(function(resp) { console.log(resp) })
.catch(function(resp) { console.log(resp) })
1 Like
3

Doing what exactly?

You have to understand that once the page is loaded in the browser there is no inherent “connection” between the browser page and the Phoenix controller.

It is up to you to add this functionality through FullCalendar’s event hooks.

In dayClick you could simply set something like

location.href = 'http://localhost:4000/date/2018/03/01'

to navigate to a new page (see Window.location).

If you have your routes set up something like this:

date_path  GET     /date/:year/:month/:day  HelloWeb.DateController :edit

then that request would be routed to the DateController to generate the new page which would then be loaded in the browser.

2 Likes
4

Hi, thanks for taking the time, I really appreciate it :slight_smile:
I have set up everything like a normal crud app so my appointments have a form and the usual templates that call it with different parameters. I wanted to be able to click on a calendar day and prompt up the form with the dates already filled in corresponding to the day that I clicked. Now the ultimate goal woud be to have a small partial directly into the page with ajax but for now I’d be happy to click on a day and just get redirected to the form in a new page with hte relevant information preloaded.
Does that make my question a tad clearer? I am sorry for the messiness of the first post

5

If You just want to be redirected, You could use a normal link instead of a js link, passing some parameters along.

The idea of js link is not to have the page reloaded. You make a request, with fetch or ajax, and you receive data. With this data, You still need to update the Dom to reflect changes. This can be done by jquery, or vanilla js.

For your use case, I would look at drab library.

1 Like
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.

2 Likes
7

Hey,
Thanks for the help :slight_smile:
I’m looking into drab as it seems like a good way to limit the amount of js to write (not a big fan I’m afraid). I was wondering if i get how it works more or less correctly: Am I right in saying that I could assign to the dayClick event a call to a drab controller to which I pass the relevant data from the dom and then use the drab controller to call a the usual phoenix controller?
In this case i would say that I click on a day on the calendar, get the relevant dates, pass them on to the drab controller and then call the new action in the controller from there?

Thank you

8

BTW I solved my issue by using HTML local storage to pass the datetime data from the calendar to the form :slight_smile: thank you all for the help!