How to show items only using AJAX "Load More" button instead of pagination in category blog

Question

In category blog by default ten items are visible. I would like to replace a standard pagination with "Load more" button, so that clicking on it would show ten more items each time.

There is a blog layout override with the button.

<a id="btn-show-more" href="<?php echo JRoute::_('&start=' . ( ($this->pagination->pagesCurrent) * $this->pagination->limit) ); ?>"><?php echo JText::_( 'BUTTON_TEXT' ); ?></a>

div container

<div id="ajax-result"></div>

And the next script

<script type="text/javascript">
    jQuery(document).ready(function ($) {
       $(document).on('click', '#btn-show-more', function () {
           $.get($(this).attr('href'), function (responce) {
               $('#ajax-result').html(responce)
           });
           return false;
       });
    })
</script>

As a result by clicking on the button the whole page with head section and etc. is loaded.

How to load items only?

Answer 1

In your template folder (/joomla_root/templates/< template_name >/) create a file with a unique name, such as articlelist.php.

In that file add this code

<jdoc:include type="component" />

Then change your ajax code to modify the URL before it's requested to include "tmpl=articlelist". Maybe something like this:

<script type="text/javascript">
jQuery(document).ready(function ($) {
   $(document).on('click', '#btn-show-more', function () {
       var url = $(this).attr('href');
       url = ( url.indexOf('?') >=0 ? '&' : '?' ) + 'tmpl=articlelist';           
       $.get(url, function (responce) {
           $('#ajax-result').html(responce)
       });
       return false;
   });
})
</script>

Joomla will use articlelist.php instead of your main index.php file to load the component, which will result in only the component's code being loaded (since that's the only thing in articlelist.php).

Answer 2

You can also just retrieve specific content with a selector, like this:

$( "#ajax-result" ).load( "index.php #container" );

according to here, same for ajax (I think)