#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep 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??
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep Power
    0
    Tried it out, But I'm Still having a Blank screen.
    could you please verify my php file too?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep 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);
    ?
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Your "q" variable, in your query string, is empty. It needs to be something like:

    Code:
    xmlhttp.open("GET","2.php?q=SendSomethingHere",true);
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep 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);
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep 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.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    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>

IMN logo majestic logo threadwatch logo seochat tools logo