按下出貨按鈕，連結到彈跳視窗（⬇️ 如下圖）。
彈跳視窗為RESTful行為的update，方法為patch/put ，action 為/admin/orders/:id ，所以需要代入:id參數。
全部的出貨按鈕共用一個彈跳視窗，只能夠過javascript 渲染。
上面為訂單列表的html，⬇️ 下圖為 html（slim）所對應的畫面。
除了 tbody 的內容使用 dataTable 渲染以外，上面還有出現 = modal(…) 以及 = datatable_select_tag(…) 的地方，分別為彈跳視窗及下拉式選單的元件。
- modal 元件：
modal 元件將header、body、Footer 切成三個部分，並且將header、Footer 寫完，body 的部分提供客製化。
這樣寫會遇到一個問題，出貨（確定）按鈕會在form tag。
w3c因為提供了解法，解法為對表單給予id，並且在按鈕寫上form屬性，這方面要顧全。
調整之後的寫法 ⬇️：
這邊使用bootstrap 附帶的 jquery 方法操作彈跳視窗。若要使用stimulus controller 操作彈跳視窗可以參考下列文章
- select-tag 下拉式選單：
出貨按鈕共用彈跳視窗，不像新增頁面一樣，編輯頁面需要傳入id值進來，傳統的作法為使用js.erb 渲染進去，然而現在可以使用stimulus進行渲染。
stimulus做的事情很簡單，先取得子訂單號碼，再將網址列填入action屬性。
首先在欲觸發openModal的按鈕需填入data屬性data-action='orders#openModal'並點擊按鈕後， openModal 即會觸發。
Stimulus 的官網寫到，觸發action動作，預設帶入的第一個參數為event，我們使用event.target 就可以取得觸發按鈕的DOM元素。
An action method is the method in a controller which serves as an action’s event listener. The first argument to an action method is the DOM event object. You may want access to the event for a number of reasons
補充一下關於Event的常見用法，分為物件屬性與物件方法。物件屬性(Read Only) 一共有下列這幾種：
- currentTarget: 目前的事件對象
- target: 分派事件的原始對象
- type: 事件的類型，共有數十種
- bubbles: 冒泡狀態，布林值，true代表會在DOM中往上冒泡
- cancelable: 事件是否為可取消的，布林值
而常見的物件方法有下列兩種
- preventDefault(): 若事件可取消（cancelable），則取消事件的預設行為
- stopPropagation(): 停止事件的傳播行為
event.target 在這邊扮演很重要的角色，我們若要使用modal實作edit頁面，能不能取得當前event.target為很重要的關鍵。
下圖為Stimulus 官網 提到的event用法，可以參考
dataTable
dataTable 的部分只安裝javascript套件，不安裝額外的 gem就已經可以很方便的使用
- 來源：github
- 安裝 dataTable
yarn add datatables- webpack 載入 dataTable
- 專案裡面使用 dataTable（使用stimulus）
Stimulus 前端渲染：
- serverSide：設定 true 使其可以用 Ajax 互動
- rowCallback：每一欄重新渲染
- datetable 與 Datatable 的差別：在使用 table.ajax.reload() 時會有不同，若使用datetable執行則需要使用 table.api().ajax.reload()，其中
table為datatable的實體。
- 使用 ransack
