Question

I asked a similar question earlier here, and it got me down the right track, but I am little stumped still. However, now I know how to ask a more educated question.

I have a database I connect to, with a table name of PRODUCTS. Within PRODUCTS are the columns ID, STOCK, SHORTNAME, DESCRIPTION, PRICE and SHIPPING.

If the user clicks a button, I need to send a request to find all the rows in PRODUCTS. I believe the following file.php accomplishes that (DB connect code not show).

$query = "SELECT `ID` FROM `PRODUCTS`";
$result = mysql_query($query) or die('Query failed:'.mysql_error());
$num=mysql_numrows($result);

When the user clicks the button, and it gets $num, it then needs to create as many div elements as there are rows. I can do this with for() , but I am not 100% sure how to do it. Also, I am not sure how to do this in Jquery, instead of just JS.

function ajaxFunction(phpFunction){
    var ajaxRequest;  

    try{
                ajaxRequest = new XMLHttpRequest();
    } catch (e){
                    try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){


for (var i = 0; i < ajaxRequest.responseText ; i++)
//Create Div code here


        }
    }


    var url = "file.php;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 
}

So here are the final questions:

1. If a user clicks a specific div (#revealProductButton), how do I create as many divs as $num returns?
2. How do I make those divs that were created display STOCK, PRICE, and SHIPPING from the DB? Each div must display it’s own information, not just one div that displays everything.
3. If the user then clicks one of the divs that were created, how do I then reveal the rest of the information in the DB (DESCRIPTION, etc), but only for the div that was clicked?
4. How to I write my file.php to work with all this?

Answer 1

You can go something like this:

for (var i = 0; i < ajaxRequest.responseText ; i++)
{
  var div = document.createElement("div");
  var doc = document.getElementsByTagName("body")[0];
  doc.appendChild(div);
  div.setAttribute("id", "div_" + i);

  // now some php code to get STOCK, PRICE, and SHIPPING through sql queries
  // ...........................
  // ...........................
  // ...........................

  // javascript again
  document.getElementById("div_" + i).innerHTML = <?php echo $price, $shipping, etc in any way you want?>;

  div.onclick = function()
  {
    // again php code to get more info like DESCRIPTION
    //..................

    document.getElementById("div_" + i).innerHTML += '<br /><br />' + <?php echo $description?>;
  };
}

Hope that helps.