API with update using jQuery.ajax

Phoenix Forum Questions / Help
, ,
1

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
2

Try replacing

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

in your controller

with

text conn, “OK”

1 Like
3

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.

4

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, %{}

2 Likes
5

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

1 Like