Fix: Async display of child details such as with a modal was not resu…

…lting in a `responsive-display` event being triggered

This was in part due to the modal function not returning a value, but
also because the close needs to be triggered from a callback function
(since it isn't Responsive that triggers the close action).

https://datatables.net/forums/discussion/75728

js/dataTables.responsive.js

@@ -659,20 +659,30 @@ $.extend( Responsive.prototype, {
 		var that = this;
 		var dt = this.s.dt;
 		var details = this.c.details;
+		var event = function (res) {
+			$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
+		};
 
 		if ( details && details.type !== false ) {
 			var renderer = typeof details.renderer === 'string'
 				? Responsive.renderer[details.renderer]()
 				: details.renderer;
 
-			var res = details.display( row, update, function () {
-				return renderer.call(
-					that, dt, row[0], that._detailsObj(row[0])
-				);
-			} );
+			var res = details.display(
+				row,
+				update,
+				function () {
+					return renderer.call(
+						that, dt, row[0], that._detailsObj(row[0])
+					);
+				},
+				function () {
+					event(false);
+				}
+			);
 
 			if ( res === true || res === false ) {
-				$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
+				event(res);
 			}
 		}
 	},
@@ -1193,12 +1203,14 @@ Responsive.display = {
 	// have options passed into them. This specific one doesn't need to be a
 	// function but it is for consistency in the `modal` name
 	modal: function ( options ) {
-		return function ( row, update, render ) {
+		return function ( row, update, render, closeCallback ) {
 			if ( ! update ) {
 				// Show a modal
 				var close = function () {
 					modal.remove(); // will tidy events for us
 					$(document).off( 'keypress.dtr' );
+
+					closeCallback();
 				};
 
 				var modal = $('<div class="dtr-modal"/>')
@@ -1238,6 +1250,8 @@ Responsive.display = {
 					'<h2>'+options.header( row )+'</h2>'
 				);
 			}
+
+			return true;
 		};
 	}
 };

js/responsive.bootstrap.js

@@ -18,9 +18,9 @@ var _modal = $(
 );
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.modal ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -39,9 +39,12 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+
+			return true;
 		}
 	};
 };

js/responsive.bootstrap4.js

@@ -18,9 +18,9 @@ var _modal = $(
 );
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.modal ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -39,9 +39,12 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+
+			return true;
 		}
 	};
 };

js/responsive.bootstrap5.js

@@ -32,9 +32,9 @@ _display.modal = function ( options ) {
 		modal = new _bs.Modal(_modal[0]);
 	}
 
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.modal ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -53,11 +53,14 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 
 				modal.show();
 			}
+
+			return true;
 		}
 	};
 };

js/responsive.bulma.js

@@ -18,7 +18,7 @@ var _modal = $(
 )
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! update ) {
 			if ( options && options.header ) {
 				var header = _modal.find('div.modal-header');
@@ -34,16 +34,20 @@ _display.modal = function ( options ) {
 				.append( render() );
 
 			_modal
-				.appendTo( 'body' )
+				.appendTo( 'body' );
 
 			_modal.addClass('is-active is-clipped');
 
 			$('.modal-close').one('click', function() {
 				_modal.removeClass('is-active is-clipped');
-			})
+				closeCallback();
+			});
 			$('.modal-background').one('click', function() {
 				_modal.removeClass('is-active is-clipped');
-			})
+				closeCallback();
+			});
 		}
+
+		return true;
 	};
 };

js/responsive.foundation.js

@@ -6,9 +6,9 @@ var _display = DataTable.Responsive.display;
 var _original = _display.modal;
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.foundation ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -23,11 +23,15 @@ _display.modal = function ( options ) {
 
 				$('button.close-button').on('click', function() {
 					$('.reveal-overlay').remove();
-				})
+					closeCallback();
+				});
 				$('.reveal-overlay').on('click', function() {
 					$('.reveal-overlay').remove();
-				})
+					closeCallback();
+				});
 			}
+
+			return true;
 		}
 	};
 };

js/responsive.jqueryui.js

@@ -6,9 +6,9 @@ var _display = DataTable.Responsive.display;
 var _original = _display.modal;
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.dialog ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -20,6 +20,8 @@ _display.modal = function ( options ) {
 						width: 500
 					}, options.dialog ) );
 			}
+
+			return true;
 		}
 	};
 };

js/responsive.semanticui.js

@@ -14,9 +14,9 @@ var _modal = $(
 );
 
 _display.modal = function ( options ) {
-	return function ( row, update, render ) {
+	return function ( row, update, render, closeCallback ) {
 		if ( ! $.fn.modal ) {
-			_original( row, update, render );
+			return _original( row, update, render, closeCallback );
 		}
 		else {
 			if ( ! update ) {
@@ -37,6 +37,8 @@ _display.modal = function ( options ) {
 
 				_modal.modal('show');
 			}
+
+			return true;
 		}
 	};
 };