XMLHTTP json code - how to choose which container gets updated? JOOMLA

Question

Displayed below are some functions I have (written by a previous developer no longer with the company) that queries a database and sends back json code which updates a specific div's inner HTML. I've now been given the requirement to set up a typeahead search in another div, using json code that we have on another page. The problem I'm having is that I can't figure out how to get them to work together. Here are some screenshot illustrations of what I have to start with:

On top, the merchants list is currently just done by running a query in the model and then passing back the formatted results as a view variable, accessed like this:

<table><?= $this->merchantsList; ?></table>

The bottom section, the cart, is done by querying the database and sending back the results via json, so that each time someone clicks an Add to Cart button in the top section, the bottom table gets updated. This all works. The new requirement is to provide a typeahead search on the merchants table - we have code that does this in a completely different component:

However, I can't seem to integrate the typeahead code - it conflicts with the json code already there for the cart update. Here is the code we currently have on the cart page:

var xmlhttp;

var the_object = {};

var suggestions = [];

function loadXMLDoc(url) {

    xmlhttp=null;



    if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc.

        xmlhttp = new XMLHttpRequest();

    } 



    else if (window.ActiveXObject) {// code for IE5, IE6, 7, 8

        try {

            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");

        }

        catch (e) {

            try {

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (e) {}

        }

    }



    if (xmlhttp != null) {

        xmlhttp.onreadystatechange = onResponse;

        xmlhttp.open("GET",url,true);

        xmlhttp.send(null);

    } else {

        alert("Your browser does not support XMLHTTP.");

    }

}



function onResponse() {

    if (xmlhttp.readyState!=4) return;

    if (xmlhttp.status!=200) {

        alert("Problem retrieving XML data");

        return;

    }



    //JSON response code

    //alert("response text: " + xmlhttp.responseText);

    the_object = eval('(' + xmlhttp.responseText + ')');

    if (the_object.errMsg){

        alert(the_object.errMsg);

    }else{

        document.getElementById("shoppingCartTable").innerHTML = the_object.cartHTML;

    }

}

function addToCart(id){

    var denElem  = document.getElementById('item'+id+'_den');

    var quanElem = document.getElementById('item'+id+'_quan');



    if (denElem.options){

        var den = denElem.options[denElem.selectedIndex].value;

    }else{

        var den = denElem.value;

    }



    var quan = quanElem.options[quanElem.selectedIndex].value;

    var voucherNbr = document.getElementById("voucherNbr").value;



    var url = "/redeem/add-to-cart/?action=add&format=json&voucherNbr=" + voucherNbr + "&merchantId=" + id + "&denomination=" + den + "&quantity=" + quan;

    loadXMLDoc(url);



}

We have several other functions on the shopping cart, all of which call loadXMLDoc(url) when complete; this calls onResponse which updates the cart div in this line:

document.getElementById("shoppingCartTable").innerHTML = the_object.cartHTML;

I've tried adding a param to to loadXMLDoc like this:

loadXMLDoc(url, divName)

which would then get passed to onResponse like this:

function onResponse(divName) {
    if (xmlhttp.readyState!=4) return;
    if (xmlhttp.status!=200) {
        alert("Problem retrieving XML data");
        return;
    }
    //JSON response code
    //alert("response text: " + xmlhttp.responseText);
    the_object = eval('(' + xmlhttp.responseText + ')');
    if (the_object.errMsg){
        alert(the_object.errMsg);
    }else{
        document.getElementById(divName).innerHTML = the_object.cartHTML;
    }
}

As soon as I add that param to onResponse, though, the page just goes completely blank - view source doesn't even show empty html tags. Can anyone give me an idea of how to use XMLHTTP and onResponse to update two different divs with two different chunks of content?

Answer 1

In your loadXMLDoc() function change the line that says:

xmlhttp.onreadystatechange = onResponse;

to this:

xmlhttp.onreadystatechange = onResponse(divName);

You're not passing the divName variable to the onResponse function. Not sure why it's not throwing you an error though.