Sending an AJAX request to get Extbase objects

README.txt

Here is an example of how to get Extbase objects (related to another object or not) via AJAX to manipulate it in the frontend without page reload.

This example gives me the zones of a selected country.
I use `static_info_tables` and I have a form where a country can be selected.
With the `onchange` event I can send the selected country to an action and get the zones of the country back.

DataController.php

<?php
namespace Vendor\Extension\Controller;

use SJBR\StaticInfoTables\Domain\Repository\CountryZoneRepository;

class DataController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController
{
    /**
     * @var \TYPO3\CMS\Extbase\Mvc\View\JsonView
     */
    protected $view;

    /**
     * Use my own view instead default one
     * @var string
     */
    protected $defaultViewObjectName = \Vendor\Extension\View\JsonView::class;
  
    /**
     * @var \SJBR\StaticInfoTables\Domain\Repository\CountryZoneRepository
     */
    protected $countryZoneRepository = null;

    /**
     * @param \SJBR\StaticInfoTables\Domain\Repository\CountryZoneRepository $countryZoneRepository
     * @return void
     */
    public function injectCountryZoneRepository(CountryZoneRepository $countryZoneRepository) {
        $this->countryZoneRepository = $countryZoneRepository;
    }

    /**
     * @param \SJBR\StaticInfoTables\Domain\Model\Country|null $country
     * @return void
     */
    public function getZonesByCountryAction(\SJBR\StaticInfoTables\Domain\Model\Country $country = null)
    {
        $zones = [];
        $this->view->setVariablesToRender(['zones']);
        if ($country instanceof \SJBR\StaticInfoTables\Domain\Model\Country) {
            $zones = $this->countryZoneRepository->findByCountry($country);
        }
        $this->view->assign('zones', $zones);
    }
}

ext_localconf.php

$boot = function($extensionKey) {
    // Register the plugin with the DataController and the possible action names
    \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
        'Vendor.' . $extensionKey,
        'JsonData',
        [
            'Data' => 'getZonesByCountry',
        ]
    );
}

JsonView.php

<?php
namespace Vendor\Extension\View;

use TYPO3\CMS\Extbase\Mvc\View\JsonView as ExtbaseJsonView;

class JsonView extends ExtbaseJsonView
{

    /**
     * @var array
     */
    protected $configuration = [
        'zones' => [
            '_descendAll' => [
                // now I get only these fields in the response
                '_only' => ['localName', 'uid']
            ]
        ]
    ];

}

main.js

function populateRegions(field) {
	var countryId = $(field).val();
	var targetSelect = "#" + $(field).data("populate");
	if (countryId > 0) {
		$(targetSelect).prop("disabled", true);
		$.ajax({
			url: "/index.php?type=113&no_cache=1&tx_plugin_jsondata[country]=" + countryId,
			dataType: "json",
			success: function(returnData) {
				if (returnData) {
					$(targetSelect)
						.find('option')
						.remove();

					$.each(returnData, function (index, item) {
						$(targetSelect).append("<option value=\"" + item.uid + "\">" + item.localName + "</option>");
						$(targetSelect).removeAttr("disabled");
					});
				}
			}
		})
	} else {
		$(targetSelect).find("option").remove();
		$(targetSelect).append("<option value=\"\">Please select a country first</option>");
	}
}

setup.txt

[globalVar = TSFE:type = 113]
    config {
        disableAllHeaderCode = 1
        xhtml_cleaning = none
        admPanel = 0
        debug = 0
        disablePrefixComment = 1
        metaCharset = utf-8
        additionalHeaders.10.header = Content-Type:application/json
        absRefPrefix = /
    }

    json = PAGE
    json {
        typeNum = 113
        10 = USER
        10 {
            userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
            vendorName = Vendor
            extensionName = Extension
            pluginName = JsonData
            controller = Data
            switchableControllerActions {
                Data {
                    1 = getZonesByCountry
                }
            }

            persistence.storagePid = {$plugin.tx_plugin.storagePid}
            settings < plugin.tx_plugin.settings
        }
    }
[global]

Template.html

<f:form action="update" object="{form}" name="form">
  
  <label>Country</label>
  <f:form.select property="country" options="{countries}" optionValueField="uid" optionLabelField="shortNameDe" size="1" additionalAttributes="{onchange: 'populateRegions(this);'}" data="{populate: 'zones'}" />
  
  <label>Zones</label>
  <f:form.select id="zones" property="zone" options="{zones}" optionLabelField="localName" sortByOptionLabel="1" />
</f:form>