Using Ajax to call scripts in Customer Service

There are often scenarios where you need to get new information while on a page in Customer Centre, and don’t want to load all objects at once or do any nasty post backs.

Ajax is a neat tool where you can do calls dynamically and receive all the data you need, but be aware that too many calls at the same time will cause your solution to be slower.

In this example I will create a list of companies which will vary depending on which group you’ve selected.

The first things we’ve got to do is to create an extra table with the name Group and extra field Name.

Extra table

Then create an extra table relation in the company table, to your newly created extra table.

Extra table relation

 

Create some entries in your Groups table, mine were IT, Economy and Sales.

Remember to also connect the businesses you want to the groups you've made. If noone is connected to the extra table you created, then no companies will show in your new solution.

Table entries


 Now you’ve got to create your script in Customer Service, and write down the “Include name” and “Key” for later use.

%EJSCRIPT_START%
<%

String groupId = getCgiVariable("groupId");

SearchEngine se;
se.addField("contact.contact_id");
se.addField("contact.name");
se.addCriteria("contact.x_group", "Equals", groupId);

String output = "<option value='-1'>Choose</option>";

for(se.select(); !se.eof(); se.next())
  output += "<option value='" + se.getField(0) + "'>" + se.getField(1) + "</option>";

print(output);

%>
%EJSCRIPT_END%

 NB! Since this is going to be used in a HTML site we need to include %EJSCRIPT_START% and %EJSCRIPT_END%, or else we’ll receive the entire code as output when calling the script.

That's all we had to do in Customer Service, now we just need to create the page we want to view it in Customer Centre. 

Go to where you've installed your Customer Service, go into the Customer Service folder\templates\your language\customer

Now, if you haven't done this already, create a specialForm folder and inside create an empty html document.

specialForm

 

Then, into your file, add this:

%EJSCRIPT_START%
<h1>Groups</h1>
<select id="groups">
<%
SearchEngine seGroups;
seGroups.addField("y_groups.id");
seGroups.addField("y_groups.x_name");

String insertGroups = "<option value='-1'>Choose</option>";

for(seGroups.select(); !seGroups.eof(); seGroups.next())
	insertGroups += "<option value='" + seGroups.getField(0) + "'>" + seGroups.getField(1) + "</option>";
print(insertGroups);
%>
</select>


<h1>Companies</h1>
<select id="companies"><option value='-1'>Choose</option></select>

<script type="text/javascript">
var xmlhttp;

var url = '<% print(getParserVariable("AuthProgram") + "&action=parse&includeId=listCompanies&key=YjKJdpjFt6AdCc7B"); %>';
%EJSCRIPT_END%

function callAjax() {
	if(xmlhttp != undefined)
		xmlhttp.abort();
	if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}
	else { //code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() { 
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			$('#companies').empty().append(xmlhttp.responseText);
		}
	}
}
$(document).ready(function(){
	callAjax();
	$('#groups').change(function(){
		console.log("run");
		xmlhttp.open("POST", url, true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-pform-urlencoded");
		xmlhttp.send("groupId=" + $('#groups').val());
	});
});
</script>

 This is a very simple document, and I'll explain the little details here:

The first part

%EJSCRIPT_START%
<h1>Groups</h1>
<select id="groups">
<%
SearchEngine seGroups;
seGroups.addField("y_groups.id");
seGroups.addField("y_groups.x_name");

String insertGroups = "<option value='-1'>Choose</option>";

for(seGroups.select(); !seGroups.eof(); seGroups.next())
	insertGroups += "<option value='" + seGroups.getField(0) + "'>" + seGroups.getField(1) + "</option>";
print(insertGroups);
%>
</select>

Lists out all your created groups in a drop down menu. It loads at the start of the page load and fills it out.

Then you've got an empty drop down menu:

<h1>Companies</h1>
<select id="companies"><option value='-1'>Choose</option></select>

This is where we want to populate our new options. This is done from our script.

Now the more advanced part comes into play:

var xmlhttp;

var url = '<% print(getParserVariable("AuthProgram") + "&action=parse&includeId=listCompanies&key=YjKJdpjFt6AdCc7B"); %>';
%EJSCRIPT_END%

Are just two variables. It's important to check if the url actually contains the correct includeId and key.

function callAjax() {
	if(xmlhttp != undefined)
		xmlhttp.abort();
	if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}
	else { //code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() { 
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			$('#companies').empty().append(xmlhttp.responseText);
		}
	}
}

This function starts the event listener. It makes sure that when the script has been called, it will listen and output whatever it receives. 

$(document).ready(function(){
	callAjax();
	$('#groups').change(function(){
		console.log("run");
		xmlhttp.open("POST", url, true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-pform-urlencoded");
		xmlhttp.send("groupId=" + $('#groups').val());
	});
});

This is the jQuery part which executes when there's been a change in the groups drop down. Here it will use the url we set earlier, and insert the group id we got from the drop down and send to our script. If you want more attributes to send, just insert it like this $name=Ola, ie:

xmlhttp.send("groupId=" + $('#groups').val() + "&name=Ola");

 

This is one of the most basic ones out there, although you can still create a simpler one this is a very powerful way to create more dynamic pages for everybody to enjoy.

Post Comment