I am trying to make an Ajax request to the backend, but I get the error Uncaught ReferenceError: TYPO3 is not defined which is caused by this line :
const url = TYPO3.settings.ajaxUrls['do_something_identifier'];
Here is my Extension/Resources/Public/JavaScript/example.js
:
import DocumentService from '@typo3/core/document-service.js'
import DebounceEvent from '@typo3/core/event/debounce-event.js';
import AjaxRequest from '@typo3/core/ajax/ajax-request.js';
DocumentService.ready().then(function () {
new DebounceEvent('input', function (e) {
const searchValue = e.target.value;
const url = TYPO3.settings.ajaxUrls['do_something_identifier'];
new AjaxRequest(url)
.withQueryArguments({ search: searchValue })
.get()
.then(async function (response) {
const resolved = await response.resolve();
console.log(resolved.result);
});
}, 250).bindTo(document.querySelector('#html-element'));
})
And I call it from the HTML like this :
<f:section name="Main">
<f:be.pageRenderer includeJavaScriptModules="{
0: '@vendor/extension/example.js'
}" />
Here is my Extension/Configuration/Backend/AjaxRoutes.php
:
<?php
return [
'do_something_identifier' => [
'path' => '/extension/controller/do-something',
'target' => VendorExtensionControllerExampleController::class . '::doSomethingAction'
],
];
Here is my Extension/Configuration/JavaScriptModules.php
<?php
return [
'dependencies' => ['core', 'backend'],
'imports' => [
'@vendor/extension/' => 'EXT:extension/Resources/Public/JavaScript/',
],
];
Here is my Extension/Configuration/TypoScript/setup.typoscript
plugin.tx_extension {
mvc.callDefaultActionIfActionCantBeResolved = 1
view {
templateRootPaths {
10 = {$plugin.tx_extension.view.templateRootPath}
}
partialRootPaths {
10 = {$plugin.tx_extension.view.partialRootPath}
}
layoutRootPaths {
10 = {$plugin.tx_extension.view.layoutRootPath}
}
}
}
The offical docs mentions this :
.Since the route is registered in
AjaxRoutes.php
it is exposed to JavaScript now and stored in the globalTYPO3.settings.ajaxUrls
Where is the problem exactly ?
Thank you in advance.
pixilatedDev is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
8