Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Your PHP is not actually outputting anything. Try adding the following line at the end:

    echo $q;
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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.
    Last edited by sunfighter; 02-23-2013 at 03:02 PM.

  • Users who have thanked sunfighter for this post:

    kksandyrox (02-24-2013)

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •