Question

下面显示的是我拥有的一些函数（由以前的开发人员不再与公司编写）查询数据库并发送更新特定div的内部HTML的json代码。我现在已经被要求使用我们在另一个页面上的json代码在另一个div中设置一个typeahead搜索。我遇到的问题是我无法弄清楚如何让他们一起工作。以下是我必须从头开始的一些截图：

alt text

最重要的是，商家列表目前只是通过在模型中运行查询然后将格式化的结果作为视图变量传回来完成，如下所示：

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

底部，购物车，是通过查询数据库并通过json发回结果来完成的，这样每当有人点击顶部的“添加到购物车”按钮时，底部表格就会更新。这一切都有效。新的要求是在商家表上提供一种预先搜索 - 我们的代码在一个完全不同的组件中执行此操作：

alt text

但是，我似乎无法集成预先输入的代码 - 它与已经存在的更新版本的json代码冲突。以下是我们目前在购物车页面上的代码：

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



}

我们在购物车上还有其他几个功能，所有这些功能在完成后调用loadXMLDoc（url）;这会调用onResponse来更新此行中的购物车div：

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

我已经尝试过像这样添加一个param to loadXMLDoc：

loadXMLDoc(url, divName)

然后会像这样传递给onResponse：

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

但是，只要我将该param添加到onResponse，页面就会完全空白 - 查看源甚至不会显示空的html标记。任何人都可以让我知道如何使用XMLHTTP和onResponse更新两个不同的div与两个不同的内容块？

Answer 1

在loadXMLDoc()功能中更改以下行：

xmlhttp.onreadystatechange = onResponse;

到此：

xmlhttp.onreadystatechange = onResponse(divName);

您没有将divName变量传递给onResponse函数。不知道为什么它不会给你一个错误。

XMLHTTP json代码 - 如何选择更新哪个容器？ JOOMLA

1 个答案: