Techioz Blog

ActiveAdmin フォームでエラーが発生すると、/new が URL から削除されます。

概要

モデルの管理ページを作成しています。新規フォームと編集フォームにエラーがある場合、/new が URL から削除されることに気付きました。

たとえば、私の URL が /my_model/新しい

エラーが発生すると、次のように変更されます /my_model

URLに基づいてカスタムJavaScriptを作成しているため、これを修正する方法はありますか? 新しい場合は何かをし、編集している場合は他のことをします

誰か修正方法を知っている人がいたら教えてください

アップデート:

自分が何をしているのか、何が問題を引き起こしているのか、もっと詳しい情報を提供するべきだったので、ActiveAdmin gemを使用して管理ページを作成しているモデルがあります

これが私のモデルです

class Task < ApplicationRecord
    validates :count, numericality: { greater_than_or_equal_to: 1, less_than_or_equal_to: 99 }, allow_nil: true
  end

私のアクティブな管理ページは次のようになります。

ActiveAdmin.register Task, as: "Tasks" do
  actions :all, except: [:destroy]
  menu label: "Tasks", parent: "Tasks Menu"

  permit_params :name, :count
  
  index do
    id_column
    column :name
    column :count
  end

  show do
    tabs do
      tab :basic do
        attributes_table do
          row :name
          row :count
        end
      end
    end
  end

  form do |f|
    f.semantic_errors *f.object.errors.keys

    f.inputs "Basic Details" do
      f.input :name     
      f.input :count

      f.actions
    end
  end
end

したがって、アイテムを開いたり、タスクを作成または更新しようとすると、URL は /admin/tasks/new または /admin/tasks/edit に移動します。

そのため、URL に基づいて JQuery を使用していくつかの変更を加える必要があるため、次のようなスクリプトを作成しました。

var window_location_elements = location.href.split("/");
var length = window_location_elements.length;


if(window_location_elements[length-1] === "edit" || window_location_elements[length-1] === "new"){
  // do something
}

したがって、入力に無効なカウントの値を入力した場合に問題が発生します。フォームにはエラーがあり、完全に表示されていますが、エラーが発生するとすぐにURLが切り替わるという奇妙なことが起こります。 :

/admin/tasks/new から /admin/tasks のみに変更 (編集も同様)

解決策

これは私の側の間違いでした。新しいフォームと編集フォームを URL に関連付けるだけだったので、JavaScript を機能させることだけを考えていましたが、そうではありません。フォームが有効でない場合、Rails と同様に、ActiveAdmin がフォームの作成と更新を処理します。フォームを再度レンダリングし、無効なフォーム送信に対する応答として送信します。

これを念頭に置き、これについて詳しく読むと、ActiveAdmin が DOM の body 要素を更新して、サーバーにそれがどのフォームであるかを知らせることがわかりました。

次に必要なのは、これを処理できるように JavaScript を更新することだけです。最終的な JavaScript は次のとおりです。

var bodyClassList = document.body.classList;

if ( bodyClassList.contains("edit") || bodyClassList.contains("new") ||
      bodyClassList.contains("update") || bodyClassList.contains("create") ) {
   // do something
}