AJAX only gets JSON representation of first page in blog

The CMS Questions
1

I have a list of links to articles from my blog that dynamically load a json representation of my articles.
For some reason my AJAX only seems to load the first page in my articles.

This is my html

<a class="load-article" href="<?= $article->url() ?>" data-page="<?= $article->url() ?>">
  <h3 ><?php echo html($article->title()) ?></h3>
</a>

This is my JSON

<?php

$html = '';
$html .= snippet('article', array('article' => $page), true);

echo json_encode($html);

?>

And this is the AJAX

$(function(){
  var element = $('.load-article');
  var url     = element.data('page') + '.json';
  var target  = $('.article-container');

  $('.load-article').on('click', function(e) {
    e.preventDefault();

    $.get(url, function(data) {
      $(target).append(data);
    });
  });
}),
2

You JavaScript does not work correctly. You need to get the attribute of the clicked element like this:

$('.load-article').on('click', function(e) {
    e.preventDefault();
    var target  = $('.article-container');
    var url   =$(this).data('page') + '.json';
  
    $.get(url, function(data) {
      $(target).append(data);
    });
  });
1 Like
3

Thank you again @texnixe for your fantastic help