Проблема WordPress У меня есть загрузка сообщений на той же странице с gridview - PullRequest
Новая
       7

Проблема WordPress У меня есть загрузка сообщений на той же странице с gridview

0 голосов
/ 11 июля 2011

Это для пользовательской темы Wordpress, которую я настраивал, которая имеет вид сетки.

Я хотел загрузить посты на той же странице, как в твиттере. Я перепробовал много плагинов, таких как бесконечная прокрутка ... но я не мог заставить его работать, затем я попробовал pbd-ajax-load-posts и он загружает посты, но я не могу загрузить посты в свои собственные контейнеры, они просто загружаются друг под другом.

Образец шаблона .php: 

<?php get_header();  ?>
    <?php get_sidebar(); ?>
    <!-- CONTENT CONTAINER -->
<div id="content">
    <!-- INNER WRAPPER -->
<div id="inner">

    <!-- GRID CONTENT UL - EACH LI IS A GRID CONTAINER -->
    <ul id="grid-content">  

    <!-- OPEN THE GRID LOOP QUERY -->   
    <?php while ( have_posts() ) : the_post(); ?>

        <!-- GRID MODULE LOOP -->   
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                      <!-- title, featured-image, ect.... -->

Я сделал небольшие изменения в файле .js из плагина, но ни один из них не работал. Это файл внутри плагина, как он изначально: 

jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage) + 1;

// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);

// The link of the next page of posts.
var nextLink = pbd_alp.nextLink;

/**
 * Replace the traditional navigation with our own,
 * but only if there is at least one page of new posts to load.
 */
if(pageNum <= max) {

         // Insert the "More Posts" link.
    $('#content') //<--- I had changed it to #grid-content 

        .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
        .append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');

    // Remove the traditional navigation.
    $('.navigation').remove();
}

/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {

    // Are there more posts to load?
    if(pageNum <= max) {

        // Show that we're working.
        $(this).text('Loading posts...');

        $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
            function() {
                // Update page number and nextLink.
                pageNum++;
                nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                // Add a new placeholder, for when user clicks again.
                $('#pbd-alp-load-posts')
                    .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                // Update the button message.
                if(pageNum <= max) {
                    $('#pbd-alp-load-posts a').text('Load More Posts');
                } else {
                    $('#pbd-alp-load-posts a').text('No more posts to load.');
                }
            }
        );
    } else {
   // I changed this below to >>> .html('message here'); instead
        $('#pbd-alp-load-posts a').append('.');

    }   

    return false;
});
});

Если я протестирую его в простом html после цикла в шаблоне, я получу желаемый результат. Пример: 

                                   </div>
                <!-- /MODULE TEXT -->

            </li>
            <!-- /GRID MODULE LOOP -->  

       <?php endwhile; ?>       
       <!-- /END GRID LOOP QUERY -->


             <!-- I want to have the posts of the next page load in seperate 
                      containers like this -->  
             <li>Post 11 </li>
         <li>Post 12 </li>
         <li>Post 13 </li>  
                     <!--Then on the next click it would load 10 more -->  

                     <!-- couldn't get it loading in here  
                      <div class="gridcontent2"></div>-->

    </ul>
<!-- /END GRID LIST -->

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 11 июля 2011

Я бы не стал размещать ваши сообщения в элементах списка, поскольку они почти наверняка не будут соответствовать html.Код javascript .before указывает pbd загружать новые сообщения в div.Если вы хотите, чтобы они были в элементах списка, тогда они должны быть li.Но сначала посмотри на первый пункт - не пользуйся ли.

Трудно сказать, что не так без сайта, на который можно посмотреть по ссылкам, но я предполагаю, что заполнитель находится в неправильном месте.Я бы переключился на использование div, как предложено автором плагина.

ОБНОВЛЕНИЕ На основании ваших отзывов я вижу две возможности.Сначала

Строка $('#grid-content') blahblahblah помещает средство извлечения данных ПОСЛЕ сетки содержимого.Не внутри этого.Чтобы получить его внутри, используйте вместо этого.

$('#grid-content ul')

Теперь не уверен, что это испортит макет.Это, безусловно, незаконно, поскольку вы помещаете div в список.Вы можете переключить

.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

на что-то еще, что является законным.

Другая вещь, которую вы можете попробовать - и я не вижу этого в коде -вместо этого указатель вставки для новых сообщений должен быть нацелен на ul.Однако я не вижу, где это происходит, поэтому я не могу сказать вам, как это сделать.

Update2

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

Метод .load вставляет новые сообщения.Таким образом, вы можете видеть в своем текущем коде

$('.pbd-alp-placeholder-'+ pageNum).load

, предназначенных для нового содержимого в заполнителе.Вместо этого сделайте так, чтобы он был нацелен на вашу ул.Поэтому вы хотели бы:

$('#grid-content ul').load

Вы бы сделали это вместо информации, которую я предлагал в Update1

...