Javascript TYPO3在同一容器中打开actionlink

我用扩展生成器创建的TYPO3扩展遇到了一个小问题。 扩展生成日历并显示即将发生的事件的列表。

代码列表.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>

{event.title}{event.date}

{scriptDates}
//用于生成日历的脚本

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

但是，当单击链接的Listitem时，它会将包含详细信息的pluginarea作为新页面重新加载。我更希望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);
}

/**
*行动清单
*
*@返回无效
*/
公共职能清单行动（）
{
$events=$this->eventsRepository->findAll（）；
$this->view->assign（'events'，$events）；
/*获取所有事件并将其转换为json for js calendar*/
$allNotes=''；
/**@var Event$Event*/
foreach（$events作为$event）{
$tempArr=array（“日期”=>$event->getDate（）->format（“Y-m-d”），“注意”=>$event->getTitle（），“说明”=>$event->getLink（），“可选”=>stuff”）；
$allNotes.=json_编码（$tempArr）。“，”；
}
/*创建脚本以使用js in.html中的数据*/
$script=”
var jsondate=[“$allNotes.”；
";
/*将js脚本发送到list.html以插入js日历*/
$this->view->assign（'scriptDates'，$script）；
}
/**
*动作秀
* 
*@param\TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events$Events
*@返回无效
*/
公共函数showAction（\TBPartnerNet\TbPartnerTerminkalender\Domain\Model\Events$Events）
{
$this->view->assign（'events'，$events）；
}

---

谢谢你的帮助

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

1） 介绍一种生成要显示的数据（作为JSON）的web服务：

• 在TYPO3和客户端（JavaScript）模板构建中需要一个AJAX端点（纯JavaScript或简单[如mustache]或其他[如angular、vue]模板库）

2） 介绍一种web服务，它生成插件的HTML：

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

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

• 不需要更改TYPO3，只需要一点JavaScript
  代码示例：

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

---

对于1）和2）您需要一个AJAX端点。对于v8及以下版本，这是不合法的：要么是所谓的pageType方法，要么是helhum/typoscript渲染之类的助手扩展，要么是所谓的eID方法（不推荐！）。对于v9，我们使用了中间件，这使得提供web服务变得更加干净。

我想用一些JavaScript代码来回答。但我首先应该知道：你想要jQuery还是纯JavaScript解决方案？我更喜欢jQuery和你的TYPO3版本（如果你想引入AJAX端点），就像我想的那样，目前使用的是8.7.19thx。3/4年前刚开始使用TYPO3，类似的事情真的让我很烦XD。我知道我会使用选项3，但会检查其他解决方法。无论如何Thx

# 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
      }
    )
  }
)