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

Content Delivery Monitoring in AWS with CloudWatch

This post describes a way of monitoring a Tridion 9 combined Deployer by sending the health checks into a custom metric in CloudWatch in AWS. The same approach can also be used for other Content Delivery services. Once the metric is available in CloudWatch, we can create alarms in case the service errors out or becomes unresponsive. The overall architecture is as follows: Content Delivery service sends heartbeat (or exposes HTTP endpoint) for monitoring Monitoring Agent checks heartbeat (or HTTP health check) regularly and stores health state AWS lambda function: runs regularly reads the health state from Monitoring Agent pushes custom metrics into CloudWatch I am running the Deployer ( installation docs ) and Monitoring Agent ( installation docs ) on a t2.medium EC2 instance running CentOS on which I also installed the Systems Manager Agent (SSM Agent) ( installation docs ). In my case I have a combined Deployer that I want to monitor. This consists of an Endpoint and a

Debugging a Tridion 2011 Event System

OK, so you wrote your Tridion Event System. Now it's time to debug it. I know this is a hypothetical situtation -- your code never needs any kind of debugging ;) but indulge me... Recently, Alvin Reyes ( @nivlong ) blogged about being difficult to know how exactly to debug a Tridion Event System. More exactly, the question was " What process do I attach to for debugging even system code? ". Unfortunately, there is no simple or generic answer for it. Different events are fired by different Tridion CM modules. These modules run as different programs (or services) or run inside other programs (e.g. IIS). This means that you will need to monitor (or debug) different processes, based on which events your code handles. So the usual suspects are: dllhost.exe (or dllhost3g.exe ) - running as the MTSUser is the SDL Tridion Content Manager COM+ application and it fires events on generic TOM objects (e.g. events based on Tridion.ContentManager.Extensibility.Events.CrudEven