2010-10-25 33 views
0

以下顯示的是我查詢數據庫併發回更新特定div內部HTML的json代碼的一些函數(由以前的開發人員不再與公司一起編寫)。我現在已經被要求在另一個div中設置一個typeahead搜索,使用我們在另一個頁面上的json代碼。我遇到的問題是我無法弄清楚如何讓他們一起工作。下面是什麼,我要開始與一些截圖插圖:XMLHTTP json代碼 - 如何選擇更新哪個容器? JOOMLA

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哪些更新的車格在這條線:

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的想法?

回答

0

在你loadXMLDoc()功能改變這行:

xmlhttp.onreadystatechange = onResponse; 

這樣:

xmlhttp.onreadystatechange = onResponse(divName); 

你沒有通過divName變量的onResponse功能。不知道爲什麼它不會拋出你的錯誤。

+0

其實,這只是一個複製和粘貼代碼的疏忽。實際的代碼是將divName傳遞給onResponse。碰巧,我找到了答案 - 我需要創建兩個獨立的請求對象,因爲這兩個查詢是獨立的,需要能夠同時或單獨調用。 – EmmyS 2010-10-28 06:14:00