Calling a JavaScript method before rendering - cakephp

Question

I have one-page app where header, footer and top navigation are static and the "pages" are opened with Ajax.
Example:
Element from the main navigation:
Something
JavaScript:
$('body').on('click', '[data-open-dynamic]', function () {
var url = $(this).data('openDynamic');
openDynamic(url);
})
function openDynamic(url)
{
$.ajax({
url: url,
async: true,
success: function (data) {
//some other logic
$('.content').html(data).fadeIn();
}
})
}
The problem is that I need to open these pages from direct URLs also. Now if I try to open domain.com/controllerName/actionName the design is broken as the layout is set to ajax in the controller:
public function initialize()
{
parent::initialize();
$this->layout = 'ajax';
}
I tried to do something with beforeFilter(), beforeRender(), shutdown() but it seems the JavaScript file containing the method openDynamic() is not loaded yet and I can't call it.
public function beforeRender(\Cake\Event\Event $event)
{
parent::beforeRender($event);
$url = $event->subject->request->here; // the URL is correct
echo 'openDynamic("' . $url . '");';
$this->response->stop();
}
Also I'm not sure if the header, footer and navigation will be loaded properly in this way. How can I achieve this?

Answer 1

How about only setting the layout to be ajax if the page is requested via AJAX? You can test this using $this->request->is('ajax'):-
public function beforeRender(\Cake\Event\Event $event)
{
parent::beforeRender($event);
if ($this->request->is('ajax')) {
$this->layout = 'ajax';
}
}
This would be cleaner than mixing JavaScript with PHP in your code.