Loader doesn't show in ajax customize dataset

Support - Assistance technique
1

I am tryed to use loader in ajax in dataset customize dhis2 but it didn’t show.
Could you have a solution please.
Thanks

2

Hi @ranphil

Make sure the script runs properly, are you using the design custom form for a dataset? Would you like to share the script you used to see why it’s not working. Additionally, it might help to explain the functionality as in how is this loader supposed to function?

Thanks!

3

Hi AL-Gassim,
I use design custom for a dataset.
I want to show loader during ajax action but it doesn’t work.
Here is my script:

Click to see script 
<h1 id="titreCSBRegion">Promptitude CSB dans le region</h1>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<td><span onclick="lancerprommptitude();" style="display:block;cursor:pointer;padding:10px;border:solid black;">Cliquez ici pour lancer la Promptitude des CSB</span></td>
			<td><input id="BZRVAnE6Pmz-HllvX50cXC0-val" name="entryfield" title="Test ED" value="[ Test ED ]" /></td>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
   var toDistrictParRegion = new Array() ;
	toDistrictParRegion['MskGiUGbWJ8'] = ['lsCrRfgm2hS','IsROud9LtOF','RGATf8waYNn','JChr4ml1sQq','CjWDQW1TaaX'] ;//Alaotra Mangoro
	toDistrictParRegion['I9lEj4mALls'] = ['dsDbxSkO1ST','O4fHBBYcppz','ugusypQK3oV','TVIEjEecwXO','o2UdRXl7kjG','FAuW9yTuH1C','vHRv6NgA70x','ggEW9io9OxW'] ;//Analamanga
	
	var toFsAllParRegion = new Array() ;
	
	var sel = dhis2.de.api.getSelections();
	var orgUnit = sel['ou'] ;
	var dataSet = sel['ds'] ;
	var pe = sel['pe'] ;
	var iSeuilPrompitude = 27 ; //en nombre de jours
	
	
	
	dhis2.util.on( 'dhis2.de.event.completed', function( event, ds ) {
		$('#loaderDiv').css('display', 'block') ;

		dataElementATracker = 'T4bvRCtgwNw-HllvX50cXC0' ;
		ZuidDataSetRMACSB = 'mQEM6Pdzg8p';
		
			
				zurl = "getDataValues.action?periodId=" + pe + "&dataSetId=" + ZuidDataSetRMACSB + "&organisationUnitId=" + zFSOrgunit + "&multiOrganisationUnit=false" ;
				
				$.ajax({
					url: zurl ,
					//data: value,
					dataType: 'json',
					type: 'get',
					async: false,
					success: function( data, textStatus, xhr )
					{
						console.log('===result api=======et url======================'+zurl) ;
						console.log(data.dataValues) ;
						console.log('TEST AFFICHAGE AMBANDRIKA') ;
						
						if(data.dataValues.length > 0)
						{
							
						
							data.dataValues.forEach((dataValuesResult)=>{
								//console.log("dataElement: " + dataValuesResult.dataElement + ", value:" + dataValuesResult.value) ;
								console.log("dataElement: " + dataValuesResult.id + ", value:" + dataValuesResult.val) ;
								//On n'a besoin que la fin de journée de cette date précédente
								if(dataValuesResult.id == dataElementATracker)
								{
									zDateReceptionRapport = dataValuesResult.val ;
									console.log("date reception rapport = "+zDateReceptionRapport + " orgunit: " + zFSOrgunit);
									
									tzDateReceptionExistArray[zFSOrgunit] = zDateReceptionRapport ;
									
									//tzDateReceptionExist += (tzDateReceptionExist == '') ? 'orgunit:' + zFSOrgunit + ' date_reception:' + zDateReceptionRapport : ' | orgunit:' + zFSOrgunit + ' date_reception:' + zDateReceptionRapport ;
									
									
								}
							});
						}
						console.log('===================result api=======') ;
					},
					error: function( xhr, textStatus, errorThrown )
					{
						console.log('error API ==> ' + xhr.status) ;
						
					}
				});
			
			
			console.log(tzDateReceptionExistArray); 
			
			//==================================================//
			//api_insert_promptitude(toFsAllParRegion[iCompteur]) ;
			//console.log(toFsAllParRegion[iCompteur] + '===> de la FS boucle2') ;
			
		});
		console.log("FIN==============>") ;
		console.log(tzDateReceptionExistArray) ;
		//==========insert Promptitude====================//
		
		
		
		console.log("FIN==============>BOUCLE ARRAY") ;
		
		//=============================================//
	
		$('#loaderDiv').css('display', 'none') ;
	}) ;
	
	
	
</script>
</p>
4

Thanks for sharing @ranphil! What is the response that you get when the request is made? Please test using console.log in the response in both cases success and error.

Have you checked the cors settings? Please have a look here: How to debug common development errors | DHIS2 Developer Portal

Thanks!

5

There is no error in the script (in console), but the matter is the loader doesn’t display.
when I run the loader on console it works but in script it doesn’t show

6

Thanks! Could you share the response?

7

Just the loader doesn’t show