Avoid FE page-refresh with AJAX ? How hard is it ? Where to start ?

View: New views

2 Messages — Rating Filter: Alert me

Avoid FE page-refresh with AJAX ? How hard is it ? Where to start ?

by Christophe Stadler :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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

_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english

Re: Avoid FE page-refresh with AJAX ? How hard is it ? Where to start ?

by Christophe Stadler :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

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@..., "Christophe
Stadler" <christophe@...> 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
>

_______________________________________________
TYPO3-english mailing list
TYPO3-english@...
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english