<p>First: you need to create a Plugin, I suggest you to use <a href="https://pluginfactory.io/" rel="nofollow noreferrer">Pluginfactory.io</a> to create your boilerplate and read the docs about <a href="https://docs.craftcms.com/v2/plugins/introduction.html" rel="nofollow noreferrer">plugin development</a> </p>

<p>You'll need an ajax Request that could look like</p>

<pre><code>$('#a-button').click(function(){
    var data = {
        entryIds: [1,2,3,4], // &lt;- insert the id(s) of the entries you want to render
        action: 'pluginName/controllerName/renderTemplate', // &lt;-- route to your controller
        templatePath: 'path/to/template'
    };
    $.ajax({
        type: "post",
        url: '',
        data: data,
        success: function (response) {
            if(response.success === true){
                $('#a-container').html(response.html);
            }else{
                alert(response.message);
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });    
});
</code></pre>

<p>Then you'll insert this function in your controller</p>

<pre><code>/**
 * @throws \Craft\Exception
 */
public function actionRenderTemplate()
{
    $success = false;
    $message = Craft::t('Could not find template path');
    $html = '';

    // check for a template path
    if ($templatePath = craft()-&gt;request-&gt;getParam('templatePath')) {
        // check for entry ids
        if($entryIds = craft()-&gt;request-&gt;getParam('ids')){
            // fetch all entries with the ids
            $criteria = craft()-&gt;elements-&gt;getCriteria(ElementType::Entry);
            $criteria-&gt;id = $entryIds;
            $elements = $criteria-&gt;find();

            // render the template
            $html = craft()-&gt;templates-&gt;render($templatePath, ['elements' =&gt; $elements]);    
            $success = true;
        }else{
            $message = Craft::t('Could not find required entry id parameter');
        }
    }

    // return as json
    $this-&gt;returnJson(
        [
            'success' =&gt; $success,
            'message' =&gt; $message,
            'html'    =&gt; $html
        ]
    );
}
</code></pre>

CC BY-SA 3.0
2018-04-26T08:43:09.953Z
I used Business Logic plugin template for Craft CMS since is a fast example i'm still new to plugins dev i don't know even how to create one i'm letting it for later, i followed your instruction and then ? i use the is Ajax request in the same template ?
So the script will be like this
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T08:50:10.650Z
<script type="text/javascript">
    $('from-devis a').click(function(){
    var data = {
        entryIds: {{entry.id}},
        action: 'businesslogic/BusinessLogicController/renderTemplate',
        templatePath: 'index'
    };
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T08:50:14.337Z
$.ajax({
        type: "post",
        url: '',
        data: data,
        success: function (response) {
            if(response.success === true){
                $('#a-container').html(response.html);
            }else{
                alert(response.message);
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });    
});
  </script>
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T12:44:09.923Z
I'm not sure what else you want? When the request is triggered you'll get the html of the template with the given elements or an error
Robin Schambach
CC BY-SA 3.0
2018-04-26T13:24:26.377Z
Yep, i've got a status : error on the console, I tried to corrected but failed ... u_u, and yes just like you said i'm trying to load and display a popup on click.
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T13:25:47.547Z
Then take a look at the response in your network tab and fix the error.....
Robin Schambach
CC BY-SA 3.0
2018-04-26T13:29:05.570Z
How do I passe a CSRF Token ?
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T13:29:55.693Z
https://craftcms.com/support/csrf-protection#updating-your-javascript please use google... there are plenty examples all around the web
Robin Schambach
CC BY-SA 3.0
2018-04-26T14:49:05.510Z
Thank you for your guidance, actually the problem was from the plugin I installed so i created a new one, added some modification and it works great :)
Abdelhafid AABID
CC BY-SA 3.0
2018-04-26T08:06:34.790Z
2018-04-26T08:06:34.790Z
Robin Schambach
<p>First time I'm going to use Ajax with Craft CMS therefore I'm still confused how it works.</p>

<p>What I need is this, when I click on a specified link  in the front, I need the CMS to load some entry/entries and display the data in a popup on the same page of course.</p>

<p>The CSS for the popup is ready, the HTML too (static for now, not twig template) the backoffice also is ready.  The only thing I need is how to get the entries (basic explanation if possible) with ajax (It seems to be the best solution) and load them into the page then show them in a popup.</p>

<p>Is there any link(s) to help in my task or someone to explain those first steps please ?</p>

CC BY-SA 3.0
2018-04-25T15:45:23.130Z
Craft 2 or Craft 3?
Robin Schambach
CC BY-SA 3.0
2018-04-26T07:46:32.813Z
Craft 2, forget to mention sorry :)
Abdelhafid AABID
<templating><ajax><craft.entries>
Load new entry(s) in the same page with ajax as a popup
# Load new entry(s) in the same page with ajax as a popup

(Asked by: username_0 on 2018-04-25)

First time I'm going to use Ajax with Craft CMS therefore I'm still confused how it works.

What I need is this, when I click on a specified link in the front, I need the CMS to load some entry/entries and display the data in a popup on the same page of course.

The CSS for the popup is ready, the HTML too (static for now, not twig template) the backoffice also is ready. The only thing I need is how to get the entries (basic explanation if possible) with ajax (It seems to be the best solution) and load them into the page then show them in a popup.

Is there any link(s) to help in my task or someone to explain those first steps please ?

**Tags:** templating, ajax, craft.entries
> **Comments:**
> **username_1**: Craft 2 or Craft 3?  
> **username_0**: Craft 2, forget to mention sorry :)  

---

## 1 answers

### Answer by username_1 on 2018-04-26. Score: 3 | Accepted answer

First: you need to create a Plugin, I suggest you to use Pluginfactory.io to create your boilerplate and read the docs about plugin development 
You'll need an ajax Request that could look like
$('#a-button').click(function(){
    var data = {
        entryIds: [1,2,3,4], // <- insert the id(s) of the entries you want to render
        action: 'pluginName/controllerName/renderTemplate', // <-- route to your controller
        templatePath: 'path/to/template'
    };
    $.ajax({
        type: "post",
        url: '',
        data: data,
        success: function (response) {
            if(response.success === true){
                $('#a-container').html(response.html);
            }else{
                alert(response.message);
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });    
});

Then you'll insert this function in your controller
/**
 * @throws \Craft\Exception
 */
public function actionRenderTemplate()
{
    $success = false;
    $message = Craft::t('Could not find template path');
    $html = '';

    // check for a template path
    if ($templatePath = craft()->request->getParam('templatePath')) {
        // check for entry ids
        if($entryIds = craft()->request->getParam('ids')){
            // fetch all entries with the ids
            $criteria = craft()->elements->getCriteria(ElementType::Entry);
            $criteria->id = $entryIds;
            $elements = $criteria->find();

            // render the template
            $html = craft()->templates->render($templatePath, ['elements' => $elements]);    
            $success = true;
        }else{
            $message = Craft::t('Could not find required entry id parameter');
        }
    }

    // return as json
    $this->returnJson(
        [
            'success' => $success,
            'message' => $message,
            'html'    => $html
        ]
    );
}

> **Comments:**
> **username_0**: I used Business Logic plugin template for Craft CMS since is a fast example i'm still new to plugins dev i don't know even how to create one i'm letting it for later, i followed your instruction and then ? i use the is Ajax request in the same template ? So the script will be like this  
> **username_0**: <script type="text/javascript">     $('from-devis a').click(function(){     var data = {         entryIds: {{entry.id}},         action: 'businesslogic/BusinessLogicController/renderTemplate',         templatePath: 'index'     };  
> **username_0**: $.ajax({         type: "post",         url: '',         data: data,         success: function (response) {             if(response.success === true){                 $('#a-container').html(response.html);             }else{                 alert(response.message);             }         },         error: function (XMLHttpRequest, textStatus) {             console.log("Status: " + textStatus);         }     });     });   </script>  
> **username_1**: I'm not sure what else you want? When the request is triggered you'll get the html of the template with the given elements or an error  
> **username_0**: Yep, i've got a status : error on the console, I tried to corrected but failed ... u_u, and yes just like you said i'm trying to load and display a popup on click.  
> **username_1**: Then take a look at the response in your network tab and fix the error.....  
> **username_0**: How do I passe a CSRF Token ?  
> **username_1**: https://craftcms.com/support/csrf-protection#updating-your-javascript please use google... there are plenty examples all around the web  
> **username_0**: Thank you for your guidance, actually the problem was from the plugin I installed so i created a new one, added some modification and it works great :)  

---

