Passing PHP variable to Javascript using AJAX

Dev Shed Forums Sponsor:

February 22nd, 2013, 02:24 PM

kksandyrox

Registered User

Join Date: Feb 2013

Posts: 9

Time spent in forums: 1 h 54 m 38 sec
Reputation Power: 0

Passing PHP variable to Javascript using AJAX

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??

February 22nd, 2013, 10:04 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

You need to echo out the mysql_num_rows(); so your AJAX can get the responseText. Once you get the responseText; turn it into a number. Then your going to have to add a parameter to your myFunction(); so the for() loop can obtain the total amount of buttons to create.

Something like this:

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>

February 22nd, 2013, 10:49 PM

kksandyrox

Registered User

Join Date: Feb 2013

Posts: 9

Time spent in forums: 1 h 54 m 38 sec
Reputation Power: 0

Tried it out, But I'm Still having a Blank screen.
could you please verify my php file too?

February 23rd, 2013, 08:41 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Are you echoing/printing out your $num_rows variable; which contains your mysql_num_rows(), because in the code you have post... you are not?

February 23rd, 2013, 08:50 AM

kksandyrox

Registered User

Join Date: Feb 2013

Posts: 9

Time spent in forums: 1 h 54 m 38 sec
Reputation Power: 0

tried that too..no luck..
do you think it has something to do with the way i pass the variable

Code:

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

February 23rd, 2013, 09:18 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Your "q" variable, in your query string, is empty. It needs to be something like:

Code:

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

February 24th, 2013, 11:26 AM

kksandyrox

Registered User

Join Date: Feb 2013

Posts: 9

Time spent in forums: 1 h 54 m 38 sec
Reputation Power: 0

What and how do i pass? I need to send the total number of rows in the table, from the php file.

I included this line in my php file as you suggested.

$sql = "SELECT * FROM step1 ";
$q = mysql_query($sql);

Code:

echo mysql_num_rows($q);

February 24th, 2013, 12:00 PM

kksandyrox

Registered User

Join Date: Feb 2013

Posts: 9

Time spent in forums: 1 h 54 m 38 sec
Reputation Power: 0

I got my way around it by doing this.

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>

But now the problem 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.

February 25th, 2013, 01:45 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

You just need to remove this line:

Code:

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

And you will then have this:

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)
{
	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>

Passing PHP variable to Javascript using AJAX

Developer Shed Advertisers and Affiliates