WordPress.org

Ready to get started?Download WordPress

Forums

Load post in another part of page once clicked with AJAX (1 post)

  1. obidos
    Member
    Posted 1 year ago #

    Hi there,

    I have been asked to look at a site for someone and I am fairly lost with how to help.

    Basically there is a scrolling list of post titles on the right of the page. What they want to happen is for the user to click on one of the scrolling post titles and the title, truncated content and read more button for that post to show on the left of the page.

    Here is the code that the file has:-

    HTML

    <div id="ajax-target">
    <?php
     $obj = get_post($post->ID);
     echo '<h1>'.$obj->post_title.'</h1>';
     echo '<p>'.$obj->post_content.'</p>';
    ?>
    </div>
    <div id="ajax-source">
    <?php
     $obj = get_post($post->ID);
     echo '<h1>'.$obj->post_title.'</h1>';
     echo '<p>'.$obj->post_content.'</p>';
    ?>
    </div>
    jQuery(document).ready(function($){
    
     $('#archive-scroll div:first').addClass('active');
     $('#archive-scroll a').click(function(){ 
    
     //loader
     $('.loader').show();
     $('#ajax-target').html('');
     $('#readmore').hide();
    
     //ajax load
     var url = $(this).attr('href');
    
     $('#ajax-target').load(url + post_id + ' #ajax-source', function(){   $('.loader').hide(); $('#readmore').show(); });
    
     //update readmore url
     $('#readmore').attr('href', url);
     //$('#ajax-target').attr('h1', post_id);
    
     //active class
     $('#archive-scroll div').removeClass('active');
     $(this).find('div').addClass('active');
    
     return false;
     });
    
    });

    The scrolling list is done with a simple wordpress loop and made to work using JQuery.

    Any ideas or direction would be great - thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic