Magento 2 – jQuery Ajax Data to Controller

ajaxjavascriptjquerymagento2url

I am trying to make my first ajax request in magento to controller file but can not get it working. My .js file is:

    jQuery.ajax({
        type: 'post',
        url: 'vendor_module/index/htmlcreator',
        data: {key: variable},
        dataType: 'json'
    }).done(function (msg) {
        var variable = "Data Saved: " + msg;
        return variable;
    });

My Controller file:

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

public function __construct(
Context $context, \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory) {
    $this->resultJsonFactory = $resultJsonFactory;
    parent::__construct($context);
}
public function execute() {
    $result = $this->resultJsonFactory->create();
    if ($this->getRequest()->isAjax()) {
        $test = '<h1>Hello World</h1>';
        return $result->setData($test);
    }
}}

What is the controller files url? If it contains domain name how can i find it in js file? What would be the securest way to write url? I prefer not to use phtml file, unless I really need to (security).

Best Answer

If you data from vendor_module/index/htmlcreator the you need below files:

Controller files location should be app/code/[Vendor]/[Module]/Controller/Index/ and file name should be Htmlcreator.php.

In magento, a url have 1 part is frontName.Here vendor_module is frontName for your module.So,you need define that frontName using routes.xml which located at app/code/[Vendor]/[Module]/etc/frontend/

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="vendor_module" frontName="vendor_module">
            <module name="[Vendor]_[Module]" />
        </route>
    </router>
</config>

Related Solutions

Magento Admin – Running AJAX Script from Admin Area

Looks like your admin route declaration is incorrect. Try this:

<admin>
    <routers>
        <adminhtml>
            <args>
                <modules>
                    <TwilitGrotto_AutoCustomerLookup after="Mage_Adminhtml">TwilitGrotto_AutoCustomerLookup</TwilitGrotto_AutoCustomerLookup>
                </modules>
            </args>
        </adminhtml>
    </routers>
</admin>

Here is a good article on the topic: Magento Admin Hello World Revisited

EDIT:

I'm posting a working solution below:

File: TwilitGrotto\AutoCustomerLookup\etc\adminhtml.xml

<?xml version="1.0"?>
<config>
    <acl>
        <resources>
            <admin>
                <children>
                    <sales>
                        <children>
                            <twilitgrotto_autocustomerlookup translate="title" module="twilitgrotto_autocustomerlookup">
                                <title>Auto Customer Lookup</title>
                            </twilitgrotto_autocustomerlookup>
                        </children>
                    </sales>
                </children>
            </admin>
        </resources>
    </acl>
</config>

File: TwilitGrotto\AutoCustomerLookup\etc\config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <TwilitGrotto_AutoCustomerLookup>
            <version>1.0.0.0</version>
        </TwilitGrotto_AutoCustomerLookup>
    </modules>
    <global>
        <helpers>
            <twilitgrotto_autocustomerlookup>
                <class>TwilitGrotto_AutoCustomerLookup_Helper</class>
            </twilitgrotto_autocustomerlookup>
        </helpers>
    </global>
    <adminhtml>
        <layout>
            <updates>
                <twilitgrotto>
                    <file>twilitgrotto_autocustomerlookup_layout.xml</file>
                </twilitgrotto>
            </updates>
        </layout>
    </adminhtml>
    <admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <TwilitGrotto_AutoCustomerLookup after="Mage_Adminhtml">TwilitGrotto_AutoCustomerLookup_Adminhtml</TwilitGrotto_AutoCustomerLookup>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>
</config>

File: TwilitGrotto\AutoCustomerLookup\controllers\Adminhtml\Autocustomerlookup\AddressController.php

<?php

class TwilitGrotto_AutoCustomerLookup_Adminhtml_Autocustomerlookup_AddressController
    extends Mage_Adminhtml_Controller_Action
{
    public function checkEmailExistsAction()
    {
        $emailAddress = $this->getRequest()->getParam('emailAddress');
        $result = Mage::helper('twilitgrotto_autocustomerlookup')->checkEmailExists($emailAddress);
        $this->getResponse()->setBody($result);
    }

    protected function _isAllowed()
    {
        return Mage::getSingleton('admin/session')->isAllowed('sales/twilitgrotto_autocustomerlookup');
    }
}

Controller URL: Mage::getUrl('adminhtml/autocustomerlookup_address/checkEmailExists');

Call Model Method from Controller in Magento 2

The object manager is not the correct way to do this. Use dependency injection via the constructor whenever possible.

You are getting that error because your controller extends another class, but you are not following the parent class's constructor, or you did not clear the cache.

You have not provided your code, but I assume your controller extends \Magento\Framework\App\Action\Action. If you open that, you'll see the constructor signature for that class is:

/**
 * @param \Magento\Framework\App\Action\Context $context
 */
public function __construct(
    \Magento\Framework\App\Action\Context $context
) {
    // ...
}

You're getting the error because Magento is trying to inject a Context object, and you're asking for a Customer. To inject your model, your class constructor needs to look like this:

protected $customer;

/**
 * @param \Magento\Framework\App\Action\Context $context
 * @param \Demo\HelloWorld\Model\Customer $customer
 */
public function __construct(
    \Magento\Framework\App\Action\Context $context,
    \Demo\HelloWorld\Model\Customer $customer
) {
    $this->customer = $customer;

    parent::__construct($context);
}

Make that change, then flush the Magento cache (or folder var/cache), and then it should work.

Note: This is assuming your Customer class is injectable. If it's loaded from the database, you need to inject CustomerFactory instead, and then call $customer = $this->customerFactory->create().

Best Answer

Related Solutions

Magento Admin – Running AJAX Script from Admin Area

Call Model Method from Controller in Magento 2

Related Topic