WordPress Problem I have loading posts on same page with a gridview

This is for a custom Wordpress theme I been customizing that has a grid view.

I wanted to load posts on the same page, like in twitter. I tried many plugins like infinite scroll... but I couldn't get it working, then I tried pbd-ajax-load-posts and it loads the posts, but I can't get the posts to load on their own containers, they simply load below each other.

Sample of the .php template:

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

    <!-- GRID CONTENT UL - EACH LI IS A GRID CO开发者_C百科NTAINER -->
    <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.... -->

I made small changes on the .js file from the plugin but none seemed to work. This is the file inside the plugin how it is originally:

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

If I test it in simple html after the loop on the template I would get the result I want. Sample:

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

Any help will be appreciated.

I wouldn't place your posts inside list items as they are almost certainly not going to be html compliant. The .before javascript code tells pbd to load the new posts in a div. If you want them in list items then these need to be li's. But first see point one - don't use li's.

Its hard to tell what is wrong without a linked site to look at, but my guess is that the placeholder content is in the wrong location. I would switch to using div's as suggested by the plugin author.

UPDATE Based on your feedback I see two possibilities. First

The line $('#grid-content') blahblahblah places the data retriever AFTER the content-grid. Not inside of it. To get it inside use this instead.

$('#grid-content ul')

Now not sure if this will mess up the layout. It is certainly illegal as your placing a div inside of the list. You could switch the

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

with something else that is legal.

The other thing you could try - and I don't see this in the code - is to have the insert statement for the new posts target the ul instead. However, I don't see where this happens so I can't tell you how to do it.

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.

The .load method inserts the new posts. So you can see in your current code

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

targets the new content in the placeholder. Instead, have it target your ul. So you would want:

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

You would do this instead of the info I offered in Update1