Aipoでのデータ登録系処理の際に呼ばれているaimluck.io.submitの解説

@iwasaki 795views 更新:2014年2月26日

ブログの登録などで呼ばれている処理

https://github.com/aipocom/aipo/blob/master/portlets/blog/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-blog-entry-form.vm#L40

#ALajaxscreenformheader("blogForm" $jslink $portlet "BlogEntryFormJSONScreen" "aimluck.io.createSelectFromFileList(this, '$!portlet.ID');aimluck.io.submit(this,'$indicator_id','$!portlet.ID',aipo.blog.onReceiveMessage)")

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

macroの実態

#macro(ALajaxscreenformheader $name $jslink $portlet $template $js)
<form name="form$!portlet.ID" id="form$!portlet.ID" action="$!jslink.getPortletById($!portlet.ID).addQueryData('template',$template)" method="post" onsubmit="$js;return false;">
<input type="hidden" name="_name" value="$name" />
<input type="hidden" name="secid" value="$secid" />
#end

 

について見てみます。

データ登録時には事前処理をした上で

aimluck.io.submit(this,'$indicator_id','$!portlet.ID',aipo.blog.onReceiveMessage)

が呼ばれています。

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

 

aimluck.io.submitを順番に見てみると以下の処理をしています。

  1. 2重登録防止の為フォームのボタンを無効化
  2. インジケータを表示
  3. dojoでPOST
  4. responseが配列だったらエラーメッセージとみなしてエラー表示用のhtmlタグを生成
  5. callback.call(callback, html)を呼ぶ(ブログの場合はaipo.blog.onReceiveMessageを呼ぶ)
  6. インジケータを非表示
  7. フォームのボタンを有効化
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;
}

 

さて、callback.callでは引数で指定したJavascriptのメソッドを呼びます。
ブログの場合は
aipo.blog.onReceiveMessageが呼ばれています。

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

 


引数はmsgになっています。
エラーメッセージが返ってきている時にはここにエラーメッセージが渡されます。
正常に登録できた際には空になっています。

エラーが有るとき
エラーメッセージの内容を dojo.byId(‘messageDiv’) の中に表示します。

エラーがないとき
ダイアログ dijit.byId(“modalDialog”) を閉じます。
blogポートレット、タイムラインポートレットをリロードします。

タイムラインポートレットをリロードする理由ですが、トップ画面で新たにブログを登録した際にタイムラインにも表示されるためです。

aipo.blog.onReceiveMessage = function(msg){
    //送信時に作成した場合selectを削除。
    var select=dojo.byId("attachments_select");
    if(typeof select!="undefined"&& select!=null)
        select.parentNode.removeChild(select);

    if(!msg) {
        var arrDialog = dijit.byId("modalDialog");
        if(arrDialog){
            arrDialog.hide();
        }
        aipo.portletReload('blog');
        aipo.portletReload('timeline');
    }
    if (dojo.byId('messageDiv')) {
        dojo.byId('messageDiv').innerHTML = msg;
    }

    var modalDialog = document.getElementById('modalDialog');
    if(modalDialog && msg != '') {
        var wrapper = document.getElementById('wrapper');
        wrapper.style.minHeight = modalDialog.clientHeight + 'px';
    }
}

 

 

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません