Phoenix - отправка формы со стороны клиента и предотвращение перезагрузки страницы - PullRequest
Новая
       13

Phoenix - отправка формы со стороны клиента и предотвращение перезагрузки страницы

0 голосов
/ 02 июля 2018

В моем шаблоне pug есть форма, которая работает и отправляется в обычном режиме, используя функцию отправки моего контроллера Phoenix. Я не хочу перезагружать или перенаправлять страницу, поэтому я решил использовать запрос AJAX для отправки формы.

Это форма: 

=form_for @invoice_changeset, adaptive_invoice_path(@conn, :update, @adaptive, @invoice), [as: :invoice, method: :put, id: 'add-invoice-remarks-form'], fn f ->
  .form-group
    .label Remarks
    = textarea f, :remarks, id: "remarks-area", role: "add-invoice-remarks", class: "textarea", placeholder: "Add Notes here (enter to submit)"
  .form-group
    = submit "Submit", class: "btn btn-primary btn-block"

Это функция в моем контроллере, которая обрабатывает отправку формы. Работает нормально, но обновляет страницу. 

def update(%Plug.Conn{assigns: %{adaptive: adaptive}} = conn, %{
      "id" => id,
      "invoice" => invoice_params
    }) do
  {:ok, invoice} = Billing.find_invoice(%{"id" => id})

  case Billing.update_invoice(invoice, invoice_remarks) do
    {:ok, invoice} ->
      conn
      |> put_flash(:info, "Invoice update successful!")
      |> redirect(to: adaptive_invoice_path(conn, :show, adaptive, invoice))

    {:error, _changeset} ->
      conn
      |> put_flash(:error, "Something went wrong while adding remarks!")
      |> redirect(to: adaptive_invoice_path(conn, :show, adaptive, invoice))
  end
end

Я пытался перехватить форму и отправить ее с помощью AJAX и onmount , но я получил Phoenix.Router.NoRouteError после нажатия кнопки отправки, даже если у меня правильный маршрут. 

import { post } from '../../api'

onmount('[role="add-invoice-remarks"]', function () {
  const $form = $('#add-invoice-remarks-form')
  $form.on('submit', e => {
    e.preventDefault()

    const action = $form.attr('action')

    const invoiceParams = {
      remarks: $form.find('#remarks-area').val()
    }

    post(
      action,
      {
        invoice: invoiceParams
      },
      _ => {
        show_flash(success_content())
      },
      response => {
        show_flash(fail_content(response))
      }
    )
  })
})

Я что-то пропустил?

1 Ответ

0 голосов
/ 02 июля 2018

Вы отправляете запрос POST на маршрут, который ожидает запрос PUT.

Вам нужен параметр _method="put" в дополнение к параметрам счета.

Что-то вроде: 

{
  invoice: invoiceParams,
  _method: "put"
}
...