Request Page via AJAX

Hey there,

i’m trying to load the content of a page with an animation.

example:

if i understand it right, i have to load the content of the black .content box via AJAX.
after some research in the forum i found this thread: Need help with Ajax requests with Kirby

after reading the thread i changed my code:

projects.php

<?php foreach($page->children()->visible()->filterBy('translationComplete', '1') as $item): ?>
  <li class="projects__project">
    <a class="load" data-target="#modal-container"  class="projects__link" href="<?= $item->url() ?>"><?= $item->title() ?></a>
 </li>
<?php endforeach ?>

 <div id="modal-container">asdf</div>

project.php

<?php if(!kirby()->request()->ajax()) { snippet('header'); snippet('project-overview-header-nofilter'); } ?>
       <?= $page->text()->kirbytext() ?>
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>

and my js:

var url = $('.load').data('url');
  function openUrlInModal(url, target){
    $.ajax({
     url: url,
      success: function(data) {
         $(target).append(data).addClass('modal');
          $('.modal').fadeIn('slow');
         }
    });
  }

  $('.load').bind('click', function(e) {
    var target = $(this).data("target");
    e.preventDefault();
    window.scrollTo(0,0);
    openUrlInModal($(this).attr('href'), target);
  });

when i hit one of the <a class="load"> i get a full pageload. is there any other good beginner resource for something like this?

thanks!

Quick question: Where do you get the data-url attribute from? Can’t find that in your code?

ahh. nowhere :confused:

something like this?

<a class="load" data-target="#modal-container" data-url="<?= $item->url() ?>"  class="projects__link" href="<?= $item->url() ?>"><?= $item->title() ?></a>

Yep, like that. Use some console.log() commands together with an open console to check if your code does what you expect it do do (is the button clicked, it the URL correct, do you get the right reponse etc.)

if already tried console.log(url); inside of $('.load').bind('click', function(e) { but nothing happend.

but if the data-url attribute was the problem i guess i can figure it out. thanks alot!

Actually, now that I opened my eyes a bit more, the url variable is not even needed. You can completely remove that line.

edit:

nevermind. works like a charm. silly me.

schönen tanz in den mai!

Great, what was the problem after all?

somehow i messed up the js include. i includeded it in .php and now it works. still fixing it.

two more thing:

  • can i extend this method to update the url?
  • can i make the javascript which is used in the projects work?

Yes, you can update the URL like this:

 $('.load').bind('click', function(e) {
     var url = $(this).attr('href'); 
    var target = $(this).data("target");
    e.preventDefault();
    window.scrollTo(0,0);
    openUrlInModal(url, target);
    
    if(url != window.location){
      window.history.pushState({path:url},'',url);
    }
  });

With the second question I guess you refer to accessing elements that are added to the DOM later? If so, you can use code like this (just an example)

$('some-element').on('click', 'body', function(e){
  // do something
});

That is, you delegate the event by adding an existing parent element (here: body) within the on() function.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.
(.on() | jQuery API Documentation)

1 Like

thanks!
you are fantastic.