Fix: responsive-display was incorrectly firing for all rows when ch…

…anging page Fix: When resizing the window the modal would update to show the information for the last row on the page, regardless of what row details should have been shown
DataTables · Mar 17, 2023 · 80db80b · 80db80b
1 parent 2fc2438
commit 80db80b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/js/dataTables.responsive.js b/js/dataTables.responsive.js
@@ -681,7 +681,7 @@ $.extend( Responsive.prototype, {
 				}
 			);
 
-			if ( res === true || res === false ) {
+			if ( typeof res === 'boolean' ) {
 				event(res);
 			}
 		}
@@ -833,8 +833,6 @@ $.extend( Responsive.prototype, {
 		var dt = this.s.dt;
 
 		dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
-			var row = dt.row( idx );
-
 			that._detailsDisplay( dt.row( idx ), true );
 		} );
 	},
@@ -1216,6 +1214,7 @@ Responsive.display = {
 				var modal = $('<div class="dtr-modal"/>')
 					.append( $('<div class="dtr-modal-display"/>')
 						.append( $('<div class="dtr-modal-content"/>')
+							.data('dtr-row-idx', row.index())
 							.append( render() )
 						)
 						.append( $('<div class="dtr-modal-close">&times;</div>' )
@@ -1240,9 +1239,17 @@ Responsive.display = {
 				} );
 			}
 			else {
-				$('div.dtr-modal-content')
-					.empty()
-					.append( render() );
+				var modal = $('div.dtr-modal-content');
+
+				if (modal.length && row.index() === modal.data('dtr-row-idx')) {
+					modal
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown, nothing to update
+					return null;
+				}
 			}
 
 			if ( options && options.header ) {

diff --git a/js/responsive.bootstrap.js b/js/responsive.bootstrap.js
@@ -39,10 +39,22 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}

diff --git a/js/responsive.bootstrap4.js b/js/responsive.bootstrap4.js
@@ -39,10 +39,22 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}

diff --git a/js/responsive.bootstrap5.js b/js/responsive.bootstrap5.js
@@ -53,12 +53,24 @@ _display.modal = function ( options ) {
 					.append( render() );
 
 				_modal
+					.data('dtr-row-idx', row.index())
 					.one('hidden.bs.modal', closeCallback)
 					.appendTo( 'body' )
 					.modal();
 
 				modal.show();
 			}
+			else {
+				if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+					_modal.find( 'div.modal-body' )
+						.empty()
+						.append( render() );
+				}
+				else {
+					// Modal not shown for this row - do nothing
+					return null;
+				}
+			}
 
 			return true;
 		}

diff --git a/js/responsive.bulma.js b/js/responsive.bulma.js
@@ -34,6 +34,7 @@ _display.modal = function ( options ) {
 				.append( render() );
 
 			_modal
+				.data('dtr-row-idx', row.index())
 				.appendTo( 'body' );
 
 			_modal.addClass('is-active is-clipped');
@@ -47,6 +48,17 @@ _display.modal = function ( options ) {
 				closeCallback();
 			});
 		}
+		else {
+			if ( $.contains(document, _modal[0]) && row.index() === _modal.data('dtr-row-idx') ) {
+				_modal.find( 'div.modal-body' )
+					.empty()
+					.append( render() );
+			}
+			else {
+				// Modal not shown - do nothing
+				return null;
+			}
+		}
 
 		return true;
 	};