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

$.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 の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。