MTAppjQuery で Ajax などの処理が全部終わってから submit を走らせたいとき

MTAppjQuery で Ajax などの保存処理が全部終わってから submit を走らせたいときの submit イベントへのバインド方法を紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

MTAppjQuery で Movable Type の管理画面をカスタマイズしていると、例えば「記事を保存したときのタイミングで Ajax などの処理が全部終わってから submit を走らせたい」ということがたまにあります。

そういうときは、下記のように名前空間を使ってイベントをセットすると良いでしょう。

(function($){
 $('form[name="entry_form"]').on('submit.preSaveEntry', function(){
 var $form = $(this);
 $.when(
 $.getJSON('http://your-data-api.cgi/v1/sites/1/entries'),
 $.getJSON('http://your-data-api.cgi/v1/sites/2/entries'),
 $.getJSON('http://your-data-api.cgi/v1/sites/3/entries')
 )
 .done(function(response1, response2, response3){
 console.log(response1);
 console.log(response2);
 console.log(response3);
 $form.off('submit.preSaveEntry').submit();
 })
 .fail(function(){
 alert('Fail');
 });
 return false;
 });
})(jQuery);

ここでは名前空間を postSaveEntry としていますが、もちろん他の submit にも使えます。

bit part では、Slack の API を使って、テンプレートを保存したら「テンプレート名」「URL」「作業者」が Slack に通知されるようにセットしているブログもあったりしました。

以上です。

Published 2015-02-09
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧