Load new entry(s) in the same page with ajax as a popup

Question

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 ?

Answer 1

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
        ]
    );
}