同一容器中的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创建的，可以单击元素以显示有关每个事件的详细信息。

但是，当单击链接的Listitem时，它将重新加载包含详细信息的插件区域作为新页面。如果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和模板的客户端（JavaScript）构建中的AJAX端点（纯JavaScript或简单的[e.g.胡子]或其他[例如angular，vue]模板库）。

2）介绍一种可生成插件HTML的Web服务：

• 需要TYPO3中的AJAX端点

3）通过AJAX提取整个页面（HTML），仅替换DOM中的日历部分：

• 不需要对TYPO3进行任何更改，只需要一点JavaScript

3）从您当前的角度来看最容易实现，但是当然不是最有效的方法。