Other ways of hooking into AJAX downloads

chrisbaz

When sections of the page are updated by AJAX, and need to be modified by our code to render the current creative correctly, we need to attach our code so that it will execute immediately after the AJAX update. Sarah’s post describes an easy way to do this with AJAX on ASP .net pages. What are the options on other types of page?

Our standard method is to ask the client to hook us in by adding a call to a function of ours which will do the necessary stuff. Here’s the example in the wiki - this is a javascript function on the page which calls the function passed in as variable ‘pCallback’, if it exists. By modifying the call to reloadDiv(), passing a function of ours as the parameter, they can pass control to our javascript which could call the necessary client functions and then make the required changes for the current creative.

// AJAX call to reload divs.
function reloadDiv (pUrl, pDivId, pCallback) {
    var xmlhttp;
    // create the request
    xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
    // callback to update specified div
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            // alert ("x updating: " + pDivId + "\nURL:"+pUrl+"\nstatus: " + xmlhttp.status);
            document.getElementById(pDivId).innerHTML =xmlhttp.responseText;
            if (typeof(pCallback) == "function"){
                pCallback();
            }
        }
    }
    // submit request
    xmlhttp.open("get", pUrl);
    xmlhttp.send(null);
}

However getting clients to add extra changes to their code can often be problematic - can we do it all from our side? The answer is yes, in at least some cases.

In this example (the Orange Telecoms company, in Spain) there were three dropdown selects which the STP called to be replaced by radio buttons. The problem was that the options in the selects were not only dynamic, but in the second and third they were altered by Ajax calls triggered by the onchange events of the others. So the radio buttons had to be created and subsequently refreshed after the Ajax calls took place. The dropdowns were hidden, and the code to create the radio buttons from the dropdown options needed to be hooked into the Ajax call.

Here’s code from one of the AJAX calling functions on the page, called ‘carga_combo_precios()’:

 var ajaxSelect=nuevoAjax();
 ajaxSelect.open("GET", "ajax/filtros_menu_precios.asp?"+cadenaString, true);
 ajaxSelect.onreadystatechange=function(){ 
  if (ajaxSelect.readyState==1){
   // Mientras carga, pongo una opción que diga "Espere..."
   fila.innerHTML="espere...";
  }
  if (ajaxSelect.readyState==4){ 
   fila.innerHTML = ajaxSelect.responseText;
  } 
 }
 ajaxSelect.send(null);

The nuevoAjax() function at the top returns a newly created XMLHttpRequest object, and lower down you can see the code called when the call is complete (‘ajaxSelect.readyState==4’). I used the following code to modify the function, and make it additionally call the appropriate radio button creating function, ‘opCreateRBs3()’:

        var opNewFunc = carga_combo_precios.toString();
        opNewFunc = opNewFunc.substring(opNewFunc.indexOf('{')+1,opNewFunc.lastIndexOf('}'));
        opNewFunc = opNewFunc.replace(/ajaxSelect.responseText;/,'ajaxSelect.responseText; opCreateRBs3();');
        carga_combo_precios = new Function('id_marca','id_tipo_producto',opNewFunc);

Note that if we needed any initialisation code, this could be inserted in the ‘if (ajaxSelect.readyState==1)’ block.

Is this the best way of doing it, or is there a more elegant one? And has anyone else used other means of inserting Ajax callbacks?