Hallo Leute,
es ist hier wahrscheinlich schon einige Male behandelt worden, aber ich habe nichts gefunden das mir wirklich geholfen hat. Bin aber für Links oder Hinweise diesbezüglich dankbar, falls ich was übersehen haben sollte.
Ich möchte eine Extension bauen in Form einer Galerie mit Großbild, dazugehöriger Beschreibung und kleinen Vorschaubildern. Die Vorschaubilder sollen hier als Trigger dienen. Bei Klick sollte sich das Großbild und die Beschreibung ändern. Damit das ganze nicht immer die ganze Seite neu lädt: natürlich Ajax.
Nach dem ich alle Dispatcher mit eID und verschiedene Beschreibungen mit typeNum ausprobiert habe, die ich finden konnte (unter anderem die Extension form4 AJAX), habe ich mich für die eID und den Dispatcher entschieden.
Meine Vorgehensweise:
Als erstes eID-Dispatcher in der ext_localconf.php registriert
$TYPO3_CONF_VARS['FE']['eID_include']['ajaxDispatcher'] = 'EXT:wuwwsimplegallery/Classes/Utility/AjaxDispatcher.php';
Dann einen Dispatcher angepasst und in entsprechendem Verzeichnis abgelegt (In diesem Fall der Dispatcher von t3developer für typo3 6.1 mit der beschriebenen Anpassung für typo3 6.2.3):
...
*************************************************************** */
/**
* Gets the Ajax Call Parameters
*/
$ajax = \TYPO3\CMS\Core\Utility\GeneralUtility::_GP('request');
/**
* Set Vendor and Extension Name
*
* Vendor Name like your Vendor Name in namespaces
* ExtensionName in upperCamelCase
*/
$ajax['vendor'] = 'WUWW';
$ajax['extensionName'] = 'wuwwsimplegallery';
/**
* @var $TSFE \TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController
*/
$TSFE = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController', $TYPO3_CONF_VARS, 0, 0);
\TYPO3\CMS\Frontend\Utility\EidUtility::initLanguage();
// Get FE User Information
$TSFE->initFEuser();
// Important: no Cache for Ajax stuff
$TSFE->set_no_cache();
//$TSFE->checkAlternativCoreMethods();
$TSFE->checkAlternativeIdMethods();
$TSFE->determineId();
$TSFE->initTemplate();
$TSFE->getConfigArray();
\TYPO3\CMS\Core\Core\Bootstrap::getInstance();
$TSFE->cObj = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer');
$TSFE->settingLanguage();
$TSFE->settingLocale();
/**
* Initialize Database
*/
#\TYPO3\CMS\Frontend\Utility\EidUtility::connectDB();
/**
* @var $objectManager \TYPO3\CMS\Extbase\Object\ObjectManager
*/
$objectManager = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\CMS\Extbase\Object\ObjectManager');
/**
* Initialize Extbase bootstap
*/
$bootstrapConf['extensionName'] = $ajax['wuwwsimplegallery'];
$bootstrapConf['pluginName'] = $ajax['wuwwsimplegallery_pi1'];
$bootstrap = new TYPO3\CMS\Extbase\Core\Bootstrap();
$bootstrap->initialize($bootstrapConf);
$bootstrap->cObj = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('tslib_cObj');
/**
* Build the request
*/
$request = $objectManager->get('TYPO3\CMS\Extbase\Mvc\Request');
$request->setControllerVendorName($ajax['vendor']);
$request->setcontrollerExtensionName($ajax['extensionName']);
$request->setPluginName($ajax['pluginName']);
$request->setControllerName($ajax['controller']);
$request->setControllerActionName($ajax['action']);
$request->setArguments($ajax['arguments']);
$response = $objectManager->create('TYPO3\CMS\Extbase\Mvc\ResponseInterface');
$dispatcher = $objectManager->get('TYPO3\CMS\Extbase\Mvc\Dispatcher');
$dispatcher->dispatch($request, $response);
echo $response->getContent();
//die();
...
als nächstes in meinem Controller "ImageDataController" in der "galleryAction" eine if-Abfrage, die die Operationen für den Ajax-Request beinhaltet:
public function galleryAction() {
if($this->request->hasArgument('displayUid')){
//for the display
$displayUid = $this->request->getArgument('displayUid');
$displayData = $this->imageDataRepository->findByUid($displayUid);
$this->view->assign('displayData', $displayData);
//list
$imageData = $this->imageDataRepository->findAll();
$this->view->assign('imageData', $imageData);
//dimensions
$thumbWidth = $this->settings['flexform']['imageDimensions']['thumbWidth'];
$this->view->assign('thumbWidth', $thumbWidth);
$thumbHeight = $this->settings['flexform']['imageDimensions']['thumbHeight'];
$this->view->assign('thumbHeight', $thumbHeight);
$imgWidth = $this->settings['flexform']['imageDimensions']['imgWidth'];
$this->view->assign('imgWidth', $imgWidth);
$uploadPath = "uploads/tx_wuwwsimplegallery/";
$this->view->assign('uploadPath', $uploadPath);
$content = $this->view->render();
return $content;
//\TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump($content);
}
...
Bei dem var_dump wird genau das Stück HTML ausgegeben das ich haben will, das passt also so weit.
Das Template für den gallery-view sieht folgendermaßen aus:
<f:layout name="Default" />
<f:section name="main">
<f:flashMessages renderMode="div" />
<f:comment>Das Große Bild mit Beschreibung</f:comment>
<div class="displayImageBox">
<a href="{displayData.imagelink}" class="displayImageLink">
<img src="{uploadPath}{displayData.image}" alt="{displayData.title}" width="{imgWidth}" class="displayImage"/>
</a>
<p>
{displayData.description}
</p>
</div>
<f:comment>Die Vorschaubilder</f:comment>
<f:for each="{imageData}" as="imgdat">
<a href="index.php" class="triggerLink" id="{imgdat.uid}">
<f:image src="{uploadPath}{imgdat.image}" alt="{imgdat.title}" width="{thumbWidth}" height="{thumbHeight}"/>
</a>
</f:for>
</f:section>
Um das ganze in die Wege zu leiten hab ich jetzt noch ein kleines bisschen jquery/AJAX eingebunden.
Hier soll erst einmal nur das HTML aus dem Controller im Alert ausgegeben werden. Später soll das natürlich noch an die Stelle wo Großbild und Beschreibung sind. Aber das mach ich dann, wenn der Request mal funktioren sollte.
$(document).ready( function(){
$('.triggerLink').click(function(e) {
e.preventDefault();
//var changedArea = $('.tx_wuwwsimplegallery'); soll später ersetzt werden
var dUid = $(this).attr('id');
var url = window.location;
$.ajax({
async: 'true',
url: url,
type: 'POST',
data: {
eID: "ajaxDispatcher",
request: {
pluginName: 'wuwwsimplegallery',
controller: 'ImageData',
action: 'gallery',
arguments: {
'displayUid': duid
}
}
},
dataType: "html",
success: function(result) {
console.log(result);
alert(result);
},
error: function(error) {
console.log(error);
}
})
})
});
Das Ergebnis:
Der Request wird ausgeführt (der Alert unter success erscheit).
Jedoch ist der Alert leer und in der Konsole wird "Leerstring" gemeldet.
Meine Vermutung:
Entweder Der Request kommt nicht bis in die Action. Is aber glaub ich nicht der Fall, weil bei angabe einer nicht vorhandenen action oder controller, der Request fehlschlägt.
Oder es liegt irgendwo an einer falschen Schreibweise. Bei dem vielen Suchen hab ich zB. Pluginnamen mit und ohne tx_ und/oder pi1 gesehene, Aktionen und Controller mit oder ohne "Action" und "Controller" hinten drann. Hier weiß ich ehrlich gesagt auch nicht, was da das richtige ist.
Typo3 Version ist 6.2
Wäre echt super, wenn da vielleicht mal jemand drüber schaut. Ich sitz da schon länger dran.
Auch Links und Hinweise nehme ich gern an.
Vielen Dank schon mal.
Gruß
Eduard