Passing PHP variable to Javascript using AJAX

kksandyrox · 02-22-2013, 08:28 PM

I have a mysql table called as step1, It has some number of rows, that keeps changing time to time.

What I want is, depending on the number of rows in the table, I need to display those many number of buttons on my web page.

How do I go about it? I am new to AJAX, so detailed explanation(+code) would be appreciated.

My Php code is

Code:

<?php
$q=$_GET["q"];

$con = mysql_connect("localhost","root","");
if (!$con)
  	{
		die('Could not connect: ' . mysql_error());
  	}
mysql_select_db("test", $con);

$result = mysql_query("SELECT * FROM step1 WHERE id = '".$q."'");

$num_rows = mysql_num_rows($result);
$q=$num_rows;
?>

I believe the Number of rows is transferred to variable "q" now.

Next, my html code is

Code:

<html> 
  <body>  
 
 <div id="myDiv"></div>
 
 <script>
 function fone()
 {
 var xmlhttp;
 xmlhttp=new XMLHttpRequest();
 xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","2.php?q=",true);
xmlhttp.send();
myFunction();
}

function myFunction()
{
for(i=1;i<="2.php?q=";i++)
{
var btn=document.createElement("BUTTON");
btn.id = "join_btn" + i;
btn.onclick = function() {
var getID = parseInt(this.id.split("join_btn")[1]);
document.location.href = pages[getID-1];
}
var t=document.createTextNode("JOIN");
document.body.appendChild(btn);
btn.appendChild(t); 

document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createElement("br"));
}
}; 
</script>
<body onload="fone()">
 
 </body> 
 </html>

So depending on the number of rows, I need to display those many buttons.

Where Have i gone wrong??

felgall · 02-22-2013, 08:34 PM

Your PHP is not actually outputting anything. Try adding the following line at the end:

echo $q;

kksandyrox · 02-23-2013, 05:04 AM

Tried that, but I'm still having a blank screen.

Did the following changes to my html code too, realizing I didn't pass any parameters.

Code:

<html> 
  <body>  
 
 <div id="myDiv"></div>
 
 <script>
 function fone()
 {
 var xmlhttp;
 xmlhttp=new XMLHttpRequest();
 xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    var rowCount = xmlhttp.responseText;
    rowCount = parseInt(rowCount);
    }
  }
xmlhttp.open("GET","2.php?q=",true);
xmlhttp.send();
myFunction(''+rowCount+'');
}

function myFunction(totalRows)
{
for(i=1;i<=totalRows;i++)
{
var btn=document.createElement("BUTTON");
btn.id = "join_btn" + i;
btn.onclick = function() {
var getID = parseInt(this.id.split("join_btn")[1]);
document.location.href = pages[getID-1];
}
var t=document.createTextNode("JOIN");
document.body.appendChild(btn);
btn.appendChild(t); 

document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createElement("br"));
}
}
</script>
<body onload="fone()">
 
 </body> 
 </html>

Please if you could have a look.

sunfighter · 02-23-2013, 02:41 PM

In your html file this line

Code:

xmlhttp.open("GET","2.php?q=",true);

is not sending anything as q... So your php query looks like this

PHP Code:


			
SELECT * FROM step1 WHERE id = ''

.
Fix that first.

Then in your loop

Code:

for(i=1; i<="2.php?q="; i++)

is totally meaningless.

The number of rows sent back by the php is only being written into a div with an id of myDiv. I think you want that number in the loop commands.

Take this line out

Code:

<body onload="fone()">

and use it instead of the <body> tag you have. Plus fix up your html.

If your php sent back 2, and you can force this by making your php file be:

PHP Code:


			
echo 2;

And you use this html:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body onload="fone()">
<div id="myDiv">div</div>

<script>
function fone()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET","2.php?q=",true);
xmlhttp.send('');


}

function myFunction(y)
{
	for(i=1; i<=y; i++)
	{
		var btn=document.createElement("BUTTON");
		btn.id = "join_btn" + i;
		btn.onclick = function() {
			var getID = parseInt(this.id.split("join_btn")[1]);
			document.location.href = pages[getID-1];
		}
		var t=document.createTextNode("JOIN");
		document.body.appendChild(btn);
		btn.appendChild(t);
		document.body.appendChild(document.createElement("br"));
		document.body.appendChild(document.createElement("br"));
	}
}

</script>
</body>
</html>

Things should work. Then figure out what you want to send as q and try it again.

kksandyrox · 02-24-2013, 05:52 PM

Thanks a ton!

that really worked.

but thing is, If i have, for example, 4 records in my table, It displays THE NUMBER "4" along with 4 buttons...

How do I stop "4" from appearing? All i want to display is the 4 buttons.

sunfighter · 02-25-2013, 02:28 PM

Your return from the php script in an ajax call is "Whatever your XMLHttpRequest() is set to plus ".responseText". In your case it's xmlhttp.responseText. Your javascript places this where you want it. I placed it in two places:

Code:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
myFunction(xmlhttp.responseText);

The top line writes the number. Just delete that line.

FYI: your code will not work in IE because you didn't set xmlhttp to the it's object used in ajax.