ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost（送信）した結果を、ページのリロードなしで表示する機能です。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

    // post include
    postIncludeOnsubmitMark     : '.js-post_include',
    postIncludeOnreadyMark      : '.js-post_include-ready',
    postIncludeMethod           : 'swap', // ( 'swap' | 'replace' )
    postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
    postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
    postIncludeArray  : [{
//        'mark'       : '.js-post_include-original',
//        'type'       : 'submit',
//        'method'     : 'swap',
//        'effect'     : 'slide',
//        'effectSpeed': 'slow'
    }],

---

---

設定内容を変更するには

/themes/適用しているテーマ/ 内にjsファイルを用意し、設定を変更する内容を記述してください。テンプレートでそのjsファイルを参照すれば、変更した設定が反映されます。

jsファイルの参照は、a-blog cms用のJavaScriptファイルの参照コード（「BEGIN_MODULE Js」〜「END_MODULE Js」）より後に記述してください。

2. HTMLの編集

post include機能は、実装方法が以下の2種類あります。それぞれの詳しい実装方法は以下のリンクから参照してください。

• ページ遷移なしで検索結果を表示する
• 送信ボタンを押さずに検索結果を表示する

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。（Ver. 1.3.0より）

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとページを移動せずに同じページ内で検索結果を表示することができます。

デモ

実装方法

ここでは例として、サイト内検索フォームから検索すると、ある特定のコンテンツエリアを書き換えて検索結果を表示する手順を説明します。

1.テンプレートを用意する

フォームを送信した後に表示する内容をテンプレートとして用意します。ここではsearchResult.htmlというテンプレートを用意するとします。このテンプレートには検索結果の表示部分のみ記述しています。

<!-- BEGIN_MODULE Entry_List -->
<ul><!-- BEGIN entry:loop -->
  <li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

2.モジュールIDを作成する

「1.テンプレートを用意する」で作成したモジュールをモジュールIDにし、引数設定の[keyword]にチェックを入れます。これで、フォームから送られたキーワードに合致するエントリーが表示されるようになります。

<!-- BEGIN_MODULE Entry_List id="searchResult" -->
<ul><!-- BEGIN entry:loop -->
  <li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

---

---

3. フォームを用意する

（1）サイト内検索フォームを用意します。

<form action="" method="post">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（2）form要素にclass属性とtarget属性を追加します。「class="js-post_include"」はこのとおりに記述し、target属性は#の後に任意の名前を記述します。（"#"はidを意味しています）このtarget属性は検索結果の表示を置き換える場所を指定しています。

target属性がない場合は、form自体が検索結果表示に置き換わります。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（3）検索結果を表示するテンプレートを参照します。 例）include/searchResultSample.html というテンプレートを参照する場合の例です。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="hidden" name="tpl" value="include/searchResultSample.html" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

4. 検索結果表示部分と関連付ける

検索結果を表示したいコンテンツエリアに、formのtarget属性と同じ名前を付けます。手順2（2）で指定したtarget属性の値と同じ名前が付いている要素部分が、検索結果表示として置き換わります。

target属性で指定した要素自身を置き換えるか、その中身を置き換えるかを設定することができます。設定の詳細は「post includeの基本設定」の「postIncludeMethod」を参照してください。

例）formのtarget属性で"#jsChangeContents"と記述した場合

<div id="jsChangeContents">
<p>この部分が置き換わります。</p>
</div>

これで、検索結果を別ページに移動せずに表示できるようになります。

フォームそのものを表示させずに検索結果を表示することも可能です。詳細は「送信ボタンを押さずに検索結果を表示する（post include）」を参照してください。

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのポストインクルード機能を利用します。（Ver. 1.3.0より）

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとフォームの送信ボタンを押さずに同じページ内で検索結果を表示することができます。

デモ

実装方法

ここでは例として、ある特定のキーワードで検索した場合の検索結果を表示する手順を説明します。

基本的な設定方法についてはページを移動せずにフォームの検索結果を表示する（post include）を参考にしてください。下記の箇所を変更することで送信ボタンを押さずに結果を表示するようになります

変更前

<form action="" method="post" class="js-post_include">

変更後

<form action="" method="post" class="js-post_include-ready">

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。（v1.3.0より）

基本的にはキャッシュ機能が利用できる状態の時には、post_include機能で追加で表示されるHTMLについても部分的にキャッシュされる事になります。そのためソート順をランダムとしていたとしてもキャッシュされ同じものが表示される事になります。

キャッシュ機能が利用されている時にも、ランダムが利用できるようにする方法を紹介します。

使用方法

実際にはキャッシュさせないという事ではなく、毎回違うURLでアクセスしているような状態にして処理しています。アクセス数が多いサイトの際にはキャッシュファイルサイズが大きくなりますので注意が必要になります。

Ver.2.7.xまでの記述

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>

class="js-post_include-eval_value"が書かれている事でvalueにはMath.random()というプログラムが実行され編集される事になります。

<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />

上記のHTMLが実行されると、0から1までのランダムな実数を生成するコードになり実際には以下のようになります。

<input type="hidden" name="hash" value="0.8770308238454163" class="js-post_include-eval_value" />

http://example.com/?hash=0.8770308238454163 のようなアドレスでアクセスする事になりますが、?hash= というアドレスにするためには以下の1行も必要になります。

<input type="hidden" name="query[]" value="hash" />

Ver.2.8.0からの記述

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="" class="js-random" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>
<script>
  $('.js-random').val(Math.random());
</script>