Ниже показаны некоторые функции (написанные предыдущим разработчиком, уже не сотрудничающим с компанией), которые запрашивают базу данных и отправляют обратно код json, который обновляет внутренний HTML-код конкретного div. Теперь я получил требование настроить поиск заголовка в другом элементе div, используя код json, который есть на другой странице. Проблема в том, что я не могу понять, как заставить их работать вместе. Вот несколько скриншотов, с которых я должен начать:
Кроме того, список продавцов в настоящее время просто создается путем запуска запроса в модели и последующей передачи отформатированных результатов в виде переменной представления, доступ к которой осуществляется следующим образом:
<table><?= $this->merchantsList; ?></table>
Нижняя часть, корзина, выполняется путем запроса базы данных и отправки результатов обратно через json, так что каждый раз, когда кто-то нажимает кнопку «Добавить в корзину» в верхней части, нижняя таблица обновляется. Это все работает. Новое требование состоит в том, чтобы обеспечить поиск заголовка в таблице продавцов - у нас есть код, который делает это в совершенно другом компоненте:
Однако я не могу интегрировать код typeahead - он конфликтует с кодом 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;
Я пытался добавить параметр в 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;
}
}
Как только я добавлю этот параметр в onResponse, страница просто станет совершенно пустой - в исходном представлении даже не отображаются пустые HTML-теги. Может кто-нибудь дать мне представление о том, как использовать XMLHTTP и onResponse для обновления двух разных div с двумя разными кусками контента?