Question

I have used a CMS built with PHP and MySQL. It works great and I have fully customized it to my liking. The only thing now to do is make a more efficient way of loading the data. When a user wants to select an article I want the browser to stay on the same exact page/url without reloading or redirecting. Here is a demo of the CMS: DEMO LINK

For example, the above line of code was exerted from the homepage.php script. It is an anchor tag for the user to select to view the whole content of a particular article, which was only partially displayed in the homepage. When this link is clicked, the user is directed away from the homepage and taken to the article’s specific URL. How can I get the full article content page to load inside of the homepage and hide the original homepage content to avoid the page redirect problem. Is this something that can be done with this particular CMS? I can provide any PHP script from the CMS if needed. Thanks in advance.

ARCHIVE.php SCRIPT:

 <?php foreach ( $results['articles'] as $article ) { ?>
    <li>
      <h2>
        <span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
      </h2>
      <p class="summary">
        <?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
          <a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">

<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
        <?php } ?>
      <?php echo htmlspecialchars( $article->summary )?>&nbsp;&nbsp;<a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">(more)</a>
      </p>
    </li>
 <?php } ?>

Answer 1

If you can get the content of the article using ajax and put that content below that title of that article, for ex let say you have a php function in backend which you can call to get the content of article given the article id then you can make a GET ajax request to get the article content and put in the desired div. something like:

<script language="javascript">
$("#view_more").click(function(){
 var dataString = "id="+article_ID;
          $.ajax({
                type: "GET",
                url: 'http://myhost.com/articles/getArticleContent',
                data: dataString,
                success: function(response) {
                   $('div #description').html(response);
                }
          });
          return false;
      });
</script>

update:27-11-2012
you can try something like this, if that helps you understanding better. it may not be exactly what you want but I hope it will help you understanding how you can proceed.

<?php foreach ( $results['articles'] as $article ) { ?>
    <li>
      <h2>
        <span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
      </h2>
      <p class="summary" id="<?php echo $article->id?>">
        <?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
          <a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">

<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
        <?php } ?>
      <?php echo htmlspecialchars( $article->summary )?>&nbsp;&nbsp;<a href="#" onclick="viewFullArticle(<?php echo $article->id?>)">(more)</a>
      </p>
    </li>
 <?php } ?>
<script language="javascript">
function viewFullArticle(article_ID){
 var dataString = "id="+article_ID;
          $.ajax({
                type: "GET",
                url: 'http://myhost.com/articles/getArticleContent',
                data: dataString,
                success: function(response) {
                   $('p #'+article_ID).html(response); //assuming response is everything you want to display within summary paragraph
                }
          });
          return false;
      };
</script>