Home/ Questions/Q 3600296
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T20:28:37+00:00

I have implemented a dynamic creation of a HTML table using AJAX. Here’s what

  • 0

I have implemented a dynamic creation of a HTML table using AJAX.

Here’s what I’ve created:

index.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript" src="ContactController.js">
    </script>
</head>

<body>

    <div class="main-wrapper">

        <div id="menu">
            <a href="javascript:void(0)" onclick="getAllContacts()">
                Go to contacts
            </a>
        </div>

        <div id="main-content">
        </div>

    </div>

</body>

</html>

ContactsController.js

function getAllContacts() {

    // Manage new XmlHttpObject creation
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert ("Your browser is out of date. Please upgrade.");
        return;
    }

    var url = "getAllContacts.php";

    // Workaround for page caching
    url = url + "?sid=" + Math.round(Math.random() * 1000000000);

    xmlHttp.open("POST", url, true);

    // Manage XmlHttpObject state change
    xmlHttp.onreadystatechange = stateChanged;

    xmlHttp.send(null);
}

function stateChanged() {

    // Check if the XmlHttp request is complete
    if (xmlHttp.readyState == 4) {

        // Set the XmlHttp response in the contacts div
        document.getElementById("main-content").innerHTML = xmlHttp.responseText;
    }
}

// Creates a new XmlHttpObject
function GetXmlHttpObject() {

    var xmlHttp = null;

    try {
        // XmlHttpObject constructor for Chrome, Firefox, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // XmlHttpObject constructor for Internet Explorer > v6.0
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // XmlHttpObject constructor for Internet Explorer > v5.5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

getAllContacts.php

<?php

include 'connectToMySQL.php';

$command = "SELECT * FROM contact";
$result = mysql_query($command);

echo "<table id='contactsTable' border='1'>";

// Table headers
echo "<tr>
          <th>Name</th>
      </tr>";

// Print all contacts
while($row = mysql_fetch_array($result)) {
    echo "<tr>";
    echo "<td>
              <a href='#'
                 onclick=\"getContact('" . $row['DisplayName'] . "')\">"
                  . $row['DisplayName'] .
             "</a>
          </td>";
    echo "</tr>";
}

echo "</table>";

mysql_close();

?>

So, clicking on a Go to contacts link activates a getAllContacts javascript function. That function calls getAllContacts php function which retrieves the data from MySQL database and places it in the contactsTable table.

What I need is to tell the function to place that table in the main-content div located in the index.php page. How do I achieve this? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    ok, so going from your comment about wanting two different possible target divs, just define your onreadystatechanged event inline and use a local variable to refer to the div…

    function getAllContacts() {

    // Manage new XmlHttpObject creation
    var xmlHttp = GetXmlHttpObject(); // MAKE THIS LOCAL INSTEAD OF GLOBAL!
    if (xmlHttp == null) {
        alert ("Your browser is out of date. Please upgrade.");
        return;
    }

    var url = "getAllContacts.php";

    // Workaround for page caching
    url = url + "?sid=" + Math.round(Math.random() * 1000000000);

    xmlHttp.open("POST", url, true);

    var targetDiv = document.getElementById(whateverIdYouWant);

    // Manage XmlHttpObject state change
    xmlHttp.onreadystatechange = function(){
        // Check if the XmlHttp request is complete
        if (xmlHttp.readyState == 4) {

            // Set the XmlHttp response in the contacts div
            targetDiv.innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.send(null);
}
    • 0