How to get started with ElementAPI & Ajax

Question

This is related to the question previously asked and answered by OP. I tried to follow this method but couple of things that I don't understand (and of course can't solve the issue because of that).

I have a page where I fetch data based on a field (it is text field whose values are mm/yy and then I need to look for data that belong to certain categories but that is for round 2). I have drop downs, click on year, then click on the month and that would be the filter for entries.

1: How to do I call the code (even though I tried using this code ElementAPI - Can I use javascript/ajax to load json). I have a button which is supposed to call news.json but nothing happen. 2: He is using _layout.html to put that ajax call. I have many pages where I need to fetch data with different parameters, so ideally I would like to have the ajax code in the template itself rather than _layout.html

What am I really asking is for a working example that I can look at as I find it very confusing at this point. Like how would I debug/ look at the return values from news.json?

Any help is appreciated. Thank you

Answer 1

I don't think I quite understand, so I apologize in advance for what will be some revised answers.

news.json doesn't really exist. Meaning, I don't have a physical file called news.json in the filesystem anywhere. It is just an endpoint, and you'll want one for each of your calls.

For example: news.json or blog.json or events.json

I have many pages where I need to fetch data with different parameters

That's no problem. I would still keep your javascript in the _layout template just to keep things clean. If you put js in each of your templates, you'll end up having chunks of js all over.

You can define different listeners for different things within a single docReady

$(function(){ 
    $('news').click(function(){
        // Ajax for news
    });

    $('events').click(function(){
        // Ajax for events
    });


    $('blog').click(function(){
        // Ajax for blog
    });
});

Like how would I debug/ look at the return values from news.json

I use chrome for all development - so I'll right click anywhere and choose "Inspect Element". I'll then click on the network tab. That way I can see the XHR requests.

Once you click the button, you can see the request being made, and the response that is returned. It will look something like this:

 {"data":[{"title":"We just installed Craft!","url":"http:\/\/craftsandbox.dev\/news\/2016\/we-just-installed-craft","jsonUrl":"http:\/\/craftsandbox.dev\/news\/3.json"}],"meta":{"pagination":{"total":1,"count":1,"per_page":100,"current_page":1,"total_pages":1,"links":[]}}}

From there you will parse through the response and handle it however you want. In the past I've used things like mustache to keep the templates as clean as possible.

Hopefully this helps a little? Let me know and I can revise the answer to help get you rolling. There is much about the ElementAPI I am unfamiliar with myself, but since you were referencing a thread I answered I thought I'd try and help.