TYPO3 在同一个容器中打开动作链接

Question

我运行使用扩展生成器创建的 TYPO3 扩展遇到了一个小问题。该扩展程序生成日历并显示即将发生的事件列表。 Calendar with listed events

代码list.html

<div id="dncalendar-container"></div>

        <f:flashMessages />

        <div  class="tx_tbpartnereventcal">

            <f:for each="{events}" as="event">
                <f:link.action class="event-cont" action="show" controller="Events" arguments="{events : event}" target="popup">
                    <span class="event-title">{event.title}</span> <span class="event-date"><f:format.date format="Y-m-d">{event.date}</f:format.date></span><br>
                </f:link.action>
            </f:for>
        </div>

        <!--<f:debug>{_all}</f:debug>-->

        <f:format.raw>{scriptDates}</f:format.raw>
        <script type="text/javascript">
         //script to generate calendar
        </script>

列表是通过控制器中的标准 listAction 创建的，可以单击元素以显示有关每个事件的详细信息。

但是，当单击链接的列表项时，它会重新加载带有详细信息的插件区域作为新页面。如果 div.tx_tbpartnereventcal 只是将其自身的内容更改为详细信息，我会更喜欢它。

但是我不知道如何在 TYPO3 中使用 ajax 或者是否有其他方法。

编码控制器动作列表并显示：

/**
 * action list
 *
 * @return void
 */
public function listAction()
{
    $events = $this->eventsRepository->findAll();
    $this->view->assign('events', $events);


    /* get all events and turn into json for js calendar */
    $allNotes ='';
    /** @var Event $event */
    foreach ($events as $event) {
        $tempArr=array("date"=>$event->getDate()->format("Y-m-d"), "note" =>$event->getTitle(), "description" => $event->getLink(), "optional"=> "stuff");
        $allNotes .= json_encode($tempArr).",";
    }

    /* create script to use data in js in .html */
    $script = "
    <script>
        var jsondate = [".$allNotes."];
    </script>
    ";

    /* send js script to list.html to insert into js calendar */
    $this->view->assign('scriptDates', $script);
}


/**
* action show
* 
* @param \TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events $events
* @return void
*/
 public function showAction(\TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events $events)
{
   $this->view->assign('events', $events);
}

非常感谢您的帮助！

Answer 1

基本上有 3 种方法可以在该元素上实现客户端动态：

1) 引入一种web服务产生数据显示(如JSON):

需要 TYPO3 中的 AJAX 端点和客户端 (JavaScript) 构建模板（普通 JavaScript 或简单 [例如 mustache] 或其他 [例如 angular, vue] 模板库).

2) 介绍一种产生插件HTML的web服务:

需要 TYPO3 中的 AJAX 端点和一些 JavaScript

3) 通过 AJAX 获取整个页面 (HTML) 并且只替换 DOM 中的日历部分:

不需要对 TYPO3 进行任何更改，但 JavaScript

代码示例：

# register click handler for the date links on parent element (which will
# not change, thus you do not have to reregister the events after replacing the links)
$('.tx_tbpartnereventcal').on(
  'click',
  '.event-cont',
  function(ev) {
    ev.preventDefault()
    # https://api.jquery.com/jQuery.ajax/
    $.ajax(
      [
         url: ev.target.href
      ]
    ).done(
      function(data) {
        var $newPage = $(data),
            newPluginHtml = $newPage.find(.tx_tbpartnereventcal).html()

        $('.tx_tbpartnereventcal').html(newPluginHtml)
        # you notice a JavaScript to generate the calendar - 
        # maybe you could call it here
      }
    )
  }
)

3) 从您当前的观点来看是最容易实施的，但当然不是最高效的方法。

对于 1) 和 2)，您需要一个 AJAX 端点。对于 v8 及以下版本，这是不雅的：要么是所谓的 pageType 方法，要么是像 helhum/typoscript-rendering 这样的辅助扩展，要么是所谓的 eID 方法（不推荐！）。对于 v9，我们有中间件，这使得提供 Web 服务更加简洁。

TYPO3 在同一个容器中打开动作链接

TYPO3 open actionlink in same container

javascript

ajax

action

typo3

hyperlink