update ajax request - use window.fetch

SE/se-lib/TableAjax.php

@@ -2035,7 +2035,6 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 			if (priv.options.debug) console.log('requesting data from url:{0} data:{1} L.<?php echo __LINE__; ?>'.f(priv.options.url, JSON.stringify(priv.options.urlData) || ''));
 
 			var initUrlAdd = '',
-				reqData = {},
 				filtersInitSet = false;
 			initUrlAdd += '&currSortCol=' + _state.filters.currSortCol;
 			initUrlAdd += '&currSortFlip=' + ((_state.filters.currSortCol)? "desc" : "asc");
@@ -2056,22 +2055,21 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 
 			if (priv.options.forceFilterInit) {
 				$.map(priv.options.forceFilterInit, function(fltrProps, fltr) {
-					reqData['f_' + fltr] = fltrProps;
+					initUrlAdd += '&f_' + fltr + '=' + fltrProps;
 					filtersInitSet = true;
 				});
 			}
 
-			$.ajax({
-				url: priv.options.url + initUrlAdd,
-				type: priv.options.urlPost ? 'POST' : 'GET',
-				dataType: 'json',
-				contentType: "application/json; charset=utf-8",
-				data: reqData,
-				async: true,
-				success: function(data) {
-					if (priv.options.debug) console.log('request finished L.<?php echo __LINE__; ?>');
-
-					// assign the new data
+			// p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych (init) ...'});
+			fetch(priv.options.url + initUrlAdd, {
+			  method: priv.options.urlPost ? 'POST' : 'GET',
+				credentials: 'same-origin',// add cookies
+			}).then(function (response) {
+				return response.json()
+			}).then(function (data) {
+				if (priv.options.debug) console.log('loadDataAjax:fetch: request finished L.<?php echo __LINE__; ?> data:', data);
+				if ('success' == data.type) {
+					// p5UI__notifyAjaxCallback(data);
 					if (data && data.cols) {
 						priv.setStateCols(data.cols, data.uniqueCol);
 					}
@@ -2107,14 +2105,16 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 					state.filters = data.filters || {};
 					priv.setState(state);
 
-					if (typeof callback == "function")
-						callback.call(this);
-				},
-				error: function(err) {
-					//console.log('request error: {0}'.f(JSON.stringify(err)));
-					if (typeof callback == "function")
+					if (typeof callback == "function") {
 						callback.call(this);
+					}
+				} else if ('error' == data.type) {
+					p5UI__notifyAjaxCallback(data);
+				} else {
+					p5UI__notifyAjaxCallback(data);
 				}
+			}).catch(function (e) {
+				console.log('loadDataAjax:fetch: ERR:', e);
 			});
 		};
 
@@ -3166,11 +3166,16 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 				currSortCol: (_state.filters.currSortCol || ''),
 				currSortFlip: _state.filters.currSortFlip ? "desc" : "asc"
 			};
+			var urlAdd = '';
+			urlAdd += '&page=' + page;
+			urlAdd += '&pageSize=' + (pageSize || priv.options.pageSize);
+			urlAdd += '&currSortCol=' + (_state.filters.currSortCol || '');
+			urlAdd += '&currSortFlip=' + (_state.filters.currSortFlip ? "desc" : "asc");
 
 			if (Object.keys(_state.filters.filterCols).length > 0) {
 				$.each(_state.filters.filterCols, function(col, colProps) {
 					if (colProps.filter && colProps.filter.length > 0) {
-						reqData['f_' + col] = colProps.filter;
+						urlAdd += '&f_' + col + '=' + colProps.filter;
 					}
 				});
 				skipCols = true;
@@ -3179,28 +3184,31 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 			// specialFilters
 			$.each(_state.specialFilters, function(groupName, btnValue) {
 				if (btnValue.length > 0) {
-					reqData['sf_' + groupName] = btnValue;
+					urlAdd += '&sf_' + groupName + '=' + btnValue;
 				}
 			});
 
 			if (priv.options.forceFilterInit) {
 				$.map(priv.options.forceFilterInit, function(fltrProps, fltr) {
-					reqData['f_' + fltr] = fltrProps;
+					urlAdd += '&f_' + fltr + '=' + fltrProps;
 					filtersInitSet = true;
 				});
 			}
 
 			_uiNode$Table.parent().parent().addClass('AjaxTable-loading');
 
-			$.ajax({
-				url: '<?= $this->syncUrl; ?>&_hash=<?= $this->_htmlID; ?>&_task=loadDataAjax',
-				type: 'GET',
-				dataType: 'json',
-				contentType: "application/json; charset=utf-8",
-				data: reqData,
-				async: true,
-				success: function(data) {
+			// p5UI__notifyAjaxCallback({type: 'info', msg: 'pobieranie danych...'});
+			fetch(priv.options.url + urlAdd, {
+			  method: priv.options.urlPost ? 'POST' : 'GET',
+				credentials: 'same-origin',// add cookies
+			}).then(function (response) {
+				return response.json()
+			}).then(function (data) {
+				if (priv.options.debug) console.log('loadDataAjax:fetch: request finished L.<?php echo __LINE__; ?> data:', data);
+				// p5UI__notifyAjaxCallback(data);
+				if ('success' == data.type) {
 					state = {data: {}};
+					if (!skipCols) state.data.cols = data.cols || {};
 					state.data.rows = data.rows || [];
 					state.data.total = data.total || 0;
 					state.page = data.page || 0;
@@ -3208,10 +3216,13 @@ var p5UI_TableAjax_generateFunctionNode = function(funObj, rowPK, props) {
 					state.filters = data.filters || {};
 					priv.setState(state);
 					_uiNode$Table.parent().parent().removeClass('AjaxTable-loading');
-				},
-				error: function(err) {
-					if (priv.options.debug) console.log('request error: {0}'.f(JSON.stringify(err)));
+				} else if ('error' == data.type) {
+					p5UI__notifyAjaxCallback(data);
+				} else {
+					p5UI__notifyAjaxCallback(data);
 				}
+			}).catch(function (e) {
+				console.log('loadDataAjax:fetch: ERR:', e);
 			});
 		};
 
@@ -3446,7 +3457,7 @@ function TableAjax__HIST_Route(args) {
 		<script>
 jQuery(document).ready(function(){
 	jQuery('#<?php echo $this->_htmlID; ?>').TableAjax({
-		url: '<?= $this->syncUrl; ?>&_hash=<?= $this->_htmlID; ?>&_task=loadDataAjax',
+		url: '<?= $this->syncUrl; ?>&_hash=<?= $this->_htmlID; ?>&_task=loadDataAjax',// priv.options.url
 		columnPicker: true,
 		filter: true,
 		filterInit: <?php echo json_encode($filterInit); ?>,
@@ -5930,6 +5941,8 @@ jQuery(document).ready(function(){
 			}
 			$jsonData->rows[] = $item;
 		}
+		$jsonData->type = 'success';
+		$jsonData->msg = 'pobrano nowe dane';
 		return $jsonData;
 	}