How to display data from sql using ajax:

[sayedsohail]

Hi,

 

I just need to know how to use my php drop down list value and call ajax to display data in a grid.

 

Yes indeed, i am able to do it with php but the page refreshing problem.

 

anyone can direct me for this type of example code or suggest something.

 

Please help.

 

 

[nikkieijpen]

Javascript:

function createXMLHttpRequest() { 
var ua; 
if(window.XMLHttpRequest) { // if not using IE
	try { 
		ua = new XMLHttpRequest(); 
	} catch(e) { 
		ua = false; 
	} 
} else if(window.ActiveXObject) { // if using IE
	try { 
		ua = new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch(e) { 
		ua = false; 
	} 
} 

return ua; 
} 

var req = createXMLHttpRequest();

function doSomething(value) {
        url = "script.php?variable="+value;

req.open('get', url); 
req.onreadystatechange = handleResponse
req.send(null);
} 
  
function handleResponse() { 
if(req.readyState == 4) { 
	var response = req.responseText; 
	div = document.getElementById('gridDiv');
	div.innerHTML = response;
}  
}

 

HTML:

<select name="selectName" id="selectName" onChange="doSomething(this.value);">
   <option value="blaat">Blaat</option>
   <option value="blaat2">Blaat2</option>
</select>
<div id="gridDiv"></div>

 

PHP

if(isset($_GET) {
  $var = $_GET['variable'];
  // do mysql execution here
  $textToReturn = // put anything you want to display in the grid in a variable
  echo $textToReturn;
} else {
   $textToReturn = "No variables are set."
  echo $textToReturn;
}

[sayedsohail]

thanks a million, my display query works fine, now i have a problem of pagination, I don't know how to pass values back and forth from the results, using php ajax.  I am able to do it using php which works fine <a href='customers.php?letter=A'>.

 

Any suggestions, please.

 

Thanks for the wonderfull code.

 

 

[nikkieijpen]

Javascript:

function doSomething(value) {
        url = "customers.php?letter="+value;
req.open('get', url); 
req.onreadystatechange = handleResponse
req.send(null);
}

HTML:

<a href="javascript:doSomething('A');">Click Here</a>

[sayedsohail]

Hi  i am struggling to display data  using php and ajax,  please help

 

here is my javascript file:

 

<script language="JavaScript">
<!--
function CreateRequestObject() {

var request_o;
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer")
{
	request_o = new ActiveXObject("Microsoft.XMLHTTP");
	}
else
{
	request_o = new XMLHttpRequest();
	}

return request_o;

}


// Datarequest multi arguments 

var http
function sndReqArg(letter,page) {

http=CreateRequestObject();
if (http==null)
{
alert ("Browser does not support HTTP Request")
return
}
else{
    http.open('get', 'internal_request.php?letter='+letter+'&page='+page);
    http.onreadystatechange = handleEvent;
    http.send(null);
}
}


function handleEvent() {
if(http.readyState == 4) 
	{
	var response = http.responseText;
	document.getElementById("datagrid").innerHTML = http.response
	//document.getElementById("txtHint").innerHTML=xmlHttp.responseText 

	}

}

//-->
</script>

[/quote]

Next is the internel_request.php file

[code]require_once("opendb.php");

/* Number of Clients table displayed with navigation systems using session variable $_SESSION[sESS_MEMID], which is carrying members id from
login page */
// how many rows to show per page 

// Get Letter info and Default to A if none
$letter = $_GET['letter'];
if ($letter) {;} else {$letter = "A";}


// If current page number, use it
// if not, set one!

if(!isset($_GET['page'])){
    $page = 1;
} else {
    $page = $_GET['page'];
}

// Define the number of results per page
$max_results = 3;

// Figure out the limit for the query based
// on the current page number.
$from = (($page * $max_results) - $max_results);

// Perform MySQL query on only the current page number's results

$query = "SELECT id, name, address_1, p_code, city, l_line, mobile FROM clientsview WHERE member_id=".$_SESSION['SESS_ID']." and name LIKE '$letter%' order by name LIMIT $from, $max_results"; 

$sql = mysql_query($query) or die('Error, query failed'); 
$test_rows = mysql_num_rows($sql);

 

Next is my hyperlink and div file which is html file phpajax.html

 

<html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

<script src="internal_request.js"></script>

<script src="functions.js"></script>

</head>

<body>

<p>

 

<a href='#' onclick="sndReqArg(A,1)">Click to open datagrid</a>

 

</p>

<p>

<div id="datagrid"><b>Clients will be listed here</b></div>

</p></body>

</html>

 

Please help.  [/code]

[nikkieijpen]

use quotes around the letter in the hyperlink. Like this <a href='#' onclick="sndReqArg('A',1)"> Javascript will now read it as a string. If you do not use quotes, javascript will think it's a variable and will trow an error because it's not defined.

 

Use firefox's firebug. It's a very nice debugging tool, also for javascript!