TableAjax fix _inlineEditBox

SE/se-lib/TableAjax.php

@@ -272,9 +272,9 @@ class TableAjax extends ViewAjax {
 
 .AjaxTable-loading .head-info {background:url(./icon/loading.gif) no-repeat left top; background-position:0 6px;}
 .AjaxTable-loading .loading-info,
-.AjaxTableCont .inlineEditBox .loading-info {display:block; padding:0 0 0 20px; background:url(./icon/loading.gif) no-repeat left top;}
+.AjaxTableCont .tblAjax__inlineEditBox .loading-info {display:block; padding:0 0 0 20px; background:url(./icon/loading.gif) no-repeat left top;}
 .AjaxTableCont .loading-info {display:none;}
-.AjaxTableCont .inlineEditBox .loading-info {display:block;}
+.AjaxTableCont .tblAjax__inlineEditBox .loading-info {display:block;}
 .AjaxTable .stickyCol2 input[type=text].filter {width:50px;}
 .AjaxTableCont .table {margin-bottom:0px;}
 .AjaxTableCont .stickyCol1 a { color:#333; }
@@ -658,8 +658,11 @@ class TableAjax extends ViewAjax {
 			_mapEditorWrap = $('<div class="mapEditor" style="display:none"></div>').insertAfter(_foot);
 				_mapEditor = $('<div class="mapEditor-map"></div>').appendTo(_mapEditorWrap);
 			_popoverCell = $('<div class="popoverCell" style="display:none"></div>').insertAfter(_foot);
+			$('<div class="tblAjax__inlineEditBox"></div>').insertAfter(_foot);
 			$('<div class="btn-toolbar tblAjax__head__specialFilter"></div>').insertBefore(_uiNodeCont);
 
+			priv.renderInlineEditBox();// .tblAjax__inlineEditBox
+
 			_foot = _head = _body = _headSort = _headFilter = undefined;// TODO: refactor
 			/// console.log('L.<?php echo __LINE__; ?> priv.initialRender, _uiNode$Table: ', _uiNode$Table.html())
 		}
@@ -988,83 +991,6 @@ class TableAjax extends ViewAjax {
 			if (typeof priv.options.tableCreated == 'function') {
 				priv.options.tableCreated.call(_uiNode$Table.get(0), {table: _uiNode$Table.get(0)});
 			}
-
-			if (!_inlineEditBox) {
-				$(_foot).next('.inlineEditBox').remove();
-				_inlineEditBox = $('<div class="inlineEditBox modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>').insertAfter(_foot);
-				var modalWrap = $('<div class="modal-dialog"></div>').appendTo(_inlineEditBox);
-				var modalWrap = $('<div class="modal-content"></div>').appendTo(modalWrap);
-				var frmInlineEdit = $('<form style="margin:0;padding:0;"></form>').appendTo(modalWrap);
-				var iebHead = $('<div class="modal-header">').appendTo(frmInlineEdit);
-				$('<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button>').appendTo(iebHead);
-				$('<h3 id="myModalLabel">Edytuj</h3>').appendTo(iebHead);
-				var iebBodyWrap = $('<div class="modal-body" style="padding:0"></div>').appendTo(frmInlineEdit);
-				var iebBody = $('<div style="padding:15px"></div>').appendTo(iebBodyWrap);
-				$('<input type="hidden" name="ID" value="">').appendTo(iebBody);
-				$('<input type="hidden" name="col" value="">').appendTo(iebBody);
-				$('<div class="inlineEditBox-cnt"></div>').appendTo(iebBody);
-				var iebFoot = $('<div class="modal-footer"></div>').appendTo(frmInlineEdit);
-				$('<button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>').appendTo(iebFoot);
-				var iebBtnSave = $('<input type="submit" value="Zapisz" class="btn btn-primary btn-save">').appendTo(iebFoot);
-
-				frmInlineEdit.on('submit', function() {
-					var data = _inlineEditBox.find('form').serialize();
-					_inlineEditBox.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
-					function notifyAjaxCallback(data) {
-						var notify = {};
-						notify.type = (data && data.type)? data.type : '';
-						notify.msg = (data && data.msg)? data.msg : '';
-						switch (notify.type) {
-							case 'success':
-								if (!notify.msg) notify.msg = 'Dane poprawnie zaktualizowane';
-								break;
-							case 'info':
-								if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
-								break;
-							case 'error':
-								if (!notify.msg) notify.msg = 'Wystąpiły błędy';
-								break;
-							case 'warning':
-								notify.type = 'warn';
-								if (!notify.msg) notify.msg = 'Wystąpiły błędy';
-								break;
-							default:
-								notify.msg = 'Nieznany błąd';
-								if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
-								notify.type = '';
-						}
-						jQuery.notify(notify.msg, notify.type);
-					}
-
-					$.ajax({
-						data: data,
-						dataType: 'json',
-						type: "POST",
-						url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>&_task=EDIT_INLINE_SAVE'
-					})
-					.done(function(data, textStatus, jqXHR){
-						notifyAjaxCallback(data);
-						publ.refresh();
-						_inlineEditBox.modal('hide');
-					})
-					.fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
-						if (jqXHR.responseJSON) {
-							notifyAjaxCallback(jqXHR.responseJSON);
-						}
-						else {
-							var txt = jqXHR.responseText || 'Wystąpiły błędy';
-							if (jqXHR.status == 404) {
-								jQuery.notify(jqXHR.responseText, 'error');
-							} else {
-								jQuery.notify(jqXHR.responseText, 'warn');
-							}
-						}
-						_inlineEditBox.modal('hide');
-					});
-
-					return false;
-				});
-			}
 		};
 
 		priv.renderTableTheadSort = function() {
@@ -1558,6 +1484,89 @@ class TableAjax extends ViewAjax {
 			currentNode.replaceWith(node);
 		};
 
+		priv.renderInlineEditBox = function() {
+			var nodeClass = 'tblAjax__' + 'inlineEditBox',
+					currentNode = $(_uiNodeCont).parent().children('.' + nodeClass),
+					node;
+			var node = $('<div class="' + nodeClass + ' modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>');
+			/// console.log('L.<?php echo __LINE__; ?> Render: priv.renderInlineEditBox, currentNode.html:', currentNode.html(), currentNode);
+			var modalWrap = $('<div class="modal-dialog"></div>').appendTo(node);
+			var modalWrap = $('<div class="modal-content"></div>').appendTo(modalWrap);
+			var frmInlineEdit = $('<form style="margin:0;padding:0;"></form>').appendTo(modalWrap);
+			var iebHead = $('<div class="modal-header">').appendTo(frmInlineEdit);
+			$('<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button>').appendTo(iebHead);
+			$('<h3 id="myModalLabel">Edytuj</h3>').appendTo(iebHead);
+			var iebBodyWrap = $('<div class="modal-body" style="padding:0"></div>').appendTo(frmInlineEdit);
+			var iebBody = $('<div style="padding:15px"></div>').appendTo(iebBodyWrap);
+			$('<input type="hidden" name="ID" value="">').appendTo(iebBody);
+			$('<input type="hidden" name="col" value="">').appendTo(iebBody);
+			$('<div class="inlineEditBox-cnt"></div>').appendTo(iebBody);
+			var iebFoot = $('<div class="modal-footer"></div>').appendTo(frmInlineEdit);
+			$('<button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>').appendTo(iebFoot);
+			var iebBtnSave = $('<input type="submit" value="Zapisz" class="btn btn-primary btn-save">').appendTo(iebFoot);
+
+			frmInlineEdit.on('submit', function() {
+				var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
+				var data = inlineEditBox$Node.find('form').serialize();
+				inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
+				function notifyAjaxCallback(data) {
+					var notify = {};
+					notify.type = (data && data.type)? data.type : '';
+					notify.msg = (data && data.msg)? data.msg : '';
+					switch (notify.type) {
+						case 'success':
+							if (!notify.msg) notify.msg = 'Dane poprawnie zaktualizowane';
+							break;
+						case 'info':
+							if (!notify.msg) notify.msg = 'Nie wprowadzono żadnych zmian';
+							break;
+						case 'error':
+							if (!notify.msg) notify.msg = 'Wystąpiły błędy';
+							break;
+						case 'warning':
+							notify.type = 'warn';
+							if (!notify.msg) notify.msg = 'Wystąpiły błędy';
+							break;
+						default:
+							notify.msg = 'Nieznany błąd';
+							if (data && data.errorCode) notify.msg += ' ' + data.errorCode;
+							notify.type = '';
+					}
+					jQuery.notify(notify.msg, notify.type);
+				}
+
+				$.ajax({
+					data: data,
+					dataType: 'json',
+					type: "POST",
+					url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>&_task=EDIT_INLINE_SAVE'
+				})
+				.done(function(data, textStatus, jqXHR){
+					notifyAjaxCallback(data);
+					publ.refresh();
+					inlineEditBox$Node.modal('hide');
+				})
+				.fail(function(jqXHR){// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
+					if (jqXHR.responseJSON) {
+						notifyAjaxCallback(jqXHR.responseJSON);
+					}
+					else {
+						var txt = jqXHR.responseText || 'Wystąpiły błędy';
+						if (jqXHR.status == 404) {
+							jQuery.notify(jqXHR.responseText, 'error');
+						} else {
+							jQuery.notify(jqXHR.responseText, 'warn');
+						}
+					}
+					inlineEditBox$Node.modal('hide');
+				});
+
+				return false;
+			});
+
+			currentNode.replaceWith(node);
+		};
+
 		priv.exportFieldChanged = function (e) {
 
 			e.stopPropagation();
@@ -2401,6 +2410,8 @@ class TableAjax extends ViewAjax {
 		 * Inline edit.
 		 */
 		priv.rowDblClicked = function (e) {
+			var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
+
 			// hide popover for typespecial fld on click
 			if (_popoverCellCurrent) {
 				_popoverCellCurrent.popover('hide');
@@ -2408,9 +2419,9 @@ class TableAjax extends ViewAjax {
 
 			// e.clientX: 1002; e.clientY: 245
 			if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
-				_inlineEditBox.modal();
-				_inlineEditBox.show();
-				_inlineEditBox.on('shown.bs.modal', function(e) {
+				inlineEditBox$Node.modal();
+				inlineEditBox$Node.show();
+				inlineEditBox$Node.on('shown.bs.modal', function(e) {
 					var dialogBox = jQuery(this).find('.modal-dialog'),
 							modalBody = dialogBox.find('.modal-body'),
 							boudingRect = dialogBox.get(0).getBoundingClientRect();
@@ -2419,7 +2430,7 @@ class TableAjax extends ViewAjax {
 					dialogBox.resizable({minHeight: 300, minWidth: 300, alsoResize: modalBody});
 					dialogBox.draggable();
 				});
-				_inlineEditBox.on('hidden.bs.modal', function(e) {
+				inlineEditBox$Node.on('hidden.bs.modal', function(e) {
 					var dialogBox = jQuery(this).find('.modal-dialog'),
 							modalBody = dialogBox.find('.modal-body');
 					dialogBox.removeAttr('style');
@@ -2430,9 +2441,9 @@ class TableAjax extends ViewAjax {
 					dialogBox.resizable('destroy');
 					dialogBox.draggable('destroy');
 				});
-				_inlineEditBox.find('input[name=ID]').val(e.data.id);
-				_inlineEditBox.find('input[name=col]').val(e.data.col);
-				_inlineEditBox.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
+				inlineEditBox$Node.find('input[name=ID]').val(e.data.id);
+				inlineEditBox$Node.find('input[name=col]').val(e.data.col);
+				inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
 				$.ajax({
 					url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>&_task=EDIT_INLINE&ID=' + e.data.id + '&col=' + e.data.col,
 					type: 'GET',
@@ -2440,21 +2451,21 @@ class TableAjax extends ViewAjax {
 					data: '',
 					async: true,
 					success: function (data) {
-						_inlineEditBox.find('.inlineEditBox-cnt').html(data);
-						_inlineEditBox.find('.btn-save').show();
+						inlineEditBox$Node.find('.inlineEditBox-cnt').html(data);
+						inlineEditBox$Node.find('.btn-save').show();
 
-						initDateTimePicker(_inlineEditBox);
+						initDateTimePicker(inlineEditBox$Node);
 
-						_inlineEditBox.find('textarea').autosize();
+						inlineEditBox$Node.find('textarea').autosize();
 
-						var fld = _inlineEditBox.find('input[id^="f"]');
+						var fld = inlineEditBox$Node.find('input[id^="f"]');
 						if (fld && !fld.hasClass('se_type-date')) {
 							fld.focus();
 
 							fld.keydown(function(event) {
 								if (event.which == 13) {
 									event.preventDefault();
-									_inlineEditBox.find('form').submit();
+									inlineEditBox$Node.find('form').submit();
 								}
 							});
 						}