Troubleshooting an AJAX request JSON API

The CMS Questions
1

I using lord-executor’s Kirby JSON API. I believe I have it all set up correctly as when I enter “http://localhost:3000/portfolio/api/tree/projects” in to the browser I can see the JSON correctly displayed.

In the config I have:

c::set('jsonapi.built-in.enabled', true);
c::set('jsonapi.built-in.auth', false);
c::set('jsonapi.prefix', 'api');

The Javascript:

$(document).ready(function() {
    console.log( "ready!" );
    bindProject();
});

function bindProject() {
    $(".project-link").on("click.project", function() {
        console.log("clicked");
        var id = $(this).data("id");
        var $this = $(this);

        loadProject(id, function() {
            $("#previous, #next").show();
        })
    });
}

function loadProject(id, callback) {
    $.get(BASE + "api/page/projects/" + id, {}, function(data) {
        if (data.success == "true") {
            console.log("success");
            $("#project-info").attr("projectid", id);
            $("#project-title").html(data.title);
            $("#project-info").html(data.info);
            $("#project-year").html(data.info);
            $("#project-tags").html(data.tags);
            setProject();
        else {
            console.log("error")
        }
    }, "json")
}

I also get a 200 status in the inspector:

How do I go about troubleshooting this? I’m a novice with APIs and JSON, any pointers in the right direction would be greatly appreciated.

2

That line does not make sense. If I assume that .project is the ancestor of .project-link it should be:

 $(".project").on("click", ".project-link", function() {

Provided that .project is an element that exists in the DOM and will not be added or removed.

3

Thanks for replying. That was a namespace event as I was going to do something on mouseenter. I’ve now changed it to:

$(".project-link").on("click", function() {
        console.log("clicked");
        var media = $(this).data("media");
        var title = $(this).data("title");
        var id = $(this).data("id");
        var $this = $(this);

        loadProject(id, function() {
            $("#previous, #next").show();
        })
    });

This is my console with the logs:

Screen Shot 2017-05-19 at 10.48.25.png2880×294 38 KB

Apologies, I should have included my HTML for context.

<div id="mix-container" class="projects-cntt">
    <?php foreach($projects as $project): ?>
        <article class="project-link mix" data-id="<?= str::slug($project->title()->value)?>" data-title="<?= $project->title()->html() ?>" data-media="<?php if(!$page->intro()->empty()): ?><?= $project->files()->first()->url() ?><?php endif ?>">
           <a>
              <div>
                 <?= $project->year()->html() ?>
              </div>
              <div data-id="">
                 <img src="">
              </div>
              <div>
                  <?= $project->title()->html() ?>
              </div>
              <div>
                   <?= $project->tags()->html() ?>
              </div>
          </a>
       </article>
    <?php endforeach ?>
</div>

<div id="single-project-cnt">
      <div id="project">
            <div id="media-cnt">
                <div id-"">
                    <img src="" data-url="" alt="">
                </div>
            </div>
            <div id="project-info-wrapper">
                <div id="project-title">
                </div>
                <div id="project-year">
                </div>
                <div id="project-info" projectid="">
                </div>
                <div id="project-tags"></div>
                <div id="prev-project">
                    <span>Previous Project</span>
                </div>
                <div id="next-project">
                    <span>Next Project</span>
                </div>
            </div>
        </div>
    </div>
4

I still can’t get this to work.

Any help to diagnose the problem would be greatly appreciated

5

I realised my problem, instead of checking whether the connection was successful I was actually checking for a “success” key set to with the data “true”. So the problem was with my terrrible code. The plug-in is great.