Need help Ajax / Javascript

Question

I'm stumped on this one. I am going to have an unknown number of hidden and unhidden (depending the amount of information the user has in my database) with an Onclick function. when each of the unhidden div's are clicked i pass the value of them through AJAX and grab some text from a php file.

     function selectProduct(index) {
   var option = document.getElementById('sel'+index).value;
        var queryStringOne = "?option="+option;
         http.open("GET", "product.php" + 
                          queryStringOne, true);
        http.onreadystatechange = getHttpResOne+index;
          http.send(null); 
    }

    function getHttpResOne(index) {

      if (http.readyState == 4) { 
       resOne = http.responseText;  // These following lines get the response and update the page
  document.getElementById('prohidden'+index).innerHTML = resOne;    
   }
 }

HTML

 <div id="sel1" value="sel1"  onClick="selectProduct(1); return false;">Select Item</div>
    <div id="prohidden1" class="sel"></div> <!-- hidden -->
    <div id="sel2" value="sel2"  onClick="selectProduct(2); return false;">Select Item</div>
    <div id="prohidden2" class="sel"></div><!-- hidden -->

I need the response text from each div clicked, to replace the hidden div right underneath it. I am having trouble passing the (index) to the getHttpRequestOne() function.

Answer 1

You can always add custom properties to the native objects. It might not be the best way. but you can try this.

function selectProduct(index) {
    var option = document.getElementById('sel'+index).value;
    var queryStringOne = "?option="+option;
    http.open("GET", "product.php" + 
              queryStringOne, true);
    http.onreadystatechange = getHttpResOne;
    http.myCustomValue = index;
    http.send(null); 
}

function getHttpResOne() {
    if (http.readyState == 4) { 
    resOne = http.responseText;  // These following lines get the response and update the page
    var index = http.myCustomValue;
    document.getElementById('prohidden'+index).innerHTML = resOne;    
    }
}