Aipoの登録フォームのJavascript処理

Aipoでは登録処理などはほぼ同じJavascriptを使って処理を行っています。

そのベースとなるのがaimluck.io.submitです。

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

aimluck.io.submit = function(form, indicator_id, portlet_id, callback) {
  aimluck.io.disableForm(form, true);

  var obj_indicator = dojo.byId(indicator_id + portlet_id);
  if (obj_indicator) {
    dojo.style(obj_indicator, "display", "");
  }

  try {
    dojo
        .xhrPost({
          url : form.action,
          timeout : 30000,
          form : form,
          encoding : "utf-8",
          handleAs : "json-comment-filtered",
          headers : {
            X_REQUESTED_WITH : "XMLHttpRequest"
          },
          load : function(response, ioArgs) {
            var html = "";
            if (dojo.isArray(response) && response.length > 0) {
              if (response[0] == "PermissionError") {
                html += "<ul>";
                html += "<li><span class='caution'>" + response[1]
                    + "</span></li>";
                html += "</ul>";
              } else {
                html += "<ul>";
                dojo.forEach(response, function(msg) {
                  html += "<li><span class='caution'>" + msg + "</span></li>";
                });
                html += "</ul>";
              }
            }
            callback.call(callback, html);

            obj_indicator = dojo.byId(indicator_id + portlet_id);
            if (obj_indicator) {
              dojo.style(obj_indicator, "display", "none");
            }

            if (html != "") {
              aimluck.io.disableForm(form, false);
            }
          },
          error : function(error) {
          }
        });
  } catch (E) {
  }
  ;

  return false;
}

登録フォームの中では実際にはJavascriptでデータのPOST処理、レスポンスの処理を行っています。

Aipoの場合、レスポンスはエラーメッセージになっており、正常登録時にはレスポンスが空になります。

エラーメッセージは配列で返すようになっているので、エラーメッセージがあった時にはここの中でエラー表示用のhtmlを生成しています。

PermissionErrorが返ってきた時だけちょっと処理を変えているのがわかるかと思います。

ここでhtmlを生成して、allback関数にエラーメッセージ用のhtmlを渡してcallback関数内で表示する処理を行っています。

callback関数を分けている理由ですが、一覧画面や詳細画面でエラーを出すタグのidが異なるため、共通化部分とポートレットごとに異なる部分をわけて対応しています。