読者です 読者をやめる 読者になる 読者になる

spring of life

技術、ときどき日常のブログ(予定)

bootbox でエラーを通知する

javascript

家計簿のアプリで bootstrap は前から使っててお世話になってるんだけど、入力エラーを通知しようとした時の alert を bootstrap で作ろうとしたら意外とめんどかった(´・_・`)

まぁ http://getbootstrap.com/components/#alerts とかあるんだけど、ポップアップで通知したかったんだよね〜

で、いろいろ調べてたら bootbox ってのがあったので使ってみた

Bootbox.js — alert, confirm and flexible dialogs for the Bootstrap framework

ちゃんと Rails アプリ用に bootbox-rails っていう gem があるのでこれをインストール

# Gemfile
...
gem 'bootbox-rails'
...

そして、application.js に設定

# app/assets/javascripts/application.js
...
//= require bootbox
...

これで使えるようになる

で、自分の場合は、フォームの内容を登録するリクエストを ajax で送って、内容が不正だったらポップアップで通知する、っていうのを作った

$ ->
  $('#hoge')
    .on 'ajax:error', (event, xhr, status, error) ->
      bootbox.alert({
        message: '<div class="text-center alert alert-danger">fuga</div>',
      })

まぁだいたいこんな感じで message に html を入れてその中に bootstrap で用意されているクラスを指定すればポップアップに反映される



あと、ついでにtype="reset"のボタンを作れば入力フォームを全て空欄にできる

<input type="reset".../>

それと、required="required"を入れればその入力項目は必須になる(html5

<input required="required".../>

Rails の場合は

<%= f.text_field :hoge, {:required => true} %>

みたいな感じ