Skip to content

Instantly share code, notes, and snippets.

@spoonerWeb
Created July 20, 2018 12:47
Show Gist options
  • Save spoonerWeb/f341b393441dc45c08e1a2fdd4346059 to your computer and use it in GitHub Desktop.
Save spoonerWeb/f341b393441dc45c08e1a2fdd4346059 to your computer and use it in GitHub Desktop.
Sending an AJAX request to get Extbase objects
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.
<?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);
}
}
$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',
]
);
}
<?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']
]
]
];
}
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>");
}
}
[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]
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment