Einträge in ExpressionEngine mit AJAX laden

Question

Ich bin auf der Suche nach Einträgen von ExpressionEngine in einem Popup-modal mit einem Ajax-Aufruf mit jQuery, die Idee ist, wenn der Benutzer auf den Eintrag Titel öffnet, zeigen Sie ein Modal mit dem vollständigen Eintrag in es. Ich suche dann eine nächste & Schaltfläche auf dem Modal, die es mir ermöglicht, zu den nächsten und vorherigen Einträgen innerhalb des Popup-Modales zu wechseln. Ich weiß nicht, ob es am besten ist, die Vorlage oder einen Feed, d. H. JSON, zu laden, oder ob es eine andere Möglichkeit gibt, die ich gerne höre.

Hat jemand versucht dies noch oder weiß von einem tut, dass vielleicht hilfreich. Ich bin auf diesen Artikel gestoßen, der etwas Licht darauf wirft, http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or-similar/

Answer 1

Das Tutorial, das Sie verknüpft haben, ist für das Bedienfeld. Da Sie über Inhalte am Frontend sprechen, können Sie alles in EE-Vorlagen mit regulären alten EE-Tags tun.

Ich empfehle eine Vorlagengruppe, um Ihre HTML-Fragmente zu halten. In diesem Fall kann es zweckmäßig sein, die Eintrittskörper zu setzen, und der Eintrag verbindet in einer einzigen Vorlage

ajax.group 
    - single_entry.html 

Dann am einfachsten, in dieser Vorlage Sie

<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> 

haben würde, wenn Sie anfordern diese Fragmente mit Ajax, sicher sein, die aktuelle entry_id oder url_title als URL-Segment, so dass die Fragmentvorlage lädt die richtigen Daten für Sie. Sie können einen Selektor an load() übergeben, um den gewünschten Teil von HTML zu holen und in den entsprechenden Container auf Ihrer Seite zu laden. In seiner einfachsten Form, so etwas wie

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

wo die 2 die entry_id des Eintrags ist das Sie laden. Siehe http://api.jquery.com/on/

Schließlich müssten Sie jQuery-Ereignis-Listener auf den nächsten und vorherigen Eintrag-Links haben, so dass sie jQuery load() auslösen, um den nächsten Eintrag zu laden. Hier ist ein Beispiel für die .next Verbindung.

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

Siehe http://api.jquery.com/on/