柯比路由和Ajax

Question

I want my ajax call loaded content, also work with an url input. But all I get is the error page.

I am trying to achieve this with the routing which comes with Kirby.

Routing

return [
  'routes' => [
    [
      'pattern' => 'speaker/(:any)',
      'action'  => function () {
        $kirby = new Kirby();
        $page = page('speaker-detail');

        if($page) {
            $html = $kirby->render($page);
            return new Response($html);
        } else {
            $page = site()->errorPage();
            site()->visit($page);
        }
      },
      'method' => 'POST'
    ],
    [
      'pattern' => 'speaker/(:any)',
      'action'  => function () {
        $page = page('speaker-detail');
            if($page) {
                $data = array('modal' => $page->url());
                return array('keynote', $data);
            } else {
                $page = site()->errorPage();
                return site()->visit($page);
            }
      }
    ]
  ]
];

The container for the content

<div id="modal-container" data-modal="<?php echo isset($modal) ? $modal : '' ?>" class="subpageWrapper"></div>

And the ajax call

var startModal = $('.subpageWrapper').data('modal');

if (startModal) {
    openUrlInModal(startModal, $('.subpageWrapper'));
}

$("body").on("click touch", ".loadSubpage", function (event) {

    event.preventDefault(); 
    var href = $(this).attr("href");
    window.history.pushState(null,null,href);

    function openUrlInModal(){
        $.ajax({
            url:href,
            success: function(data){
                $(".subpageWrapper").html(data);
            }
        });
    }

    openUrlInModal();
});

It would be nice if someone can help me here, or knows why its not working as expected.