Here is the way I solved this issue in order someone comes around looking for a solution. I created a plugin basically. The plugin had only a single controller. So the main plugin.php file contains:
<?php
namespace Craft;
class MyPluginPlugin extends BasePlugin
{
function getName()
{
return Craft::t('My Plugin');
}
function getVersion()
{
return '1.0';
}
function getDeveloper()
{
return 'Digital Butter';
}
function getDeveloperUrl()
{
return 'http://butter.com.hk';
}
}
Then the controllers folder had only one file MyPlugin_MyController.php as follows:
<?php
namespace Craft;
class MyPlugin_MyController extends BaseController
{
public function actionGetEntry()
{
$parent = craft()->entries->getEntryById($_GET['id']);
$type = craft()->elements->getElementTypeById($parent->id);
$elemModel = craft()->elements->getCriteria($type);
$attributes = array(
"descendantOf" => $parent->id,
"level" => "2"
);
$child = $elemModel->find($attributes);
$children = array();
foreach ($child as $value) {
array_push($children, $value->slug);
}
$this->returnJson($children);
}
}
Finally we have the page in which I wanted to get the entries dynamically, the javascript is as follows:
// function to dynamically generate he entries that represent sub-categories of articles like cancer
var num = 3;
$('.ma-more-category-btn').click(function(){
num = num+3;
var x = {{ entry.id }};
$.ajax({
url: "{{ siteUrl }}/actions/myPlugin/my/getEntry",
data: { "id": x },
success: function(data){
$('.ma-category-btns').html('');
if(num > data.length + 3)
num = num-3;
jQuery.each(data, function(index, value){
if(index < num)
{
if(index == 0)
{
$('.ma-category-btns').append(
"<button type=\"button\" class=\"btn btn-default ma-category-btn first\">" + value + "<span class=\"glyphicon glyphicon-info-sign\"></span></button>"
);
}
else if(index == data.length - 1 || index == num-1)
{
$('.ma-category-btns').append(
"<button type=\"button\" class=\"btn btn-default ma-category-btn last\">" + value + "<span class=\"glyphicon glyphicon-info-sign\"></span></button>"
);
}
else {
$('.ma-category-btns').append(
"<button type=\"button\" class=\"btn btn-default ma-category- btn\">" + value + "<span class=\"glyphicon glyphicon-info-sign\"></span></button>"
);
}
}
});
}
});
});
Also the html layout for this purpose was as follows:
<div class="ma-category-btns">
{% for entry in entry.getChildren() %}
{% if loop.index <= 3 %}
<button type="button" class="btn btn-default ma-category-btn {% if loop.first %}first{% elseif loop.index == 3 %}last{% endif %}">{{ entry.title }}<span class="glyphicon glyphicon-info-sign"></span></button>
{% endif %}
{% endfor %}
</div>
I hope this helps anyone that comes travelling to this page.