Working With Page Extensions in Ajax Scenarios

Throughout EngageIP are various calls to Ajax scripts which generate additional UI, and at times you want to manipulate the document structure that is returned or run additional script. This article describes a common approach to finding the resources, identifying the correct components to target and inserting appropriate code.

Identifying the Correct Elements

Here's an example: when a user wishes to change a user package status type, the call to retrieve the list is executed via Ajax. You need to intercept the result and modify the list to filter out the items that you do not want.

To discover where you can inject code you can use F12 (developer tools) in Internet Explorer. For this scenario, navigate to userpackage/status, then press F12, which opens the developer tools. Flip to the Network tab and then press “start capturing”.

Now, in your browser, click on the icon to fetch the list. When the list comes back, you'll want to go back to the developer tools and stop capturing the network traffic. There should only be the one request in there, the AJAX call to fetch the list. Double-click on this request and then examine the Response Body. This will show you the HTML that you will want to manipulate.

Setting up the Page Extension

Next, to modify the contents, you'll need to register an event handler for the Prototype AJAX call. As an example, put in a page extension on the page “userpackage/status” that looks something like this:

Ajax.Responders.register({
    onComplete: function(response){
    alert('hello');
    }
});

Here, you would obviously replace the alert('hello') with relevant code to update your HTML. In this case, you would be looking to remove TR elements from the table that should not appear in the list to the end user.