11

jQueryを使用してajax呼び出しを使用して、ExpressionEngineからエントリをポップアップモーダルにロードしようとしています。ユーザーがエントリのタイトルをクリックすると、完全なエントリを含むモーダルが表示されます。次に、モーダルに次と前のボタンを配置して、ポップアップモーダル内の次と前のエントリに移動できるようにします。テンプレートやフィード、つまり JSON を読み込むのが最善なのか、それとも喜んで別の方法があるのか​​はわかりません。

誰かがこれをまだ試みたか、役立つかもしれないことを知っていますか。この記事に出くわしましたhttp://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or -似ている/

4

1 に答える 1

14

リンク先のチュートリアルは、コントロール パネル用です。フロントエンドのコンテンツについて話しているので、通常の古い EE タグを使用して EE テンプレートですべて行うことができます。

HTML フラグメントを保持するためのテンプレート グループを用意することをお勧めします。この場合、エントリの本文とエントリのリンクを 1 つのテンプレートに入れると便利な場合があります。

ajax.group
    - single_entry.html

次に、最も簡単に言えば、そのテンプレートで

<div id="entry-body">
    {exp:channel:entries channel="channel_name_here" entry_id="{segment_3}"}
        <h2>{title}</h2>
        {body}
    {/exp:channel:entries} 
</div>

<div id="entry-links">
    {exp:channel:next_entry}        
        <a href="{path='ajax/single_entry'}" class="next">Next</a>
    {/exp:channel:next_entry} 
    {exp:channel:prev_entry}
        <a href="{path='ajax/single_entry'}" class="prev">Previous</a>
    {/exp:channel:prev_entry}
</div>

ajax を使用してこれらのフラグメントをリクエストする場合は、フラグメント テンプレートが正しいデータをロードするように、現在のentry_idまたはurl セグメントとして渡すようにしてください。url_titleセレクターを渡してload()、必要な html のチャンクを取得し、ページ上の適切なコンテナーにロードすることができます。最も単純には、次のようなものです

$('#entry-container').load('ajax/single_entry/2 #entry-body');
$('#entry-links').load('ajax/single_entry/2 #entry-links');

ここで、2はentry_idロードするエントリの です。http://api.jquery.com/on/を参照してください。

最後に、次のエントリ リンクと前のエントリ リンクに jQuery イベント リスナを配置して、jQueryload()が次のエントリをロードするようにトリガーする必要があります。.nextリンクの例を次に示します。

$(document).on('click', '.next', function(event) {
    var url = $(this).attr('href');
    $('#entry-container').load(url); // load the html into your chosen DOM element
    event.preventDefault(); // prevent the browser from navigating to this page     
});

http://api.jquery.com/on/を参照してください。

于 2012-10-30T15:22:26.200 に答える