ajaxSend and ajaxComplete

[RedantJParticipant]

Hey guys,

I’m trying to put in a “Loading Screen” in my application and I’ve hit a wall.

I have tried using the internal loading screen, which didn’t seem to fire.
I also tried to use the ajaxSend and ajaxComplete, which also didn’t seem to fire.

Except for this, this seems to work every time:

		$(document).ajaxSend(function(event, jqxhr, settings){
			if (jqxhr.readyState == 1) {
				alert("Loading...");
			}
		}).ajaxComplete(function(event, xhr, settings){
			if (xhr.readyState == 4) {
				alert("Finished loading.");
			}
		});

This is not a convenient solution. So I’m going over my code.

I am wondering if this is because I am asking too much of the jqxButton Click event:

		$("#Confirm1").on('click',function (event) {
			// Did the user put anything in any of the diplay fields?
			var listBox = $("#dispDetails").jqxListBox('getItems');
			var beanCounter = 0;
			var valProgress;
			if (listBox) {
				var typeNew = $("#rptType").jqxDropDownList('getSelectedIndex');
				beanCounter++;
				var fieldsNew = '';
				var txtSeparator = "";
				var datafields1 = new Array();
				var newColumns = '[{ "columns": ['
				for (var m = 0; m < listBox.length; m++) {
					beanCounter++;
				// 	Add to the Server side
					fieldsNew += txtSeparator + listBox[m].value;
				// 	Add to the Source
					switch (listBox[m].value.substring((listBox[m].value.indexOf('.') + 1)))
					{
				//		case 'Some Field': datafields1.push({ name: 'Field', type: 'string'});
				//		break;
                                //              etc....
					}
				//	Add to the Grid
					switch (listBox[m].value.substring((listBox[m].value.indexOf('.') + 1)))
					{
				//		case 'Some field': newColumns += txtSeparator + '{ "text" : "'+ listBox[m].label +'", "datafield" : "' + listBox[m].value.substring((listBox[m].value.indexOf('.') + 1)) + '", "width" : "150", "cellsformat" : "d", "filtertype" : "range" }'
				//		break;
                                //              etc....
					}
					beanCounter++;
					txtSeparator = ",";
				}
				newColumns += "]}]"
				var obj = $.parseJSON(newColumns);
				var columns = obj[0].columns;
				var newSource =
				{
					datatype: "json",
					datafields: datafields1,
					url: "./data/ReportManager/crm1_data.asp",
					filter: function(filters, recordsArray)
					{
						// update the grid and send a request to the server.
						$("#reportLayout").jqxGrid('updatebounddata', 'filter');
					},
					sort: function(column, direction)
					{
						// update the grid and send a request to the server.
						$("#reportLayout").jqxGrid('updatebounddata', 'sort');
					},
					data: {
						type: typeNew,
						fields: fieldsNew
					},
					root: 'Rows',
					beforeprocessing: function(data)
					{		
						if (data != null) {
							// Get the total number of records			
							newSource.totalrecords = data[0].TotalRows;
							for (var key in data) {  
								beanCounter++;
								var subData = data[key];
								for (var subKey in subData) {
									beanCounter++;
									switch (subKey) {
									//	case "SomeField":
									//		$('#reportLayout').jqxGrid('setcolumnproperty', subKey, 'filteritems', data[key].SomeField);
									//		break;
                                                                        //              etc...
									}
								}
							}
						}
					}
				}
				var newGridAdapter = new $.jqx.dataAdapter(newSource, 
				{ 
					async: false, 
					autoBind: true, 
					loadError: function (xhr, status, error) { 
						alert('Error loading "' + newSource.url + '" : ' + error); 
					} 
				});
				// reset the number of rows to 20.
				$('#reportLayout').jqxGrid({ pagesize: 20});
				// clear out any filters from the previous report
				$('#reportLayout').jqxGrid('clearfilters');
				// make a new grid
				$('#reportLayout').jqxGrid(
				{ 
					virtualmode: true, 
					width: 1400, 
					source: newGridAdapter, 
					columns: columns,
					editable: false,
					columnsresize: true, 
					columnsreorder: true, 
					pageable: true,
					filterable: true,
					sortable: true,
					showfilterrow: true,
					autoheight: true,
					autorowheight: true,
					pagesizeoptions: ['20', '40', '60'],
					pagesize: 20,
					rendergridrows: function(obj) { return obj.data; } 
				});
				// At this point, load only the filter lists that we need.
				var dataRow = $("#reportLayout").jqxGrid('getrowdata',0);
				Object.keys(dataRow);
				Object.keys(dataRow).forEach(function (key) {
					beanCounter++;
					if ( (key == "SomeField") || etc...   ) {
						// ***********************************************************************************
						// For each filter list
						var sourceFilter =
						{
							datatype: "json",
							datafields: [
								{ name: 'label' }
							],
							url: './data/ReportManager/filter_data.asp',
							data: {
								type: typeNew,
								key: key
							}
						}	

						var adapterFilter = new $.jqx.dataAdapter(sourceFilter, 
						{ 
							async: false, 
							autoBind: true, 
							loadError: function (xhr, status, error) { 
								alert('Error loading "' + sourceFilter.url + '" : ' + error); 
							} 
						});

						var filterList = new Array();
						for (var m = 0; m < adapterFilter.loadedData.length; m++) {
							filterList.push(adapterFilter.loadedData[m].label);
						}
							
						// Apply initial filter list
						$('#reportLayout').jqxGrid('setcolumnproperty', key, 'filteritems', filterList);
					}
				});
				$("#rptTitle").jqxInput({disabled: false });
				$("#btnCount").jqxSwitchButton({disabled: false });
				$("#setupReport").jqxWindow('close');
				$("#reportLayout").jqxGrid('refresh');
			}
		});

How can I put in a “Loading Screen…” or jqxLoader here while the Click event is processing everything?

Thank you

[RedantJParticipant]

I think I found my answer. It’s not pretty but seems to work:

		$("#absLoading").jqxLoader({ isModal: true, width: 100, height: 60, theme: 'berkeley', textPosition: 'center' });

		$("#Confirm1").on({
			mousedown: function (event) {
				$("#setupReport").jqxWindow('close');
				$('#absLoading').jqxLoader('open');
			},
			click: function (event) {
			// Did the user put anything in any of the diplay fields?
			var listBox = $("#dispDetails").jqxListBox('getItems');
			var beanCounter = 0;
			var valProgress;
			if (listBox) {
                               .
                               .
                               .

                               .
                               .
                               .
				$('#absLoading').jqxLoader('close');
			}
		});

I had to change the Z-index of <div id=absLoading> to some high number. The spinning Loader does not animate, but that’s minor.

Basically, I snuck in the jqxLoader using the Mousedown event.

[Author]

Posts