Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T08:43:09.953Z
Answers.Text: 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
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T08:50:10.650Z
Answers.Text: <script type="text/javascript">
      $('from-devis a').click(function(){
      var data = {
          entryIds: {{entry.id}},
          action: 'businesslogic/BusinessLogicController/renderTemplate',
          templatePath: 'index'
      };
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T08:50:14.337Z
Answers.Text: $.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>
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T12:44:09.923Z
Answers.Text: 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
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T13:24:26.377Z
Answers.Text: 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.
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T13:25:47.547Z
Answers.Text: Then take a look at the response in your network tab and fix the error.....
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T13:29:05.570Z
Answers.Text: How do I passe a CSRF Token ?
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T13:29:55.693Z
Answers.Text: https://craftcms.com/support/csrf-protection#updating-your-javascript please use google... there are plenty examples all around the web
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T14:49:05.510Z
Answers.Text: 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 :)
Answers.UserDisplayName: Abdelhafid AABID
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-26T08:06:34.790Z
Answers.LastActivityDate: 2018-04-26T08:06:34.790Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-25T15:45:23.130Z
Comments.Text: Craft 2 or Craft 3?
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-26T07:46:32.813Z
Comments.Text: Craft 2, forget to mention sorry :)
Comments.UserDisplayName: Abdelhafid AABID
Tags: <templating><ajax><craft.entries>
Title: Load new entry(s) in the same page with ajax as a popup
ThreadText: # 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](https://pluginfactory.io/) to create your boilerplate and read the docs about [plugin development](https://docs.craftcms.com/v2/plugins/introduction.html)
  
  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 :)  
  
  ---
  
  