Magento 2 | Add Admin Configuration Button Action

Question

I need to call a method from an admin configuration button. This is my simple custom module. The button appear on admin but notthing appen on click. No log is write. I cannot understand what I am wrong.

This is admin button

This is my Block

Ea\CategoriesManager\Block\System\Config\DeleteEmpty.php

<?php
namespace Ea\CategoriesManager\Block\System\Config;

class DeleteEmpty extends \Magento\Config\Block\System\Config\Form\Field
{
     protected $_template = 'Ea_CategoriesManager::system/config/delete_empty.phtml';

     public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

     public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
        return parent::render($element);
    }
       protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        return $this->_toHtml();
    }
    public function getAjaxUrl()
    {
        return $this->getUrl('ea_categories_manager/system_config/deleteempty');
    }
    public function getButtonHtml()
    {
        $button = $this->getLayout()->createBlock(
            'Magento\Backend\Block\Widget\Button'
        )->setData(
            [
                'id' => 'delete_empty_id',
                'label' => __('Delete Empty'),
            ]
        );

        return $button->toHtml();
    }
}

This is my Controller

Ea\CategoriesManager\Controller\Adminhtml\System\Config\DeleteEmpty.php

<?php
namespace Ea\CategoriesManager\Controller\Adminhtml\System\Config;

use \Magento\Catalog\Model\Product\Visibility;

class DeleteEmpty extends \Magento\Backend\App\Action
{
    protected $_logger;
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Psr\Log\LoggerInterface $logger
    ) {
        $this->_logger = $logger;
        parent::__construct($context);
    }
    public function execute()
    {
        $this->_logger->debug('Deleted Categories');
        // Code to perform specific action 
    }
}

This is my system.xml

etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
    <tab id="eav" translate="label" sortOrder="10000">
        <label>EA</label>
    </tab>
    <section id="delete_empty" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Delete Categories</label>
        <tab>eav</tab>
        <resource>Ea_CategoriesManager::categoriesmanager_config</resource>
        <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Delete Empty Categories</label>
            <field id="delete_empty_categories" translate="label comment tooltip" type="button" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0">
                <label>Delete</label>
                <frontend_model>Ea\CategoriesManager\Block\System\Config\DeleteEmpty</frontend_model>
            </field>
        </group>
    </section>
</system>
</config>

and this is my routes.xml

etc/adminhtml/routes.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 MageWorx. All rights reserved.
 * See LICENSE.txt for license details.
 */
 -->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="ea_categories_manager" frontName="ea_categories_manager">
            <module name="Ea_CategoriesManager" before="Magento_Backend" />
        </route>
    </router>
</config>

<script>
require([
    'jquery',
    'prototype',
], function(jQuery){
    function function_name() {
        params = {
        };

        new Ajax.Request('<?php echo $block->getAjaxUrl() ?>', {
            loaderArea:     false,
            asynchronous:   true,
            parameters:     params,
            onSuccess: function(transport) {
                var response = JSON.parse(transport.responseText);
            }
        });
    }

    jQuery('#delete_empty_id').click(function () {
        function_name ();
    });
});
</script>

<?php echo $block->getButtonHtml() ?>

Answer 1

This is the right way

Ea/CategoriesManager/view/adminhtml/templates/system/config/delete_empty.phtml

<script>
    require([
        'jquery',
        'prototype',
    ], function(jQuery){
        jQuery('#delete_empty_id').click(function () {
            // Set isAjax to true and append form_key in the request.
            params = {
                form_key: '<?php echo $block->getFormKey() ?>',
                isAjax: true
            };
            // Make the ajax call and handel data.
            jQuery.ajax({
                showLoader: true, 
                url: "<?php echo $block->getAjaxUrl() ?>", 
                data: params,
                dataType: 'json'
            }).done(function (data) { 
                alert(data); console.log(data); 
            });
        });
    });
    </script>

    <?php echo $block->getButtonHtml() ?>