Aipoで一覧削除の処理の流れ

Aipoの一覧削除時の動作の流れについて解説します。

ToDoのカテゴリ削除を例に見てみます。

https://github.com/aipocom/aipo/blob/master/portlets/todo/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-todo-category-list.vm#L36

削除ボタンのタグは以下のmacroで生成されています。

#AUIajaxbuttonCheckboxDelete($l10n.TODO_DELETE "$!jslink.getPortletById($!portlet.ID).addQueryData('template','ToDoCategoryFormJSONScreen').addQueryData('mode','multi_delete')" "$indicator_id" "$!portlet.ID" "aipo.todo.onListReceiveMessage")

macroの中身は以下になります。

https://github.com/aipocom/aipo/blob/master/war/src/main/webapp/WEB-INF/templates/vm/GlobalMacros.vm#L1598

#macro(AUIajaxbuttonCheckboxDelete $name $url $indicator_id $portlet_id $rt)
<a name="ajaxbuttonCheckboxDelete" class="auiButton" onclick="aimluck.io.ajaxCheckboxDeleteSubmit(dojo.byId('dummy_btn_auiajaxbuttoncheckboxdelete$portlet_id'), '$!utils.escapeXML($url)', '$indicator_id', '$portlet_id', $rt);">$name</a>
<input type="hidden" id="dummy_btn_auiajaxbuttoncheckboxdelete$portlet_id" value="" />
#end

削除ボタンをクリックすると、

aimluck.io.ajaxCheckboxDeleteSubmit

が呼ばれます。

Javascriptの実体は以下になります。

https://github.com/aipocom/aipo/blob/master/war/src/main/webapp/javascript/aimluck/io/form.js#L536

aimluck.io.ajaxCheckboxDeleteSubmit = function(button, url, indicator_id,
    portlet_id, receive) {
  aimluck.io.ajaxVerifyCheckbox(button.form, aimluck.io.ajaxMultiDeleteSubmit,
      button, url, indicator_id, portlet_id, receive);
}

aimluck.io.ajaxVerifyCheckboxが呼ばれます

aimluck.io.ajaxVerifyCheckbox = function(form, action, button, url,
    indicator_id, portlet_id, receive) {
  var cnt = 0;
  var i;
  for (i = 0; i < form.elements.length; i++) {
    if (form.elements[i].checked)
      cnt++;
  }
  if (cnt == 0) {
    var nlsStrings = dojo.i18n.getLocalization("aipo", "locale");
    var alertString = dojo.string.substitute(nlsStrings.VERIFYCB_STR, {
      verifycb_sel : nlsStrings.VERIFYCB_SEL,
      verifycb_gt_one : nlsStrings.VERIFYCB_GT_ONE,
      verifycb_cb : nlsStrings.VERIFYCB_CB
    });
    // "チェックボックスを１つ以上選択してください。"
    alert(alertString);
    return false;
  } else {
    return action(button, url, indicator_id, portlet_id, receive);
  }
}

チェックボックスの数をカウントしてチェックボックスの数が0の場合はアラートを表示します。

引数にformが使われているので、削除ボタンを囲う形でformタグが必要なことがわかります。

JSON形式でリクエストを送信してcallback関数が呼ばれるようになります。
ToDOの場合は
aipo.todo.onListReceiveMessage
になっています。

https://github.com/aipocom/aipo/blob/master/portlets/todo/src/main/webapp/javascript/aipo/todo/form.js#L237

aipo.todo.onListReceiveMessage = function(msg){
    if(!msg) {
        var arrDialog = dijit.byId("modalDialog");
        if(arrDialog){
            arrDialog.hide();
        }
        aipo.portletReload('todo');
        aipo.portletReload('schedule');
    }
    if (dojo.byId('listmessageDiv')) {
        dojo.byId('listmessageDiv').innerHTML = msg;
    }
}

モーダルダイアログを消す
listmessageDivにエラーメッセージを表示する

処理をやっています。

テンプレートには

#ALajaxIndicator("${indicator_id}" "$!{portlet.ID}" "")
<div id="listmessageDiv"></div>

が必要なことがわかります。