$.MTAppFieldSort() 利用時のエラーの回避方法と MTAppjQuery 0.11 リリース

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」を利用しているとき、テンプレートの編集画面で、ちゃんとテンプレート名を入力しているにもかかわらず「テンプレート名を設定してください。」というアラートが出る不具合が発生していました。

MTAppFieldSort-insertID01.png

これは、MTAppjQuery の中の jQuery プラグイン「$.MTAppFieldSort()」が、ブログ記事の作成・編集画面のフィールドを並べ替えることを前提としていたために起こるものでした。

このエラーの対処法と、ブログ記事の作成・編集画面以外でもフィールドを並べ替えるための insertID オプションについて説明します。

エラーを回避する

まず、上記のような不具合を回避するためには、$.MTAppFieldSort() をブログ記事の作成・編集画面に限定して適用させればOKです。

ブログ記事の作成・編集画面に限定するには、以下のような if 文で囲みます。

if($('body#edit-entry').length){
 $.MTAppFieldSort({sort: 'foo,bar'});
}

なお、ページごとに限定する if 文を作るには、$.MTAppDebug() を使うと便利です。

なぜ不具合があったのか

そもそも、上記のようにテンプレートの編集画面で、ちゃんとテンプレート名を入力しているにもかかわらず「テンプレート名を設定してください。」というアラートが出る不具合はなぜ発生したのでしょうか。

これは、$.MTAppFieldSort() が、ブログ記事の作成・編集画面のフィールドを並べ替えることを前提としていたため、並べ替えたときに、「div#main-content-inner」の頭から挿入していく仕様になっているからです。

ここで、ブログ記事の作成・編集画面のソースの枠組みを見てみると以下のようになっています。

div#container
 div#content
 div#content-body
 form#entry_form
 div#main-content
 div#main-content-inner
 各フィールド

つまり、仕様通り「div#main-content-inner」の中で並び替えても、form要素の中なので問題ないわけです。

次に、テンプレートの作成・編集画面のソースの枠組みを見てみます。

div#container
 div#content
 div#content-body
 div#main-content
 div#main-content-inner
 form#template-listing-form
 各フィールド

ブログ記事の作成・編集画面と似ているんですが、こちらは「div#main-content-inner」の中に form要素があるので、$.MTAppFieldSort() で「div#main-content-inner」の頭から並べてしまうと、form要素の外へ各フィールドが出てしまうことになります。

なので、「保存」等をしたときに form 要素の中にテンプレート名のフィールドが見つからないので、「テンプレート名を設定してください。」というアラートが出てしまったわけです。

それ以外の管理画面のフィールドを並べ替える

つまり、このようにテンプレートの作成・編集画面でフィールドを並べ替えるときは、「form#template-listing-form」の中で並び替えなければならないことになります。

そのような場合は、次のように insertID オプションに並べ替える要素の id 属性値を設定します。

// テンプレートの編集
if($('body#edit-template-index').length){
 $.MTAppFieldSort({
 sort: 'revision-note,outfile,title',
 insertID: 'template-listing-form'
 });
}

このように、各管理画面のソースは微妙に違っているので、あとは個別にソースを確認する必要があります。

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

MTAppjQuery