Power Platform Community Forum Thread Details

Nested ajax in javascript

I'm attempting to make nested ajax calls via javscript in a portal but the second ajax call never runs;

$(document).ready(function() { 
 $("#UpdateButton").on("click", function() {
		var recodId = $("#EntityFormControl_EntityFormView_EntityID").val()
		ajaxCall1(recodId);
	});
});

function ajaxCall1(recodId)
{
 $.ajax({
	method: 'GET',
	dataType: 'text',
	url: "/xxxxxxx?recordid=" + encodeURIComponent(recodId),
 success: function(data2)
 {
	 console.log(data2);
	 alert(parseInt(data2)); //I get this alert
			
 ajaxCall2(recodId);
 }
 });
}


function ajaxCall2(recodId)
{
 $.ajax({
		method: 'GET',
		dataType: 'json',
		url: "/xxxxxx?recordid=" + encodeURIComponent(recodId),
 success: function(data)
 {
		 console.log("I found " + data.results.length + " result(s)");
		 console.log(JSON.stringify(data.results));	
		 alert(JSON.stringify(data.results));
 }
 });
}

When the first ajax call is done, I do get the alert (left a comment in the code) so I know that it is going in the success { } part of the function but the second ajax call never happens.

I have tried to swap the functions i.e. call no. 2 first and then no. 1 but whatever I put as the second call, never runs. I have also run the functions by themselves and they are both successful so the issue seems to be because they are nested. I have also tried to use .done instead of success{} but still the same issue.

Any one can provide any insight whether we can do nested ajax calls in a portal, please?

Thanks,

Categories:

Design & build

Quick Links