Using Ajax to call scripts in Customer Service

• 6 minutes to read

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 that will vary depending on which group you’ve selected.

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

Extra table -screenshot

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

Extra table relation -screenshot

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 no one is connected to the extra table you created, then no companies will show in your new solution.

Table entries -screenshot

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

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);

Note

Because this is going to be used in an 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 in the 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 folder called specialForm and inside create an empty HTML document.

specialForm -screenshot

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:


<script type="text/javascript">
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 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 them like this M$name=Ola:

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.