If your are a Joomla developer sometimes you encounter a task which needs to produce jQuery Ajax call in order to add some additional content to a Joomla article page or just to make some operation in a background.
In this case this article will help you to implement this feature on a page.
So first create an empty file called: view.ajax.php and upload it to YOUR_SITE_HOME/components/com_content/views/article folder
Add the php code below into this file:
<?php
/**
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/**
* HTML Article View class for the Content component
*
* @package Joomla.Site
* @subpackage com_content
* @since 1.5
*/
class ContentViewArticle extends JViewLegacy
{
function display($tpl = null)
{
$app = JFactory::getApplication();
$user = JFactory::getUser();
$userId = $user->get('id');
$task = JRequest::getString('task');
switch( $task ){
case "getArticles":
$this->_getArticles();
break;
}
jexit();
}
public function _getArticles(){
$query = "SELECT title FROM #__content WHERE catid = 11 ORDER BY id DESC";
$articlesList = JFactory::getDBO()->setQuery($query)->loadObjectList();
$html = "";
foreach( $articlesList as $article ){
$html .= '<div class="uk-margin">'. $article->title .'</div>';
}
echo '<div id="articles-container" class="articles-container">'.$html.'</div>';
jexit();
}
}
?>
Then create a java script file with this JS script and add it to your page HEADER or just add it to your article php source:
<script>
jQuery(document).ready(function(){
jQuery('#ajax-button').click(function(){
jQuery.ajax({
url: 'index.php?option=com_content&format=ajax&lang=en&view=article&task=getArticles&tmpl=component',
type: 'post',
dataType: 'html',
async: true,
success: function(response){
jQuery(response).appendTo( jQuery('.uk-article') );
}
});
});
});
</script>
Click the button above to see how it makes a jQuery Ajax call and adds Joomla articles titles to the bottom of the page.
