<p>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:</p>

<pre><code>&lt;?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';
    }
}
</code></pre>

<p>Then the controllers folder had only one file MyPlugin_MyController.php as follows:</p>

<pre><code>&lt;?php
namespace Craft;

class MyPlugin_MyController extends BaseController
{
public function actionGetEntry()
{

    $parent = craft()-&gt;entries-&gt;getEntryById($_GET['id']);
    $type = craft()-&gt;elements-&gt;getElementTypeById($parent-&gt;id);
    $elemModel = craft()-&gt;elements-&gt;getCriteria($type);

    $attributes = array(
        "descendantOf" =&gt; $parent-&gt;id,
        "level" =&gt; "2"
        );
    $child = $elemModel-&gt;find($attributes);

    $children = array();

    foreach ($child as $value) {
        array_push($children, $value-&gt;slug);
    }

    $this-&gt;returnJson($children);
}


}
</code></pre>

<p>Finally we have the page in which I wanted to get the entries dynamically, the javascript is as follows:</p>

<pre><code>// 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 &gt; data.length + 3)
    num = num-3;
jQuery.each(data, function(index, value){
    if(index &lt; num)
    {
            if(index == 0)
        {
            $('.ma-category-btns').append(
            "&lt;button type=\"button\" class=\"btn btn-default ma-category-btn first\"&gt;" + value + "&lt;span class=\"glyphicon glyphicon-info-sign\"&gt;&lt;/span&gt;&lt;/button&gt;"
            );

        }
        else if(index == data.length - 1 || index == num-1)
        {
            $('.ma-category-btns').append(
            "&lt;button type=\"button\" class=\"btn btn-default ma-category-btn last\"&gt;" + value + "&lt;span class=\"glyphicon glyphicon-info-sign\"&gt;&lt;/span&gt;&lt;/button&gt;"
            );
        }
        else {
            $('.ma-category-btns').append(
            "&lt;button type=\"button\" class=\"btn btn-default ma-category-      btn\"&gt;" + value + "&lt;span class=\"glyphicon glyphicon-info-sign\"&gt;&lt;/span&gt;&lt;/button&gt;"
            );
        }
      }

    });
    }
    });
});
</code></pre>

<p>Also the html layout for this purpose was as follows:</p>

<pre><code>             &lt;div class="ma-category-btns"&gt;
                {% for entry in entry.getChildren() %}
                    {% if loop.index &lt;= 3 %}
                        &lt;button type="button" class="btn btn-default ma-category-btn {% if loop.first %}first{% elseif loop.index == 3 %}last{% endif %}"&gt;{{ entry.title }}&lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt;&lt;/button&gt;
                    {% endif %}
                {% endfor %}

            &lt;/div&gt;
</code></pre>

<p>I hope this helps anyone that comes travelling to this page.</p>

CC BY-SA 3.0
2014-08-05T09:42:56.700Z
2014-08-05T09:42:56.700Z
Moin Qidwai
<p>You can't use Twig for dynamic interactions on your site, as it is a server side language. Twig compiles to PHP code, which is then rendered and loaded to the DOM.</p>

<p>What you'd need is a script running in userland. The technique Stehen suggested is one way to do it, but you probably don't want your site's visitors to load all data right from the start, using the button simply to reveal already loaded "extra entries".</p>

<p>I'd say you should learn how to do <a href="http://api.jquery.com/load/" rel="nofollow">AJAX loading</a> with Javascript or jQuery. This is how you could properly address the desired behavior.</p>

<p>A way to make it work with your Craft template would be to split your entries list into multiple parts using the <a href="http://buildwithcraft.com/docs/templating/paginate" rel="nofollow"><code>paginate</code></a> tag. The first block would load right away and then with every click on that button each succeeding entry block is loaded into the DOM via Javascript.</p>

CC BY-SA 3.0
2014-08-01T12:58:26.977Z
2014-08-01T12:58:26.977Z
carlcs
<p>I am looking for something quite simple, but I still can't find a way to do it in twig syntax. So basically here is my code:</p>

<pre><code>{% set upperlimit = 3 %}
    {% for entry in entry.getChildren() %}
        {% if loop.index0 &lt; upperlimit %}
            &lt;button type="button" class="btn btn-default ma-category-btn {% if loop.first %}first{% endif %} {% if loop.index == upperlimit %}last{% endif %}"&gt;{{ entry. title }} &lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt;&lt;/button&gt;
        {% endif %}
    {% endfor %}

&lt;button type="button"  class="btn btn-default ma-more-category-btn"&gt;VIEW MORE CATEGORIES&lt;/button&gt;
</code></pre>

<p>Basically when I click on the button "VIEW MORE CATEGORIES", it should load the next three children and create three more buttons like the ones in the <code>for</code> loop if there are enough children for that entry.</p>

<p>Is it possible to have this dynamic behaviour in craft and twig?</p>

CC BY-SA 3.0
2014-08-01T11:23:25.623Z
You could just hide the "extra" entries, and then use JS to display the next batch when the user clicks the "view more" button.
Stephen Lewis
<templating><variable>
Dynamically load craft entries based on twig variable
# Dynamically load craft entries based on twig variable

(Asked by: username_0 on 2014-08-01)

I am looking for something quite simple, but I still can't find a way to do it in twig syntax. So basically here is my code:
{% set upperlimit = 3 %}
    {% for entry in entry.getChildren() %}
        {% if loop.index0 < upperlimit %}
            {{ entry. title }} 
        {% endif %}
    {% endfor %}

VIEW MORE CATEGORIES

Basically when I click on the button "VIEW MORE CATEGORIES", it should load the next three children and create three more buttons like the ones in the for loop if there are enough children for that entry.
Is it possible to have this dynamic behaviour in craft and twig?

**Tags:** templating, variable
> **Comments:**
> **username_1**: You could just hide the "extra" entries, and then use JS to display the next batch when the user clicks the "view more" button.  

---

## 2 answers

### Answer by username_0 on 2014-08-05. Score: 3 | Accepted answer

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:

Then the controllers folder had only one file MyPlugin_MyController.php as follows:
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(
            "" + value + ""
            );

        }
        else if(index == data.length - 1 || index == num-1)
        {
            $('.ma-category-btns').append(
            "" + value + ""
            );
        }
        else {
            $('.ma-category-btns').append(
            "" + value + ""
            );
        }
      }

    });
    }
    });
});

Also the html layout for this purpose was as follows:
             
                {% for entry in entry.getChildren() %}
                    {% if loop.index <= 3 %}
                        {{ entry.title }}
                    {% endif %}
                {% endfor %}

            

I hope this helps anyone that comes travelling to this page.


---

### Answer by username_2 on 2014-08-01. Score: 4

You can't use Twig for dynamic interactions on your site, as it is a server side language. Twig compiles to PHP code, which is then rendered and loaded to the DOM.

What you'd need is a script running in userland. The technique Stehen suggested is one way to do it, but you probably don't want your site's visitors to load all data right from the start, using the button simply to reveal already loaded "extra entries".

I'd say you should learn how to do [AJAX loading](http://api.jquery.com/load/) with Javascript or jQuery. This is how you could properly address the desired behavior.

A way to make it work with your Craft template would be to split your entries list into multiple parts using the [`paginate`](http://buildwithcraft.com/docs/templating/paginate) tag. The first block would load right away and then with every click on that button each succeeding entry block is loaded into the DOM via Javascript.


---

