Javascript - SQL queries

From Docupedia

Written By: Eskay

Date: 02/19/2007

1 Introduction
2 How this works
3 Files Involved
- 3.1 function.php
- 3.2 index.php
4 Example
5 Browser Compatibility

Introduction

In my days as a web developer I have come across many situations where I need information that is being displayed to be changed without a page load. I searched the web but never found a solid example that showed me how to do this. I think I found some of the code below in a chat forum. It’s been so long I can’t even remember. Anyways I hope this guide helps you as much as it has helped me.

[edit]

How this works

Basically, what happens is EVERYTHING that is printed on one page will populate a div on another page. Be careful not to have nested form tags.

[edit]

Files Involved

There are two files involved in this example. One file to make the call to the database (in this example, function.php) and one file to populate a div with data (in this example, index.php).

[edit]

function.php

Notice all we are doing here is when we have an id in the URL, we get all corresponding values for that id from our database and print them.

 
<? 
	if(@$_GET['id']){
		$id = $_GET['id']; 

                // connect to db
		$this->connection = mysql_connect("localhost", USERNAME, PASSWORD) or die(mysql_error());
		mysql_select_db(DBNAME, $this->connection) or die(mysql_error());

		$q = "SELECT * FROM `tblName` WHERE id = '".mysql_real_escape_string($id)."'"; // prevent sql injection
		$result = mysql_query($q, $this->connection);
		while($row = mysql_fetch_assoc($result)){
			echo "<h1>".$row['name']."</h1>";	
			echo "<p>".$row['description']."</p>";	  
		} 
	}
?>

[edit]

index.php

First, we call procAjax with an Id. ProcAjax calls function.php and gets everything that is printed on that page and calls the targetDiv() function. TargetDiv() simply finds a target div on the page and puts all the printed info from function.php call.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Simple Query</title>
<script type="text/javascript">
function procAjax(pId) {

    url = "function.php?id=" + pId; // call to function.php
	
    if (window.XMLHttpRequest) { // Non-IE browsers
      req = new XMLHttpRequest();
      req.onreadystatechange = targetDiv;
      try {
        req.open("GET", url, true);
      } catch (e) {
        alert(e);
      }
      req.send(null);
    } 
    else if (window.ActiveXObject) { // IE
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
        req.onreadystatechange = targetDiv;
        req.open("GET", url, true);
        req.send();

      }
    }
}

function targetDiv() {

    if (req.readyState == 4) { // Complete
          if (req.status == 200) { // OK response
              document.getElementById("divName").innerHTML = req.responseText; // The div you want the data to populate
          } else {
            alert("Problem: " + req.statusText);
          }
    }      
}
</script>
</head>

<body>
<ul>
    <li><a href="javascript:procAjax(1)">Basset Hound</a></li>
    <li><a href="javascript:procAjax(2)">German Shepherd</a></li>
    <li><a href="javascript:procAjax(3)">Labrador Retriever</a></li>
    <li><a href="javascript:procAjax(4)">Siberian Husky</a></li>
</ul>

<div id="divName">

</div>

</body>
</html>

[edit]