[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1869
  • Last Modified:

JAVASCRIPT AUTO REFRESH TEXT BOX FROM MYSQL

In the code bellow as you can see there is a chat like form that users type end when he press enter it redirects to itself and add a line in the mysql with the user and the new message
after that it displays it in the chat box .. is there anyway to refresh the textbox without auto refreshing the page because the user could type in that moment and he will lose the text


<?php
$action = $_GET["action"];
$newvalue = $_GET["newvalue"];
if($action=="add")
{
mysql_query("insert into chats values( '', '$siebel', '$newvalue' )");
}
$result = mysql_query("select * from chats order by cid desc", $con);
while($row = mysql_fetch_array($result))
{
$value=$value.$row["cagent"].": ".$row["cmessage"]."\n";
}
?>

<center>
<form name="announce" action="index.php" method="get" >
<textarea name="chat" readonly="true" style="width:99%;height:500;overflow:auto;font-size: 20px;"><?php echo $value; ?></textarea>
<input type="text" name="newvalue" style="width:99%;font-size: 20px;" maxlength="255"  autocomplete="off" />
<input type="hidden" name="status" value="chat">
<input type="hidden" name="action" value="add">
<form>
</center>

Open in new window

0
rockas1982
Asked:
rockas1982
  • 4
  • 2
1 Solution
 
maeltarCommented:
You need to make an ajax call to update the box from your db...

On your main page :

Load jQuery :
<script src="http://code.jquery.com/jquery-latest.js"></script>

Open in new window


add the jQuery script
 <script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Open in new window


Insert the div onto the page
<div id="loaddiv">
</div>

Open in new window


In the page reload.php just a simple query (with the required db connection) to get the data from the db and echo it out, the div loaddiv will be updated with the echo'd data.
0
 
maeltarCommented:
So edit your current page :

<?php
$action = $_GET["action"];
$newvalue = $_GET["newvalue"];
if($action=="add")
{
mysql_query("insert into chats values( '', '$siebel', '$newvalue' )");
}
$result = mysql_query("select * from chats order by cid desc", $con);
while($row = mysql_fetch_array($result))
{
$value=$value.$row["cagent"].": ".$row["cmessage"]."\n";
}
?>

<center>
<form name="announce" action="index.php" method="get" >
<!-- Changed for refresh -->
<div id="loaddiv"><textarea name="chat" readonly="true" style="width:99%;height:500;overflow:auto;font-size: 20px;"><?php echo $value; ?></textarea></div>
<!-- End -->
<input type="text" name="newvalue" style="width:99%;font-size: 20px;" maxlength="255"  autocomplete="off" />
<input type="hidden" name="status" value="chat">
<input type="hidden" name="action" value="add">
<form>
</center>

Open in new window


Add your query onto reload.php
$result = mysql_query("select * from chats order by cid desc", $con);
while($row = mysql_fetch_array($result))
{
$value=$value.$row["cagent"].": ".$row["cmessage"]."\n";
echo "<textarea name=\"chat\" readonly=\"true\" style=\"width:99%;height:500;overflow:auto;font-size: 20px;\">{$value}</textarea>";
}

Open in new window


0
 
maeltarCommented:
The data echo's from reload.php will replace what is in the div "loaddiv", so on initial page load the query will run and populate the div, then every 20 seconds the div it will be updated, which is why the query and data is identical (in case you were wondering)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
rockas1982Author Commented:
Thank you for the fast reply but ... it's not working

chat.php

<script src="http://code.jquery.com/jquery-latest.js">
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 2000);
</script>
<?php
$action = $_GET["action"];
$newvalue = $_GET["newvalue"];
if($action=="add")
{
mysql_query("insert into chats values( '', '$siebel', '$newvalue' )");
}
$result = mysql_query("select * from chats order by cid desc", $con);
while($row = mysql_fetch_array($result))
{
$value=$value.$row["cagent"].": ".$row["cmessage"]."\n";
}
?>

<center>
<form name="announce" action="index.php" method="get" >
<!-- Changed for refresh -->
<div id="loaddiv"><textarea name="chat" readonly="true" style="width:99%;height:500;overflow:auto;font-size: 20px;"><?php echo $value; ?></textarea></div>
<!-- End -->
<input type="text" name="newvalue" style="width:99%;font-size: 20px;" maxlength="255"  autocomplete="off" />
<input type="hidden" name="status" value="chat">
<input type="hidden" name="action" value="add">
<form>
</center>

Open in new window


reload.php

$result = mysql_query("select * from chats order by cid desc", $con);
while($row = mysql_fetch_array($result))
{
$value=$value.$row["cagent"].": ".$row["cmessage"]."\n";
echo "<textarea name=\"chat\" readonly=\"true\" style=\"width:99%;height:500;overflow:auto;font-size: 20px;\">{$value}</textarea>";
}

Open in new window

0
 
maeltarCommented:
What error message are you getting, are you using firefox with firebug ?
0
 
rockas1982Author Commented:
none it's just not working just blinking (have) set the time to 2000

i have firebug .. wanna see the output code ?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now