Yii 2 No Refresh on SideNav Click - php

Question

I have a SideNav in my bizadmin.php view:
<div class="row">
<div class="col-xs-3" id="sidenav">
<?php
echo SideNav::widget([
'type' => 'default',
'encodeLabels' => false,
//'heading' => $heading,
'items' => [
['label' => 'Add Staff', 'icon' => 'user', 'url' => ['/user/index']],
['label' => 'Store Configuration', 'icon' => 'cog', 'url' => ['/store/index']],
['label' => 'Add Transaction', 'icon' => 'duplicate', 'url' => ['/transaction/index']],
['label' => 'Add Account', 'icon' => 'book', 'url' => ['/account/index']],
],
]);
?>
</div>
<div class="col-xs-7">
<h2 id="bizstorename">Store Name</h2>
<h5>This is a store description. You can put anything here as long as it describes your store.</h5>
</div>
</div>
It looks like this:
Is there a way that when I click an item on my SideNav, it will NOT redirect to another page, but instead, a page will just be loaded inside a div (for example, in my case, inside <div class="col-xs-7">) beside the SideNav without refreshing the entire page.
I think I need to use jQuery or Ajax of some sort but I don't know how. Please let me know your thoughts.

Answer 1

Use jQuery's .load method to fetch a page and then append to #result:
$script = "
$('#sidenav ul li a').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#result').load(url);
});
";
$this->registerJs($script, $this::POS_READY);
See jQuery's docs for more info.