显示文件信息？

Thanks to my previous posts, some of yall helped me setting this piece of code right there. :). It lists files in the current folder.

<?php
foreach (glob("*") as $filename) {
echo "<th class=\"icon\"><img src=\"/Home/.res/save.png\"></th><th><a href=\"{$filename}\">{$filename}</a><th class=\"desc\"><a href=\"#open-modal\" onclick=\"loadDoc()\"><img src=\"/Home/.res/info.png\"></a></th></tr>";
}
?>

I now want to add an "info" button at the end of every file name. I succeeded. :) Only thing is, its only able to display static text- I want that info tab to display information about the selected file. I then did some research on AJAX. I came up with this code:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("info").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", ".info.php", true);
  xhttp.send();

This code successfully loads dynamically a page called ".info.php". Heres the tricky part: How can I make AJAX transfer a variable (the file name) to .info.php - so that info.php can display information about the selected file?

=======EDIT: Came up with this AJAX code:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("info").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/Home/.info.php?filename=<?php echo "{$filename}" ?>", true);
  xhttp.send();
}

Im now able to pass variables! (Thanks Jeff) Sadly, the passed variable is always setted as the last file in the list, instead of being setted by the selected file. Any tips?

=========EDIT #2=========== My code right now: First is PHP

<?php
foreach (glob("*") as $filename) {
    echo "<th class=\"icon\"><img src=\"/Home/.res/save.png\"></th><th><a href=\"{$filename}\">{$filename}</a><th class=\"desc\"><a href=\"#open-modal\" onclick=\"loadDoc(<?php echo $filename ?>)\"><img src=\"/Home/.res/info.png\">                </a></th></tr>";
}
?>

Now for the AJAX:

function loadDoc(filename) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("info").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/Home/.info.php?filename=" + filename, true);
  xhttp.send();
}

Cheers.

You need to pass the specific filename as a parameter to your PHP page.

The issue with your first update is that foreach iterates over the array assigning the value to the "temporary" variable.

foreach (glob("*") as $filename) {

After the iteration is complete that variable ($filename, which should be considered temporary) contains only the last value of that array. So your JS function just has a statically defined file name.

The JS call should pass in the filename, and the JS function should take in a value and use it when making the call.

PHP:

onclick=\"loadDoc('{$filename}')\"

JS:

function loadDoc(filename) {
....
     xhttp.open("GET", "/Home/.info.php?filename=" + filename, true);