Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Hi, dear community

Is someone using Ajax data loading with CouchCMS templates? This is something that I don't know yet, but wish to master. Any hints appreciated, how to start and maybe some good sample to understand it - if you got something please share.

Thanks a ton!
Hi @trendoman.

We used some AJAX techniques for the existing sample shopping cart (http://www.couchcms.com/demo/simple/index.php), when one updates the cart items.

The following is a template which outputs all of the shopping cart data in JSON - https://github.com/cheesypoof/CouchCMS-Cart-JSON-Template.

For a simple example, please study the two templates below (utilizes jQuery). The idea here is that we have one template that supplies the relevant data in JSON format, and another which requests this data to display in the desired manner.

ajax-listing.php
Code: Select all
<?php require_once('couch/cms.php'); ?>

<cms:template hidden='1' title='AJAX Listing'/>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>

    <body>
        <div id="listing"></div>

        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script>
            var json_url = "<cms:link 'json-data.php'/>";

            $.ajax({
                url: json_url,
                dataType: "json"
            }).done(function(data) {
                var items = "";

                for (var i = 0; i < data.pages.length; i++) {
                    items += '<p>';
                    items += '<a href="' + data.pages[i].page_link + '">' + data.pages[i].page_title + '</a>';
                    items += ' published on <em>' + data.pages[i].page_date + '</em>';
                    items += '</p>';
                }

                $("#listing").html(items);
            });
        </script>
    </body>
</html>

<?php COUCH::invoke(); ?>


json-data.php
Code: Select all
<?php require_once('couch/cms.php'); ?>

<cms:content_type 'application/json'/>

<cms:template hidden='1' title='JSON Data'/>

{
    "pages": [
        <cms:pages masterpage='designs.php'>
            {
                "page_title": "<cms:addslashes><cms:show k_page_title/></cms:addslashes>",
                "page_date":  "<cms:date k_page_date 'F j, Y'/>",
                "page_link":  "<cms:show k_page_link/>"
            }
            <cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
        </cms:pages>
    ]
}

<?php COUCH::invoke(); ?>
Thank you, @cheesy. I will study your post carefully! :D
Am I correct, that the only way to pass parameters to 'data-feeder' template would be querystrings in url?
var json_url = "<cms:add_querystring "<cms:link 'json-data.php'/>" 'page_id=123&custom_field=some_field_name' />";
That approach is perfectly valid, but it can however be accomplished more elegantly like so:
Code: Select all
var json_url = "<cms:link 'json-data.php'/>";
var json_url_params = {
    "page_id": "123",
    "custom_field": "some_field_name"
};

$.ajax({
    url: json_url,
    data: json_url_params,
    dataType: "json"
});
You can view the full documentation at https://api.jquery.com/jquery.ajax/.
5 posts Page 1 of 1
cron