【Rails/Bootstrap/modal】rails bootstrapのmodalをajaxで操作する

とあるアーティストの曲を取得したい場合を考える　 「曲の一覧」というリンクをクリックすると そのアーティストの一覧を取得して、曲の一覧をモーダルで出す。

index.haml：曲の一覧を表示する

%a.open_modal{disable: true, id: @artist.id}
  曲の一覧

- content_for :modal do
  = render 'modal'

- @content_for_javascript = capture do
  = javascript_include_tag "open_moadl"

application.haml：モーダルを読み込むようのyieldを追記

= yield :modal

artists_controller.rb：ajaxで叩かれるURLを追加

def show_songs
    respond_to do |format|
      songs = Artist.find(params[:artist_id]).songs
      format.json { render json: { songs: songs } }
    end
end

open_moadl.coffee：クリック時にajaxを呼び、返ってきた結果を追加して、modalを表示する　＋　閉じるボタンで閉じる挙動

$ ->
   $(".open-modal").click ->
    $.ajax
      async: true
      type: "GET"
      url: '/artists/show_songs.json'
      dataType: 'json'
      data: {
        artist_id: $(this)[0].id;
      }
      success: (result, status, xhr) ->
        $.each result['songs'], ->
          console.log(this)
          if this
            $('#songs_table').append('<tr><td>' + this['name'] + "</td><td>" + this['year'] + '</td></tr>')
        $("#songs-modal").modal()

  $(".close-songs-modal").click ->
    $("#songs-modal").modal("hide")

_moadl.haml：モーダルの画面イメージ

#ongs-modal.modal.fade{tabindex: "-1"}
  .modal-dialog.modal-lg{role: "document"}
    .modal-content
      .modal-header
        %h3
      .modal-body
        .col-md-12
          %table.table.table-striped.table-bordered.ma-top-10#songs_table
            %thead
              %tr
                %th.ta-center 曲名
                %th.ta-center 発売年
            %tbody
      .modal-footer
        %button.btn.btn-primary.close-promotion-modal 閉じる