Hello,
I have a situation and need help implementing it. I am developing a single page website and I have a Categories section as seen in the image below:

Category page.jpg (698.57 KiB) Viewed 5334 times

Now this is what I want to be able to do: I want to be able to create the list of categories using dynamic folders and then add nominees using couch page templating procedure. Now when a user clicks on a folder link, instead of the link opening to the folder view on a new page and show the list of nominees on under the folder, I want to be able to use some form of ajax code to dynamically load the list of nominees on the right side of the Categories pages as seen in the picture above and then an active class will be added to the current folder whose folderview is shown on the right side of the page.

Any help will be very much appreciated

[trendoman]

@adimpressions, this is a very welcomed approach from the visitor point of view. Something is to be said: If design between pages doesn't change, then regular reloading is almost unnoticeable. If ajax is still a preferred way here, then there are many samples of ajax page loading in the forum, including topics completely devoted to Ajax + CouchCMS with code samples.

I tried implementing but couldn't find my way around. Can you point me to the right direction? Any links where I can refer to

[trendoman]

Please, paste this in Google Search:

ajax site:couchcms.com/forum

Post your code samples if you are stuck.
Also in SERP take note of my recent post viewtopic.php?f=4&t=8963#p26865 with a sample of Ajax-connector template.

Thanx trendoman, will try it and get back to you.

@trendoman, following the discussion about ajaxifying couch, I am still unable to implement it in my project. So this is what I have done so far:
1. I created a template called 'Nominees' and enabled dynamic folders (categories) so I can place each nominee under a category.
2. On the index page I listed the folders using this:

Code: Select all

<ul id="folders" class="categoryList">
              <cms:folders masterpage="nominee.php" hierarchical='1' depth='1'>
             <li><a href="<cms:show k_folder_link />">Overall Logistics &amp; Transport Excellence Award</a></li>
             </cms:folders>
          </ul>

3. On the same index page I have a <div class="list-of-nominees-under-folder"></div>, into which I want to use ajax to fetch the nominees data into.

4. I used this jquery-ajax script to fetch and display the nominees under each folder name I click so that the pahe doesnt load:

Code: Select all

var $categorylistItemsAnchors = $("#folders li a");
   
   $categorylistItemsAnchors.each(function(){
      var $this = $(this);
      var $folder_anchor = $this.attr('href');   
      
      $this.on('click', function(e){
         e.preventDefault();
         
         var $nominee_list = $('.list-of-nominees-under-folder');
         
         $nominee_list.html("<h1>Loading....</h1>");
         
         $.ajax({
            type: 'GET',
                         url: $folder_anchor,
                         success:function(data){
                         var $data = $(data);
                         $modal.html($data);
                         },
            error:function(){
                       alert("error");
                      }
                     });         
      });
   }); 

I used the json-data.php and the ajax-listing.php scripts but didnt know how to implement them.
json-data.php

Code: Select all

<?php require_once('glota/cms.php'); ?>

<cms:content_type 'application/json'/>

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

{
    "pages": [
       
        <cms:pages masterpage='nominee.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/>"
                "page_link":  "<cms:show k_page_foldername/>"
            }
            <cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
        </cms:pages>
    ]
}

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

ajax-listing.php

Code: Select all

<?php require_once('glota/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="js/jquery-2.2.0.min.js"></script>
        <script>
         $(document).ready(function(){
            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(); ?>

Can you please work on this for me. Your help will be very much appreciated.

NB: my website project is a single page website

maybe this

in your json-data.php two times page_link and no comma between them

[KK]

@adimpressions,

Following is a complete *working* solution adapted from the code you posted.

For this, you'll need two templates -
nominee.php - will show a list of folders clicking any of which will invoke the second template below
json-data.php - will send back folder info in JSON format

Let us start with json-data.php.

Code: Select all

<?php require_once("couch/cms.php"); ?>
<cms:content_type 'application/json'/>
<cms:template hidden='1' title='JSON Data'/>

<cms:set my_template='nominee.php' />

<cms:set my_folder="<cms:gpc 'folder' />" />
<cms:if "<cms:folder_exists my_folder masterpage=my_template />" >
    {
        "pages": [
           
            <cms:pages masterpage=my_template folder=my_folder>
                {
                    "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/>",
                    "page_folder_name":  "<cms:show k_page_foldername/>"
                }
                <cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
            </cms:pages>
        ]
    }
<cms:else />
    <cms:abort is_404='1' />
</cms:if>
<?php COUCH::invoke(); ?>

Register it (change the 'couch/cms.php' line if required).
The way it is coded, it expects a querystring parameter in URL named 'folder' with the name of a valid folder in nominee.php.

To test it, forget AJAX for the moment and first visit it manually by typing its URL in the browser e.g.

http://www.yourhost.com/json-data.php?folder=xyz

Make sure to use the actual name of some folder in place of xyz above.

You should see a JSON representation of the pages belonging to that folder.
If you pass an invalid name (i.e. folder does not exist), you'll get a 404 error.

OK, with the assurance that our JSON generator is working as expected, we can move to the actual template that will call this JSON template via AJAX.

For that, use the following code in nominee.php -

Code: Select all

<ul id="folders" class="categoryList">
    <cms:folders masterpage="nominee.php" hierarchical='1' depth='1'>
    <li><a href="<cms:add_querystring "<cms:link 'json-data.php' />" "folder=<cms:show k_folder_name />" />"><cms:show k_folder_title /></a></li>
    </cms:folders>
</ul>

<div class="list-of-nominees-under-folder"></div>

<script>
$( function(){
    var categorylistItemsAnchors = $("#folders li a");
       
    categorylistItemsAnchors.each(function(){
        var $this = $(this);
        var folder_anchor = $this.attr('href');   

        $this.on('click', function(e){
            e.preventDefault();

            var nominee_list = $('.list-of-nominees-under-folder');
            nominee_list.html("<h1>Loading....</h1>");

            $.ajax({
                url: folder_anchor,
                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>';
                }

                nominee_list.html(items);
            }).fail(function (jqXHR, textStatus){
                alert( "Request failed: " + textStatus );
            });
        });
    }); 
});
</script>

Please notice how within <cms:folders>, we are linking to the JSON template passing it the folder names.

You may adapt the code to your liking but to begin with try it verbatim because it is tested to be working.

Hope it helps.

OK KK. Thanks very much. Will give it a try and get back to you

KK I did exactly as you instructed me but couldn't get the code to work. May be I should clarify the situation well:
I have these files:
1. nominee.php - It is a clonable template for adding nominees and it has dynamic folders turned on so that each nominee will fall under a category.
2. index.php - This page has 2 sections: 1 will be used to list the folders and the other section to list the nominees under each folder so that when a visitor clicks on a folder the list of nominees under that particular folder will be listed in the nominees section all through Ajax.

In your solution you asked me to put this:

Code: Select all

<ul id="folders" class="categoryList">
    <cms:folders masterpage="nominee.php" hierarchical='1' depth='1'>
    <li><a href="<cms:add_querystring '<cms:link "json-data.php" />' 'folder=<cms:show k_folder_name />' />"><cms:show k_folder_title /></a></li>
    </cms:folders>

inside the nominee.php page but that is not where I want to list the folders. They are supposed to be listed on the index.php page together with the list of nominees that fall under each of them.

NB: The nominee.php page is a clonable template that will only be used to add nominees and place each under a folder. Thank you