Trying to deal with Ajax call code placement and different URLs


#1

I currently have Ajax calls inside the script tag as shown below. It’s going to keep growing in future and I am wondering if there’s an efficient way to put it at a different place so that I could call it in main HTML page whenever needed?

Secondly, I have to test with different URLs as shown below (for my local and my server ), so could there be an efficient way where I could just change something like environment variable to local or dev and the URL would switch?

< script >
	$.ajax({
		url: 'http://localhost:8080/Project/getInfo',
		//url: 'https://myserver.com/Project/getInfo',
		type: 'GET',
		dataType: 'json',
		success: function (data) {
			var jsonObj = JSON.parse(JSON.stringify(data));
			$.each(jsonObj.allPageTabsPathList, function (key, value) {
				$(".tab").append(value.tabTag);
			});
		},
		error: function (request, error) {
			console.log("Inside Error Function ; Request: " + JSON.stringify(request));
		}
	});


$.ajax({
	url: 'http://localhost:8080/Project/getDetail',
	//url: 'https://myserver.com/Project/getDetail',
	type: 'GET',
	dataType: 'json',
	success: function (data) {
		var jsonObj = JSON.parse(JSON.stringify(data));
		$.each(jsonObj.linksList, function (key, value) {
			$(".dropdown-content").append('<a href=' + value.webLink + '>' + value.linkText + '</a><br/>');
		});
	},
	error: function (request, error) {
		console.log("Inside Error Function ; Request: " + JSON.stringify(request));
	}
});

</script>

#2

Are these all going to trigger at once? Or is there some kind of activity that will trigger them individually?

V/r,

^ _ ^


#3

Some of them will trigger at once. But some other would be dependent upon user actions.


#4

To answer your second question, yes. :slight_smile:

Your idea of just changing a variable value from ‘local’ to something like ‘production’ could work.

Or, you could get the FQDN from document.URL and change the value of the variable based upon that.

Say you go back and forth between http://localhost:8080/ and https://mydomain.com/. In both cases, if you use / as the delimiter, you can .split() the document.URL and use the third index (position 2).

const fqdnArray = document.URL.split('/');// http://localhost:8080/ or https://mydomain.com/
const fqdn = fqdnArray[2];// localhost:8080 or mydomain.com
switch(fqdn){
    case "localhost:8080":  const environment = "local"; break;
    case "mydomain.com": const environment = "production"; break;
    }

HTH,

^ _ ^

UPDATE:

BETTER YET! Just use the constant “fqdn” in your URL parameter.

url: 'http://' + fqdn + '/Project/getDetail'


#5

Well, if the desire is to clean up code in the main files, then yes you can put the .ajax() calls in a separate .js file and include it.

V/r,

^ _ ^


#6

Yes, so in order for it include every time, is this how I would go about?

something like this <script src="js/myAjaxCalls.js"></script> . But this could cause problems when Ajax call is needed at the time of certain user specific event, right? Thanks !


#7

All it does is include all the code that is in the .js file. So if you define a function inside an included .js file, that function is available until GC takes it away.

HTH,

^ _ ^