Tải các mục trong ExpressionEngine bằng AJAX

Question

Tôi đang tìm cách tải các mục từ ExpressionEngine trong một phương thức popup với một cuộc gọi ajax bằng jQuery, ý tưởng là khi người dùng nhấp vào tiêu đề mục đó sẽ mở ra một phương thức với toàn bộ mục nhập trong nó. Sau đó tôi đang tìm cách có một nút & trước đó theo phương thức cho phép tôi chuyển sang các mục tiếp theo và trước đó trong chế độ bật lên. Tôi không biết có nên tải mẫu hay nguồn cấp dữ liệu hay nhất hay không, tức là JSON hoặc nếu có một cách khác tôi rất vui được nghe.

Có ai đã thử điều này chưa hoặc biết về một tut có thể hữu ích. Tôi đã xem qua bài viết này để làm sáng tỏ nó, http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or-similar/

Answer 1

Hướng dẫn mà bạn đã liên kết là dành cho bảng điều khiển. Vì bạn đang nói về nội dung trên giao diện người dùng, bạn có thể làm tất cả trong các mẫu EE với các thẻ EE cũ thông thường.

Tôi khuyên bạn nên có một nhóm mẫu để giữ các đoạn html của mình. Trong trường hợp này nó có thể là thuận tiện để đưa cơ thể nhập cảnh và mục liên kết vào một mẫu đơn

ajax.group 
    - single_entry.html 

Sau đó, tại đơn giản nhất, trong mẫu mà bạn muốn có

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

Khi bạn yêu cầu những đoạn bằng cách sử dụng ajax, hãy đảm bảo vượt qua entry_id hoặc url_title hiện tại làm phân đoạn url để mẫu phân đoạn tải dữ liệu chính xác cho bạn. Bạn có thể chuyển bộ chọn tới load() để lấy đoạn html mong muốn và tải nó vào vùng chứa thích hợp trên trang của bạn. Tại đơn giản nhất, một cái gì đó giống như

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

nơi 2 là entry_id của mục bạn đang tải. Xem http://api.jquery.com/on/

Cuối cùng, bạn cần có trình xử lý sự kiện jQuery trên các liên kết nhập tiếp theo và trước đó để chúng kích hoạt jQuery load() để tải mục nhập tiếp theo. Dưới đây là ví dụ về điều này cho liên kết .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  
}); 

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