The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. obidos
    Posted 3 years 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:-


    <div id="ajax-target">
     $obj = get_post($post->ID);
     echo '<h1>'.$obj->post_title.'</h1>';
     echo '<p>'.$obj->post_content.'</p>';
    <div id="ajax-source">
     $obj = get_post($post->ID);
     echo '<h1>'.$obj->post_title.'</h1>';
     echo '<p>'.$obj->post_content.'</p>';
     $('#archive-scroll div:first').addClass('active');
     $('#archive-scroll a').click(function(){ 
     //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');
     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