API with update using jQuery.ajax

Hello,

I have a page with a button “Save” (#room-socket-save-changes) and a select (#room-socket-select) which contains id.
There’s a content of some files below.
router.ex

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/api", MdbmsWeb, as: :api do
    pipe_through :api

    scope "/v1", Api.V1, as: :v1 do
      resources "/room_sockets", Room_socketController, only: [:index, :show, :update]
    end
  end

room_socket

  schema "room_sockets" do
    field :name, :string
    belongs_to :room, Mdbms.Room, foreign_key: :room_id
    has_one :connection, Mdbms.Connection

    timestamps()
  end

room_socket_controller.ex

  def update(conn, %{"id" => id, "name" => name, "room_id" => room_id}) do
    room_socket_params = %{"name" => name, "room_id" => room_id}
    room_socket = Repo.get!(Room_socket, id)
    changeset = Room_socket.changeset(room_socket, room_socket_params)

    case Repo.update(changeset) do
      {:ok, post} ->
        conn
        |> put_flash(:info, "Post updated successfully.")
      {:error, changeset} ->
        # render(conn, "edit.html", post: post, changeset: changeset)
    end
  end

app.js

  $('#room-socket-save-changes').on('click', function() {
    var room_socket_id = $('#room-socket-select').val();
    var name = $('#input-rs-name').val();
    var room_id = $('#select-rs-locations').val()

    $.ajax({
      type: 'PUT',
      url: '/api/v1/room_sockets/' + room_socket_id,
      data: {
        name: name,
        room_id: room_id
      },
      dataType: "json",
      success: function() {
        alert("success!");
      },
      error: function() {
        alert('error!');
      }
    });
  });

When I click button “Save” I get alert “error!” and an error shows in my terminal:

[error] #PID<0.463.0> running MdbmsWeb.Endpoint (cowboy_protocol) terminated
Server: localhost:4000 (http)
Request: PUT /api/v1/room_sockets/1
** (exit) an exception was raised:
    ** (ArgumentError) flash not fetched, call fetch_flash/2
        (phoenix) lib/phoenix/controller.ex:1236: Phoenix.Controller.get_flash/1
        (phoenix) lib/phoenix/controller.ex:1218: Phoenix.Controller.put_flash/3
        (mdbms) lib/mdbms_web/controllers/api/v1/room_socket_controller.ex:1: MdbmsWeb.Api.V1.Room_socketController.action/2
        (mdbms) lib/mdbms_web/controllers/api/v1/room_socket_controller.ex:1: MdbmsWeb.Api.V1.Room_socketController.phoenix_controller_pipeline/2
        (mdbms) lib/mdbms_web/endpoint.ex:1: MdbmsWeb.Endpoint.instrument/4
        (phoenix) lib/phoenix/router.ex:278: Phoenix.Router.__call__/1
        (mdbms) lib/mdbms_web/endpoint.ex:1: MdbmsWeb.Endpoint.plug_builder_call/2
        (mdbms) lib/plug/debugger.ex:122: MdbmsWeb.Endpoint."call (overridable 3)"/2
        (mdbms) lib/mdbms_web/endpoint.ex:1: MdbmsWeb.Endpoint.call/2
        (plug) lib/plug/adapters/cowboy/handler.ex:16: Plug.Adapters.Cowboy.Handler.upgrade/4
        (cowboy) /osA/Elixir/mdbms/deps/cowboy/src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

I’ve tried some solutions but the error still shows up. Do you have any idea where I make a mistake?

1 Like

Try replacing

conn
|> put_flash(:info, “Post updated successfully.”)

in your controller

with

text conn, “OK”

1 Like

Thank you. It helped. The error disappeared and both fields are updated:

[info] PUT /api/v1/room_sockets/10
[debug] Processing with MdbmsWeb.Api.V1.Room_socketController.update/2
Parameters: %{"id" =&gt; "10", "name" =&gt; "test", "room_id" =&gt; "1"}
Pipelines: [:api]
[debug] QUERY OK source="room_sockets" db=1.3ms queue=0.4ms
SELECT r0."id", r0."name", r0."room_id", r0."inserted_at", r0."updated_at" FROM "room_sockets" AS r0 WHERE (r0."id" = $1) [10]
[debug] QUERY OK db=0.4ms queue=0.1ms
begin []
[debug] QUERY OK db=3.5ms
UPDATE "room_sockets" SET "name" = $1, "room_id" = $2, "updated_at" = $3 WHERE "id" = $4 ["test", 1, {{2018, 9, 8}, {11, 1, 50, 353891}}, 10]
[debug] QUERY OK db=1.0ms
commit []

Unfortunately I still get an alert “error!” from my jQuery.ajax.

Check out the network tab in your developer console to see whats happening with the request. It might just be that you need to change the text reply type to a json one as shown below. It’s probably on the jquery side though at that point.

text conn, “OK”
json conn, %{}

1 Like

You’re right. I’ve changed that and it works fine now. Thanks again!

1 Like