Load Subpages via ajax into a DIV in a sequence

Kirby 2 Solved ✅
1

Hi,

I am trying to create onePager as a basis for my portfolio page that should load its content via AJAX into an overlay div. The div contains an Ajax container as a data-target and prev / next links. The site should not reload on click because it is playing music or video or animations in the background. The content is organized in subpages of the main page.

CONTENT
1-home
---1-about
-----section.txt
-----media.jpg
---2-works
-----section.txt
-----media.jpg
---3-whatnot ...

I created a controller that should feed the links into the page which at least works on a first load but I dont know if and how to update this via JS and if it makes sense at all as a concept :wink: I guess there is a smarter way.

<?php
return function($site, $pages, $page) {
$sections = $page->children()->visible();
$firstsection = $sections->first();
$lastsection = $sections->last();
$currentsection = $firstsection;
            if ($currentsection == $firstsection){
                   $prev = $lastsection->url();
              }else {
                  $prev = $currentsection->prev()->url();
              }
            if ($currentsection == $lastsection){
                 $next = $firstsection->url();
               }else{
                 $next = $currentsection->next()->url();
               }
          return compact( 'prev', 'next' );
        };

and a home.php

<div id="overlay">
    <div class="overlay-nav__left">
        <a class="load" data-target="#ajax-container" href="<?= $prev ?>" >Previous</a>
    </div>
    <div id="ajax-container"></div>
    <div class="overlay-nav__right">
        <a class="load" data-target="#ajax-container" href="<?= $next ?>" >Next</a>
    </div>
  </div>

finally the JS with the AJAX Logic which I borrowed from here and which gives me a

GET http://localhost:8888/ch/home/work 500 (Internal Server Error)

$(document).ready(function(){
     $('.load').click(function(e){
    	 e.preventDefault();
		loadLink($(this)[0].href, true);

     });
     window.history.replaceState(null, {'data' : window.location.href});
     window.addEventListener('popstate', function(event) {
			loadLink(event.state.data, false);
	});
    });
function loadLink(urlload, newS){
  $.ajax({
    url : urlload,
    dataType : 'html'
  }).done(function(data){
	   if(newS) window.history.pushState({'data': urlload}, $(data).title, urlload);
	    setTimeout(function(){
        var newDoc = document.open("text/html", "replace");
        newDoc.write(data);
        newDoc.close();
     }, 500);
  });
}

I read through all the related posts and tutorials but I am having problems to tie it all together.
How do I update the links in the controller via Javascript.
How can I communicate to PHP variables and logic with Javascript in general?

My understanding is
The template creates the view.
the controller tweaks and serves the links to the template
the Javascript gets the link when clicked,
manipulates the browser history,
loads the next subpage via Ajax
and exchanges the content of the Ajax container.

Once I understood how it works I would love to do this independently with more than one loop.
And I guess this is by extending the page with custom methods.

Would it make sense to do all of this with custom page methods or even a page model?

Many thanks for reading this to the end :wink: and for any help.

2

Wouldn’t it be easier using the pagination object:

Controller:

<?php

return function($site, $pages, $page) {

  $children = $page->children()->visible()->paginate(1);
  $pagination = $children->pagination();


  return compact('children', 'pagination');

};
```

Template:

```
<?php if($pagination->hasPages()): ?>
    <div id="overlay">
        <div class="overlay-nav__left">
            <a class="load" data-target="#ajax-container" href="<?php if($pagination->isFirstPage()) { echo $pagination->lastPageUrl(); } else { echo $pagination->prevPageUrl(); } ?>" >Previous</a>
        </div>
        <div id="ajax-container"><?php echo $children->first()->title() ?></div>
        <div class="overlay-nav__right">
            <a class="load" data-target="#ajax-container" href="<?php if($pagination->isLastPage()) { echo $pagination->firstPageUrl(); } else { echo $pagination->nextPageUrl(); } ?>" >Next</a>
        </div>
      </div>
<?php endif ?>
```
1 Like
3

It definitely looks easier :wink: Thought about the pagination object, but wasn´t sure how to close the loop when the pagination is at first / last position. Will try that.

4

Navigation works like acharme now, many thanks!
I just need to fix the Ajax part and its perfect.