Magento – Magento 2: Set Template Dynamically Using Ajax Call

controllersmagento2template

I have button in frontend. I want to change template from controller when button is clicked.

Please help me.

Best Answer

check below code.

use below code in to button click

<script type="text/javascript">
require([    
    "jquery""
    ], function ($) {
        jQuery(document).ready(function(){          
            jQuery( document ).on( 'click', 'button', function () {
                ajax();
            });         
        });         
    }); 
    function ajax(){        

            jQuery.ajax({
                    url: "<?php echo $this->getUrl('module/ajax/ajax'); ?>",
                    showLoader: true,
                    data: "",                   
                    type: 'POST'
            }).done(function(data) {



            });                     
    }
</script>

app\etc\vender\module\Controller\Ajax\Ajax.php

<?php

namespace VENDER_NAME\MODULE_NAME\Controller\Ajax;

class Ajax extends \Magento\Framework\App\Action\Action
{   

    /**
     * @var \Magento\Framework\View\Result\PageFactory
     */
    protected $resultPageFactory;

    /**
     * @var \Magento\Framework\Json\Helper\Data
     */

    protected $jsonData
    /**
     * @param \Magento\Framework\App\Action\Context $context
     * @param \Magento\Framework\View\Result\PageFactory resultPageFactory
     */

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory,
        \Magento\Framework\Json\Helper\Data $jsonData
    )
    {
        $this->resultPageFactory = $resultPageFactory;
        $this->jsonData = $jsonData
        parent::__construct($context);
    }

    public function execute()
    {           
            $resultRedirect = $this->resultPageFactory ->create();          
            $blockInstance = $resultRedirect->getLayout()->getBlock('module.ajax');
            $message['html'] = $blockInstance->toHtml();

            /** Json Responce */
            $this->getResponse()->representJson(
                $this->jsonData->jsonEncode($message)
            );
    }
}

app\etc\vender\module\view\frontend\layout\controllername_ajax_actionname.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>                     
        <block class="Magento\Framework\View\Element\Template" template="VENDER_MODULE::ajax.phtml" cacheable="false" name="module.ajax" as="module_ajax">

        </block>        
    </body>
</page>

app\etc\vender\module\view\frontend\templates\ajax.phtml

Related Solutions

Ajax Call Not Working – Troubleshooting Guide

Some troubleshooting tips:

Do you have a module registered in app/etc/modules?

If not, it should be as such:

<?xml version="1.0"?>
<config>
    <modules>
        <ThomasRyan_Checkoutajax>
             <active>true</active>
             <codePool>local</codePool>
        </ThomasRyan_Checkoutajax>
    </modules>
</config>

This module naming looks incorrect - it is expected to be separated with an underscore indicating namespace -- so, not this:

<module>Checkoutajax</module>

All modules are named as Company_Module, etc. Checkoutajax_AjaxController is then not a valid classname. Check your general PHP error log (or Apache logs) and you should see something to the effect of class not exists.

Change/update this to ThomasRyan_Checkoutajax or similar. All instances of Checkoutajax will need to be updated in the module xml definition.

The frontName also has issues, namely, it should be lowercase:

<frontName>Checkoutajax</frontName>

I'm not sure if Magento forces the lowercase on the routename.

The updated code, then:

<?xml version="1.0"?>
<config>
  <modules>
    <ThomasRyan_Checkoutajax>
      <version>0.1.0</version>
    </ThomasRyan_Checkoutajax>
  </modules>
  <frontend>
    <routers>
      <Checkoutajax>
        <use>standard</use>
        <args>
          <module>ThomasRyan_Checkoutajax</module>
          <frontName>checkoutajax</frontName>
        </args>
      </Checkoutajax>
    </routers>
    <layout>
     <updates>
       <checkoutajax>
         <file>checkoutajax.xml</file>
       </checkoutajax>
     </updates>
   </layout>
 </frontend>
</config>

And the controller:

<?php

class ThomasRyan_Checkoutajax_AjaxController extends Mage_Core_Controller_Front_Action {

    public function indexAction() {
        $this->loadLayout();
        $this->renderLayout();
    }
}

Edit:

This is just a quick update to explain how routes/controllers/actions work in Magento. Let's say that this is your URL:

www.yourstore.com/checkoutajax/ajax/index

This represents three different entities:

checkoutajax is the route name, also called frontName in the module definition XML
ajax here represents the controller name. This controller file should be named AjaxController.php and located in the /controllers directory of your module.
index represents the indexAction method.

So, to visualize:

www.yourstore.com/checkoutajax/ajax/index
---------route--------^
---------controller-------------^
---------action-----------------------^

Magento – pass data from phtml file to controller

if you are doing it with ajax,then Try this,

var name = jQuery(".input_text").val();//make sure you have used 'input_text'for this input element only
jQuery.ajax({
            type:"POST",
            data:{vat_exempt_name:name},//see ajax syntax for remaining

The above code can help you to pass params as post to any controller.

instead using jquery you can getting value of an element with simple javascript as, var name = document.getElementById('input_field_id').value;

Best Answer

Related Solutions

Ajax Call Not Working – Troubleshooting Guide

Magento – pass data from phtml file to controller

Related Topic