Load external page into div after clicking on item from php list

Question

I know, I know. From the title up above, you are probably wondering what in in the world I am asking. Let me try and break this down a little easier because I am stuck and cannot figure this out. So here goes..............

I have a place on my site where a user can look at a list of news items that have been posted. All of the news items are listed in a MYSQL database and is retrieved and displayed on the page using PhP, like this:

$sql_list = "SELECT * FROM LatestMusic WHERE active = 'y' ORDER BY lm_id DESC";  
 $sql_list_result = mysql_query($sql_list,$connection) or die ('Could not select the List of Latest Music Entries');  

 $bgc = "FFC6C6";  
while($list_data = mysql_fetch_array($sql_list_result)){  
    if ($bgc == "FFC6C6") {  
        $bgc = "FFFFFF";  
    } else {  
        $bgc = "FFC6C6";  
    }  
print "<tr bgcolor=\"#" .$bgc. "\">";  
print "<td align=\"center\" width=\"44\">";  
print "<a href=\"#\" onclick=\"loadXMLDoc()\"><img src=\"/images/b_edit.png\" border=\"0\"></a>";  
print "</td>";  
print "<td align=\"center\" width=\"63\">";  
print "<img src=\"/images/b_drop.png\" border=\"0\">";  
print "</td>";  
print "<td align=\"left\" style=\"padding-left: 15px;\">";  
echo $list_data[1];  
print "</td>";  
print "</tr>";  
}

That part I get. From there, when the user click on anyone of the entries listed from the database, I need an external PHP page to load inside of a DIV on the same page without loading. I am using this coding in the header on the same page in order to achieve such a task:

<script>  
 function loadXMLDoc() {
     var xmlhttp;
     if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp = new XMLHttpRequest();
     } else { // code for IE6, IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
         }
     }
     xmlhttp.open("GET", "YSMhome_LMeditform.php", true);
     xmlhttp.send();
 }
 </script>

I can get the external page to load just fine into the DIV without the page reloading. The problem I'm having is this: The page that loads needs to be a form with form fields. When a user clicks on an entry in the list from the database, I need to pass a variable from the list (letting me know which entry they clicked on) into the external page that is loading in the DIV so that I can pre-populate the form fields with the data being sent. That is the part I cannot figure out.

If anyone can assist me with this, it would be greatly appreciated. I am new to AJAX (this is my first attempt with it), but I am willing to learn what I need to in order to get this to work.

Answer 1

When you call your ajax function, you need to pass it the relevant information. In your example, you should change:

onclick=\"loadXMLDoc()\"

to something like (assuming that $list_data[0] is an integer for simplicity):

onclick=\"loadXMLDoc({$list_data[0]})\"

Then in javascript, your function definition would look something like:

function loadXMLDoc(id)

and later on, you could change the url that is called to something like:

"YSMhome_LMeditform.php?id=" + id

Then you would have the ID available in "YSMhome_LMeditform.php as $_GET['id'].