How to pass and use a success/failure response with AJAX - phoenix-framework

Question

I'm replacing the standard server-side form with AJAX. I have them working but now I would like to pass a success/error message from the server that I can use in the client.
My client AJAX code is:
var csrf = $('input.csrf').val();
$.ajax({
url: '/unauthmessages',
type: 'post',
data: { message: { name: name, message: message } },
headers: {
'X-CSRF-TOKEN': csrf
},
dataType: 'json',
success: function (data) {
console.log(data);
}
})
My controller action is:
def create(conn, %{"message" => message_params}) do
messageChangeset = Message.changeset(%Message{}, message_params)
case Repo.insert(messageChangeset) do
{:ok, _message} ->
conn
|> put_flash(:info, "Success")
|> redirect(to: "/us#vpageContactos")
{:error, messageChangeset} ->
vpage = "contactos"
render(conn, FabASA.PageView, "us.html", messageChangeset: messageChangeset, vpage: vpage)
end
end
How to change the controller / success function to pass/use success/error messages?

Answer 1

The render/redirects as you have above doesn't work as the AJAX considers the the response content as simple data which will be returned along with the success/error status, rather than pages that need to be displayed. Also, the redirect will be silently followed by the AJAX call, and you'll end up seeing the content of the page you're redirecting to as data rather than the browser page redirecting.
IMHO the best way to handle this is to return your intent as a JSON response, which the client side JS will know what to do with depending on the success/error status.
For example, you could return something like the following in your controller:
def create(conn, %{"message" => message_params}) do
messageChangeset = Message.changeset(%Message{}, message_params)
case Repo.insert(messageChangeset) do
{:ok, _message} ->
conn
|> put_flash(:info, "Success")
|> json(%{redirect_to: "/us#vpageContactos"})
{:error, messageChangeset} ->
conn
|> put_status(:bad_request)
|> json(errors_in(changeset))
end
end
# NOTE: The following should probably be in ErrorHelpers
defp errors_in(%{errors: errors}) do
translated_errors = for {field, message} <- errors, into: %{}, do: {field, MyApp.ErrorHelpers.translate_error(message)}
%{errors: translated_errors}
end
defp errors_in(_), do: %{}
Then, in your client side call, you can do something like:
var csrf = $('input.csrf').val();
$.ajax({
url: '/unauthmessages',
type: 'post',
data: { message: { name: name, message: message } },
headers: { 'X-CSRF-TOKEN': csrf },
dataType: 'json',
success: function(data) {
window.location.href = data.redirect_to;
},
error: function(xhr) {
var errors = xhr.responseJSON();
// Show the errors to the client
}
})