[TYPO3-english] Avoid FE page-refresh with AJAX ? How hard is it ? Where to start ?

Fri Nov 6 15:06:17 CET 2009

Maybe to clarify a bit more:

Here is one example of the simple kind of ajax request i'd like to integrate
with typo3:

In this example the url to load is set statically in the script:

$("#ilink").load("http://mytypo3site.com/index.php?id=20 .contentClass");

What i can't figure out is how do i do this dynamically so that when i click
on my menu items (a pretty standard TMENU) the url from this click is loaded
into the div ?

Here is the source code of a simple test page i made, this static example is
working fine ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX test</title>
<script src="http://code.jquery.com/jquery-latest.js">
</script>   

<script>  function loadAJAX() {
  $(document).ready(function(){
$("#ilink").load("http://mytypo3site.com/index.php?id=20 .contentClass");
});
  }  </script>
</head> 

<body> <div id="ilink" onclick="loadAJAX();">xxx</div> </body>

</html>

Thx for any pointers/hints/help :)

On 11/6/09 12:07 PM, in article
mailman.1.1257505699.15382.typo3-english at lists.typo3.org, "Christophe
Stadler" <christophe at stadler.com> wrote:

> Hello everyone,
> 
> I'm not really a proper programmer so it seems my knowledge is not deep
> enough to get started with this. What i want to do is fairly simple, i would
> like to avoid page-refreshs and use some type of AJAX/JS to do this.
> 
> I've spent the last couple of days reading through the web and manuals to
> try to figure this out but it seems i just don't have the base knowledge to
> make the right connections. So yes, i did google and RTFM but still have no
> clue how to go about this.
> 
> Could someone explain in fairly basic terms how something like this can be
> done and point me somewhere in the right direction.
> 
> I am using Templavoila but it's a very simple layout, i basically only have
> 3 columns:
> 
> Menu | content | SWFmovie
> 
> What i want is that when i click on a menu item, the corresponding page
> loads in the background and then appears in the maincontent DIV without the
> page reloading
> 
> How do i set this up ?
> 
> Do i use the build in AJAX capabilities of T3 or do i have to install an
> extension ? Or do i have to code this into the html-template via Javascript
> ?
> 
> Thx for any help or hints to get me started !
> 
> Chris
> 