[SOLVED] dynamic updates without reloading page

[gamblor01]

Hi everyone,

 

I am relatively new to PHP (though well versed in shell scripts, Java, and C/C++) and unfortunately the search function here seems to be down at the moment, so this may be answered already but I just cannot find it.

 

I was wondering if anyone has a good tutorial on dynamically updating content within a page, without having to reload the entire page.  For example, on Facebook if 3 of my friends post new updates while I am sitting on the homepage, Facebook will display a message that says "3 new updates".  This message just appears to be "magically" inserted (i.e. the entire page is not refreshing in my browser).  If I click it, instead of reloading the entire homepage, it again dynamically inserts the content into the page instead of reloading the entire home.php.

 

For my particular example, I plan on having a table in my page.  The idea that the last column would contain a button, and the user could click on the button to analyze content in the rest of the table (it's a data mining application).  I want this to kick off some action in the background (for example: I want to run a shell script), and then when that shell script finishes I would like to dynamically update the column so that it no longer shows the button, but instead it shows the output of my shell script.

 

Can anyone tell me how to do this, or direct me to a good how-to?

[.josh]

AJAX is the term you want to search for.  It is a javascript method to send requests to a server-side script, receive a response, and update content on the page (like changing a div's innerHTML) based on the response.

[dpacmittal]

CV's always correct.

[gamblor01]

Cool thanks.  I was actually hoping the term AJAX woudn't come up because I have never looked into it yet, but I guess it's time! 

 

 

I did a quick google search and found the following tutorial:

 

http://www.w3schools.com/Ajax/ajax_intro.asp

 

 

It's a great tutorial and all, but I still have one question.  In my description above I mentioned that I wanted a button for every row in the table.  The problem is that there is no fixed number of rows.  It may be 7, it may be 37, it may even be 104.  In the sample code they provided, they hardcoded "document.myForm.time.value" into the xmlhttp.onreadystatechange function:

 

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}

 

Let's suppose that my table has 100 rows.  Does this mean that I need to generate 100 different functions like this:

 

xmlhttp.onreadystatechange1=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.button1.value=xmlhttp.responseText;
  }
}

xmlhttp.onreadystatechange2=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.button2.value=xmlhttp.responseText;
  }
}
...

 

 

If so, I suppose I can generate this with a loop in PHP; it's not hard to create a loop that echoes out these few lines (with the counter in it to change the button number each time).  I'm just curious if there is perhaps a better method so that I could have just a single onreadystatechange function.  In this manner I would just click on a button, the browser would request the response from the server, and then when the response came back...is there some way to know specifically which button performed the action so that I can apply the change to that button?

 

I'm wondering if this is saving me anything though.  It is starting to sound like I would have to generate one large onreadystatechange function that contains an if statement with 100 different possible cases.  Any thoughts?

[dpacmittal]

lol.. you are just thinking too much.

 

on the button put this:

<input type="button" value="Calculate" onclick=(this.value=sendRequest(a1.value,b1.value))>

 

use PHP to generate the above thing.. like this:

$count = 0;
foreach($results as $values)
{
echo "<td><input type=\"text\" name=\"a$count\"></td><td><input type=\"text\" name=\"b$count\"></td>";
$count++;
}

 

Hope you got the idea.

[gamblor01]

@dpacmittal:

 

I don't follow your second block of code there at all.  The first one makes sense however.  In fact, it almost seems to be working properly.  I am writing code like this:

 

echo "<td align=\"center\"><input type=\"button\" value=\"No Value\" onClick=\"this.value=sendRequest('$msg');\"></td>";

 

I wrote sendRequest() like so:

 

function sendRequest(myMsg)
{
    mineData.php?message=myMsg;
}

 

All the php script does is echo some output.  I have tested calling the script by typing the url into a browser and it works.

 

So the page is rendering all of the buttons properly, but when I click on a button it doesn't seem to do anything.  I tried adding in the following line to the sendRequest() function:

 

alert('hello world');

 

It's not working though.  I would expect that when I click the button the alert will pop up saying 'hello world' but it does not.  I'm also looking for some files to be creating in my /tmp directory by the call to mineData.php and they are not.  So clearly, clicking on the button is not invoking the javascript function.  Any idea why not?

 

 

 

UPDATE: If I have the function ONLY show the alert then it works fine, and I get the pop-up.  Adding the call to my php script back in causes the button to stop working again.  I must not be using the correct syntax to invoke that page.  I also tried returning that value but it didn't work.

 

Any idea what I am doing wrong?  I'm so close!  I'm thinking the problem is that I cannot invoke my PHP script unless I use an xmlhttp object, which goes back to the AJAX stuff.  Is that correct?

[dpacmittal]

Yes, AJAX is needed to invoke the PHP.

 

The alert popup didnt appear because there's "this.value=" there. Just put this: onclick=sendRequest()  and the alert popup will appear.

 

The second block of code is to generate all the buttons and input fields. Can you please explain in more detail (possibly with some real examples), what you exactly want to achieve?

[gamblor01]

Ok I almost have it working.  It's definitely invoking my PHP script but I'm not sure that I am passing it a value properly, because it seems to be missing the value that I am passing.  So let's take a really simple example, and if we can get this working then I should be able to get my app working no problem.

 

In this example, I have 3 buttons with text values "one", "two", and "three".  My plan is that when I click on the button it simply changes the text on the button to "uno", "dos", or "tres".

 

So I create a simple table with buttons in PHP:

 

echo "<table>";
echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"one\" onClick=\"this.value=sendRequest('one');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"two\" onClick=\"this.value=sendRequest('two');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"three\" onClick=\"this.value=sendRequest('three');\"></td>";
echo "</tr>";

echo "</table>";

 

 

And I create the following function in javascript:

 

<script type="text/javascript">
function sendRequest(myMsg)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
  return xmlhttp.responseText;
  }
}
xmlhttp.open("GETT","convert.php?message=myMsg",true);
xmlhttp.send(null);
}
</script>

 

Then I have the following in convert.php:

 

<?php

$val = $_GET["message"];

if ($val == "one")
{
    echo "uno";
}
else if ($val == "two")
{
    echo "dos";
}
else if ($val == "three")
{
    echo "tres";
}

?>

 

 

 

This example doesn't work and I'm not sure why yet.  I'm guess it's either in the way I am invoking the convert.php script or the way I am returning the value in my javascript code.  Something in there is broken.  If you can identify what that would be fantastic!

[dpacmittal]

Certainly there is something broken here:

 

xmlhttp.open("GETT","convert.php?message=myMsg",true);

 

The type in "GETT" and the second argument would be:

 

convert.php?message="+myMsg .

 

This makes the whole statement as:

xmlhttp.open("GET","convert.php?message="+myMsg,true);
[code]

[gamblor01]

Ah, well the GETT typo was actually my fault for typing in the code instead of pasting it from my file.  I was trying to use POST at the time and pass my argument in the send() function, which didn't work either.  I have switched back to using GET and I setup the string concatenation just like you mentioned.  So keep the exact same convert.php that I posted above, and then I have the following (in what I call foo.php):

 

<html>

<script type="text/javascript">
function sendRequest(myMsg)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
  return xmlhttp.responseText;
  }
}
xmlhttp.open("GET","convert.php?message="+myMsg,true);
xmlhttp.send(null);
}
</script>

<body>

<?php
echo "<table>";
echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"one\" onClick=\"this.value=sendRequest('one');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"two\" onClick=\"this.value=sendRequest('two');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"three\" onClick=\"this.value=sendRequest('three');\"></td>";
echo "</tr>";

echo "</table>";
?>

</body>
</html>

 

It doesn't work.  When I click on a button it changes the text of the button to "undefined".  Can you try it and see what happens on your server?  Mine doesn't work. 

[dpacmittal]

<html>

<script type="text/javascript">
function sendRequest(myMsg)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
  response = xmlhttp.responseText;
  }
}

xmlhttp.open("GET","convert.php?message="+myMsg,true);
xmlhttp.send(null);
return response;
}
</script>

<body>

<?php
echo "<table>";
echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"one\" onClick=\"this.value=sendRequest('one');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"two\" onClick=\"this.value=sendRequest('two');\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"three\" onClick=\"this.value=sendRequest('three');\"></td>";
echo "</tr>";

echo "</table>";
?>

</body>
</html>

 

This works.

[gamblor01]

Thank you!  Finally -- the buttons get updated! 

 

Seems there is still a logic error somewhere in here though.  When I click on the "one" button for the first time, nothing happens.  Then I click it again and it changes to "uno".  Then I click on "two" and it changes to "uno".  Then I click on "three" and it changes to "dos".  You can keep clicking and eventually they will all change to the same value if you click things in a certain order.

 

Any thoughts on that?

[.josh]

"uno" "dos" etc... are coming from the response from convert.php right?  Can't really help you out on that count w/out you posting code from that.

[dpacmittal]

Thank you!  Finally -- the buttons get updated! 

 

Seems there is still a logic error somewhere in here though.  When I click on the "one" button for the first time, nothing happens.  Then I click it again and it changes to "uno".  Then I click on "two" and it changes to "uno".  Then I click on "three" and it changes to "dos".  You can keep clicking and eventually they will all change to the same value if you click things in a certain order.

 

Any thoughts on that?

Yes, it happened with me too. This is not the correct way to do it perhaps. We cant return values in a nested function. The inner function returns the value to outer function which we'll have to return again. We've got a more logical process which is as follows:

 

<html>

<script type="text/javascript">
function sendRequest(myMsg,btn)
{

var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
  btn.value = xmlhttp.responseText;
  }
}

xmlhttp.open("GET","convert.php?message="+myMsg,true);
xmlhttp.send(null);

}
</script>

<body>

<?php
echo "<table>";
echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"one\" onClick=\"this.value=sendRequest('one',this);\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"two\" onClick=\"this.value=sendRequest('two', this);\"></td>";
echo "</tr>";

echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" value=\"three\" onClick=\"this.value=sendRequest('three',this);\"></td>";
echo "</tr>";

echo "</table>";
?>

</body>
</html>

 

Hows that?

[gamblor01]

"uno" "dos" etc... are coming from the response from convert.php right?  Can't really help you out on that count w/out you posting code from that.

See reply #7 above...it has the full code for convert.php -- it's just a simple if-else structure.

 

@dpacmittal:

 

It works!!!!  Passing the object as an argument -- brilliant!

 

If I should somehow randomly run into you on the street one day I owe you a beer!

 

[dpacmittal]

Happy to help