Ajax?

[TacMaf]

Hi, does anyone know of a simple tutorial that can help me reload a table row without reloading the page? I assume I need to use ajax to do this.

Can anyone help?

Thanks.

[Jake Arkinstall]

It depends on what you understand a tutorial to be.

If you think of a tutorial as something to take code from and glue it into your own, I can't think of any that I know of.

If, however, you want to learn how to use AJAX, so that you can integrate it into your own work by changing a few things, then I think the AJAX tutorial at W3Schools would help you quite alot. Although it's based around asp as the server technology, as long as you know what needs outputting on the PHP side you'll be file with it.

http://www.w3schools.com/AJAX/

[TacMaf]

Thanks, I've just read it and all it seems to tell me is how to contact a database when data is typed in. All I want to do is reload a table row. Can ajax do this?

Thanks.

[Jake Arkinstall]

It tells you what AJAX is and gives an example of it. It's not there to give you what you're looking for, it's there to show you how to get what you're looking for.

AJAX can do anything JavaScript can do (i.e. yes, it can do what you want), with the added benefit of being able to communicate with the server.

[TacMaf]

Thanks. So I guess I won't need the xmlHTTP stuff?

[bradical1379]

The idea behind AJAX is to request data from the server and load it (Asynchronously) to the client side without interfering with the display or the behavior of the page.

So basically, anything on your client side can be manipulated via an XMLHttpRequest, it just depends on how you have prepped on the server side to handle the request, and how the rest of your JavaScript decides to display the information.

[TacMaf]

OK I can just about figure out how to reload a hidden field for my captcha script but how can I change the image of the captcha?

[Jake Arkinstall]

You tell the javascript to change the source of the certain image.

[TacMaf]

If a value is already set, will the ajax overwrite the current values?

[TacMaf]

Yeh. I have one last thing. I am trying to change two values to separate values from the same script. The value becomes the file return. Would I have to use 2 ajax commands or can I do this from one?

Thanks.

[spikeZ]

Give your table rows id's

<tr id="row1">
    <td>Table cell 1</td>
</tr>
<tr id="row2">
    <td>Table cell 1</td>
</tr>

you can then either use AJAX to update the database AND the table row by passing the id to update or just use AJAX to update the database and simple javascript to update the table row.

It depends on what it is you are trying to do and how the information is sent through ie: form input or other method

[TacMaf]

I'm not 100% on what you mean.
Currently I have:

script.php

<script type="text/javascript">
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.Register.sessid.value=xmlHttp.responseText;
      document.Register.secimg.src=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","scajax.php",true);
  xmlHttp.send(null);
  }
</script>
.....
<td width="15%"><?php $string=''; echo '<a href="script.php#" onClick="ajaxFunction();">Test</a><img src="'.createImage($string).'" name="secimg" />'; ?></td>
<td align="center" valign="center">Enter Validation Code</td>
<td width="51%"><input type="text" name="script" value="" size="30" style="width: 100%; background: #333333; font-family: Verdana; color: white; font-size: 11px;">
</td></tr>
<input type="hidden" name="sessid" value="<?php echo "".md5($string).""; ?>">

and scajax.php

<?php
echo "Test"; // I want image src to change to this and
echo "Test1"; // form value to this
?>

[Jake Arkinstall]

You would need to separate the values somehow, like a newline. Then in the JavaScript, split that up into separate values and apply them how you want.

Therefore::

script.php

<script type="text/javascript">
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      var data = xmlHttp.responseText.split("\n");
      document.Register.sessid.value=$data[0];
      document.Register.secimg.src=$data[1];
      }
    }
  xmlHttp.open("GET","scajax.php",true);
  xmlHttp.send(null);
  }
</script>
.....
<td width="15%"><?php $string=''; echo '<a href="script.php#" onClick="ajaxFunction();">Test</a><img src="'.createImage($string).'" name="secimg" />'; ?></td>
<td align="center" valign="center">Enter Validation Code</td>
<td width="51%"><input type="text" name="script" value="" size="30" style="width: 100%; background: #333333; font-family: Verdana; color: white; font-size: 11px;">
</td></tr>
<input type="hidden" name="sessid" value="<?php echo "".md5($string).""; ?>">

and scajax.php

<?php
echo "Test"; // I want image src to change to this and
echo "\n";
echo "Test1"; // form value to this
?>

[/QUOTE]

[TacMaf]

Wow, it great. Thanks very much! I can't believe your 16!! Must be the Welsh blood (like mine )
Thanks.

[spikeZ]

Nice answer Jake

I was meaning if you were updating more than one row of the database eg if it was a table of contents and you were updating individual rows within that table - in which case you would need an identifier as to which row you were updating

[TacMaf]

Ah I see.

[TacMaf]

I'm getting an error for some reason:
document.Register.session has no properties
document.Register.sessid.value=$data[1];

Why would I get this error?

[TacMaf]

The first part of the split works fine.

[lorenw]

If its a lot of data you are after, not sure the limit but I had to change the method from GET to POST because I was loosing data.

[TacMaf]

OK, but it's only 2 words "Test". To I just changed the word get to post and there was no difference.

[lorenw]

just changing GET to POST will not work, you will need an additional line to tell it what is posted.

 xmlHttp.open("POST", "ajax.php", true);     
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

I was just giving a heads up that if you are loosing data from the table you may need to use the POST method. I was outputting many paragraphs of text and GET is limited.

[TacMaf]

Ah, thanks. No luck unfortunately. Thanks.

[TacMaf]

Got it working!! Thanks guys!