$.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'
    });
}

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

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...