Skip to main content

A DD4T.net Implementation - Pagination (AJAX)

This is the third and last post on the topic of implementing a pagination solution for lists of Dynamic Component Presentations retrieved by a query. If you haven't already done so, please read the first two posts to put things in context:

This post deals with client-side Javascript code performing the AJAX call to the server-side code and displaying the returned HTML.

In the current architecture, the server-side components render a snippet of HTML (i.e. the only piece of markup that changes between two page iterations). I use Javascript (JQuery) to replace the content of a container DIV with the HTML returned by the DD4T server-side partials. Since we receive rendered HTML back, it is quite simple to perform the DIV content replacement. No other rendering, parsing or processing is necessary as if we had received JSON back from the server.

I chose this approach because it fits better with the Tridion and DD4T architecture. I can easily reuse the Component Template and its view (and partial views) to render the same snippet of HTML for the paginated AJAX solution as well as for a normal embedded Component Presentation. I can also reuse the Controller, the models and builders. All these factors provide for a great deal of simplicity in coding and ease of maintenance of the code.

The Javascript uses JQuery just for fanciness, but it is actually not necessary to implement a simple AJAX call and a DIV content replacement. The following code example shows the initial mapping of an onclick event on an anchor tag nested inside an element with class pagination-container to a custom Javascript function pagination.

Also the code defines a generic function ajaxCall that performs a call to JQuery's $.ajax method and performs error checks and callback function execution.

$(document).ready(function () {
    myApp.init();
});

var myApp = {
    init: function () {
        $('body').on('click', '.pagination-container a', this.pagination);
    },

    ajaxCall: function (options, callback) {
        return $.ajax({
            url: options.url,
            type: options.type,
            data: options.data || {},
            success: function (data) {
                if (data.error !== undefined) {
                    console.log('error');
                } else {
                    callback(data);
                }
            },
            error: function () {
                console.log(error);
            }
        });
    },

Note that the DIV with class pagination-container is the output of the extension method Html.PagedListPager presented in the previous post. The onclick event is hooked to all anchor tags under this DIV and when clicked, the function pagination, shows here-below, is called:

    pagination: function () {
        var el = $(this),
            section = el.parents('.paged-section'),
            href = el.attr("href");

        myApp.ajaxCall({ url: href, type: 'GET' }, function (data) {
            section.html(data);
            section.find(":first-child").unwrap();
        });

        return false;
    }
}

Function pagination first calls our custom ajaxCall function and passes to it the URL of the anchor tag that was clicked. It also passes an anonymous callback function that the ajaxCall function executes in case the initial GET request to the AJAX URL is successful.

The callback function sets the inner HTML of the DIV with class pages-section (i.e. the container DIV of the paginated content returned by the AJAX Component Presentation). Finally, it needs to remove the first nested DIV under the 'section' DIV and thus executes the JQuery unwrap() function on the first child of the section node. This basically has as effect the removal of the first child DIV under the section node. This step is necessary in order to remove the duplicate DIVs introduced by simply changing the parent DIV innerHTML property.

The code above has been obviously greatly simplified in order to be easily readable and understandable as an example.


Comments

Popular posts from this blog

Running sp_updatestats on AWS RDS database

Part of the maintenance tasks that I perform on a MSSQL Content Manager database is to run stored procedure sp_updatestats . exec sp_updatestats However, that is not supported on an AWS RDS instance. The error message below indicates that only the sa  account can perform this: Msg 15247 , Level 16 , State 1 , Procedure sp_updatestats, Line 15 [Batch Start Line 0 ] User does not have permission to perform this action. Instead there are several posts that suggest using UPDATE STATISTICS instead: https://dba.stackexchange.com/questions/145982/sp-updatestats-vs-update-statistics I stumbled upon the following post from 2008 (!!!), https://social.msdn.microsoft.com/Forums/sqlserver/en-US/186e3db0-fe37-4c31-b017-8e7c24d19697/spupdatestats-fails-to-run-with-permission-error-under-dbopriveleged-user , which describes a way to wrap the call to sp_updatestats and execute it under a different user: create procedure dbo.sp_updstats with execute as 'dbo' as

Scaling Policies

This post is part of a bigger topic Autoscaling Publishers in AWS . In a previous post we talked about the Auto Scaling Groups , but we didn't go into details on the Scaling Policies. This is the purpose of this blog post. As defined earlier, the Scaling Policies define the rules according to which the group size is increased or decreased. These rules are based on instance metrics (e.g. CPU), CloudWatch custom metrics, or even CloudWatch alarms and their states and values. We defined a Scaling Policy with Steps, called 'increase_group_size', which is triggered first by the CloudWatch Alarm 'Publish_Alarm' defined earlier. Also depending on the size of the monitored CloudWatch custom metric 'Waiting for Publish', the Scaling Policy with Steps can add a difference number of instances to the group. The scaling policy sets the number of instances in group to 1 if there are between 1000 and 2000 items Waiting for Publish in the queue. It also sets the

I Have Gone Dark

Maybe it's the Holidays, but my mood has gone pretty dark. That is, regarding the look and feel of my computer and Tridion CME, of course. What I did was to dim the lights on the operating system, so I installed Placebo themes for Windows 7 . I went for the Ashtray look -- great name :) My VM looks now like this: But, once you change the theme on Windows, you should 'match' the theme of your applications. Some skin easily, some not. The Office suite has an in-built scheme, which can be set to Black , but it doesn't actually dim the ribbon tool bars -- it looks quite weird. Yahoo Messenger is skinnable, but you can't change the big white panels where you actually 'chat'. Skype is not skinnable at all. For Chrome, there are plenty of grey themes. Now i'm using Pro Grey . But then I got into changing the theme of websites. While very few offer skinnable interfaces (as GMail does), I had to find a way to darken the websites... Enter Stylish -- a pl