Why doesn't my template get rendered when I post from JavaScript?

Phoenix Forum Questions / Help
, ,
1

I have a function called create(conn, params) in my controller that gets called when some data is posted to my server from a form on the client – the form was built using Phoenix templates.

All I do is extract some data from the params, do something with it, and then render another template in response.

Now I would like to write myself a little javascript helper function so that I can click something in my browser and have this data posted from JS – i.e., I just want to post the same data I would otherwise post, except without going through the form.

Everything seems to work, I can see the data arriving at my server, and the params are what I expect. But no response is ever rendered.

code inside my create(conn, params) function looks like this:

    IO.inspect("I get this far okay")
    conn
    |> put_flash(:info, "Found ID: #{the_id}")
    |> render("confirm_sheet.html", title: title, some_data: some_data)

I don’t see any error message on the server or client – it’s like my code just prints out “I get this far okay” and then vanishes into thin air.

But then if I go post the data from my form, I see the response in the confirm_sheet.html template as expected.

The only difference I can think of is that I am posting JSON instead of some other format. Here is the JS function that I am using to try to call my route:

<script>
    window.quick_post = function(gsheet_id) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:4000/sheets", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8');
        var to_send = JSON.stringify({
            "_csrf_token": "<%= Phoenix.Controller.get_csrf_token() %>",
            "sheet": {"the_id": the_id}
        });
        xhr.send(to_send);
    }
</script>

So what is happening here? How can a route give no error / warning and also no response?

2

Looking at your JS client code, what do you expect it to do? Seems to me that you told your client to send a request to the backend and then do nothing with the response. The response will not be automatically inserted or replaced into the DOM, you need to write the code to do that.

Keep your browser’s developer tool’s network console open while sending the request. You should see what the server responded. But if nothing is done with the response, then it will indeed “vanish into thin air”.

Now, if you want to replicate the behaviour of a browser’s form – i.e. once you have submitted something, you are taken to a new page that completely replaces the old one – without using a form, you need to actually create a hidden form on the page and submit it in JS. Then it will act like a normal form was submitted. You can accomplish sort of the same thing with XMLHttpRequest by using the response HTML to replace the entire page HTML and updating the URL, but it’s not entirely the same thing.

2 Likes
3

okay, thanks – this is just what I needed to know to make some progress.

I guess I was just expecting the browser to do whatever it automatically does when it gets a response from the webserver – i.e., render the response. I didn’t realize that I also had to handle the response in my JavaScript.

4

The browser does not do anything by default for requests sent from JavaScript, i.e. XMLHttpRequest or Fetch API. That’s entirely manual for you to implement. The easiest way to simulate a normal form post is indeed to make an invisible form (with <input type="hidden"> elements), fill it with values, and submit it.

2 Likes