Custom AJAX error reporting for Tapestry 5

ajax-error-reporting.js

define(["jquery", "t5/core/events", "t5/core/zone", "t5/core/ajax", "underscore"], function($, events, zone, ajax, _) {
    return function(messages) {
        var dialogTemplate = '<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">' +
                               '<div class="modal-dialog">' +
                                 '<div class="modal-content">' +
                                   '<div class="modal-header">' +
                                     '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                                     '<h3 class="modal-title" id="exampleModalLabel">' + messages.title + '</h3>' +
                                   '</div>' +
                                   '<div class="modal-body"><p class="lead">' + messages.text + '</p><p class="text-danger">{{errorMessage}}</p>' +
                                   '</div>' +
                                 '<div class="modal-footer">' +
                                    '<div class="text-center"><button type="button" class="btn btn-danger" data-dismiss="modal">' + messages.button + '</button></div>' +
                                 '</div>' +
                                '</div>' +
                              '</div>' +
                            '</div>';
        
        var addAjaxOverlay = function(event, spec) {
            event.preventDefault()
            event.stopImmediatePropagation()
    
            var attr, parameters, simpleIdParams, zone;
            var zone = $(event.target).closest("[data-container-type=zone]");
            var height = zone.height();
            var overlay = height >= 200 ?
            		jQuery("<div class='zone-ajax-overlay'/>") :
        			jQuery("<div class='zone-ajax-overlay-small'/>")
        			
    		zone.prepend(overlay);
        	overlay.width(zone.width());
            overlay.height(zone.height()+5);
            
            var attr = zone.attr("data-zone-parameters");
            var parameters = attr && JSON.parse(attr);
    
            var simpleIdParams = zone.attr("data-simple-ids") ? {
                "t:suppress-namespaced-ids": true
            } : void 0;
    
            return ajax(spec.url, {
                data: _.extend({
                    "t:zoneid": zone.attr('id')
                }, simpleIdParams, parameters, spec.parameters),
    
                success: function(response) {
                    var _ref;
                    return zone.trigger(events.zone.update, {
                        content: (_ref = response.json) != null ? _ref.content : void 0
                    });
                },
    
                failure: function(response) { 
                    var errorJson = JSON.parse(response.text)
                    jQuery('.zone-ajax-overlay').remove()
                    jQuery('.zone-ajax-overlay-small').remove()
                    jQuery(document.body).append(dialogTemplate.replace('{{errorMessage}}', errorJson._tapestry._content))
                    $('#exampleModal').modal({show: true})
                    console.log("Server error: " + errorJson._tapestry._content);
                }
            });        
        };
     
        // handle form submits 
        jQuery('form').bind(events.zone.refresh + ".overlay", addAjaxOverlay);
        
        // handle other zone updates
        jQuery(document.body).bind(events.zone.refresh + ".overlay", addAjaxOverlay);
        
        // fix things after updating the zone
        jQuery(document.body).bind(events.zone.update + ".overlay", function(){ 
        	jQuery('.zone-ajax-overlay').remove();
        	jQuery('.zone-ajax-overlay-small').remove();
        	
        	// rebind event handlers
        	jQuery('form').bind(events.zone.refresh + ".overlay", addAjaxOverlay);
//          jQuery(document.body).bind(events.zone.refresh, addAjaxOverlay);
    	});
    };
});