Automatic update in JavaScript using PHP code

Question

I'm trying to make auto update on my page using JavaScript and php code to read the data from the server

    <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var myVar=setInterval(function(){myTimer()},5000);
}
function myTimer()
{
document.write("<?php 
                session_start();
                $userdata = $_SESSION['views'];
                $name =  $userdata[1]; 
                $mysql_host = 'localhost';
                    $mysql_user = 'root';
                    $connection = mysql_connect($mysql_host,$mysql_user);
                    mysql_select_db("twitter2", $connection);
                    $query = "SELECT * FROM `logindata`";
                    $result =mysql_query($query) or die(mysql_error());
                            while($row = mysql_fetch_array($result))
                    {
                    echo $row['loginname'];
                    }
                        echo "<br>";echo "<br>";
?>");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 3 seconds"
onclick="timeMsg()" />
</form>
</body>
</html>

this code works fine but only display what found in the DB first time but if I add more rows in the DB this new rows doesn't appear on the page.

thanks All I changed some of my code to be like this

        <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var myVar=setInterval(function(){myTimer()},1000);
}
function myTimer()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","phptest.php",true);
xmlhttp.send();
}
</script>

</head>
<body>
<form>
<input type="button" value="Display alert box in 3 seconds"
onclick="timeMsg()" />
<div id="txtHint"></div></p>
</form>
</body>
</html>

and the php file

<?php 

                $mysql_host = 'localhost';
                    $mysql_user = 'root';
                    $connection = mysql_connect($mysql_host,$mysql_user);
                    mysql_select_db("twitter2", $connection);
                    $query = "SELECT * FROM `logindata`";
                    $result =mysql_query($query) or die(mysql_error());
                            while($row = mysql_fetch_array($result))
                    {
                    echo $row['loginname'];
                    }

?>

and it works fine to me. Thanks for your help

javascript runs on the client, php runs on the server. what you want is impossible unless you other methods, such as AJAX calls. — Marc B
– Marc B, Commented Jul 15, 2013 at 19:55

Philipp · Accepted Answer · 2013-07-15 19:57:12Z

1

You doin it wrong - the content of your JavaScript function is interpreted on the server and always the same. Your JavaScript function have to send a request to the Server and handle the response.

If you use JQuery this could look i.e. like this

$.get('ajax/script.php', function(data) {
  $('.result').html(data);
});

and inside script.php, you could output the database results

answered Jul 15, 2013 at 19:57

Philipp

15.7k4 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

steven · Accepted Answer · 2013-07-15 19:56:52Z

0

javascript is a client side language. You cannot print out some php with javascript because it happens in the clients browser.

You need to do it on the server, so I think what you want is an ajax request (XMLHttpRequest) to a server-side php script which look like the content of your document.write.

A very simple and nice cross-browser way doing this is to use jquery.ajax. http://api.jquery.com/jQuery.ajax/

simple tutorial: http://viralpatel.net/blogs/jquery-ajax-tutorial-example-ajax-jquery-development/

edited Jul 15, 2013 at 19:56

answered Jul 15, 2013 at 19:49

steven

4,8952 gold badges31 silver badges61 bronze badges

Comments

Pieter · Accepted Answer · 2013-07-15 19:56:43Z

0

Use Ajax to combine client and server side languages!

answered Jul 15, 2013 at 19:56

Pieter

1,8431 gold badge12 silver badges16 bronze badges

Comments

Simon Paquet · Accepted Answer · 2013-07-15 19:59:52Z

steven is right, here is how I would do with jquery:

In javascript:

function myTimer()
{
$.ajax({
    url:'path/to/your-script.php',
    type:"POST",
    data:"ajax=true",
    success:callBackMyTimer
});
}

function callBackMyTimer(data)
{
alert(data);
}

In your-script.php

<?php
if(isset($_POST['ajax']) && $_POST['ajax'] == 'true')
{
    session_start();
    $userdata = $_SESSION['views'];
    $name =  $userdata[1]; 
    $mysql_host = 'localhost';
    $mysql_user = 'root';
    $connection = mysql_connect($mysql_host,$mysql_user);
    mysql_select_db("twitter2", $connection);
    $query = "SELECT * FROM `logindata`";
    $result =mysql_query($query) or die(mysql_error());
    while($row = mysql_fetch_array($result))
    {
        echo $row['loginname'];
    }
    echo "<br>";echo "<br>";
}
exit;
?>

Collectives™ on Stack Overflow

Automatic update in JavaScript using PHP code

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related