[TYPO3-english] Reload/Refresh Page Content Without Reloading Page
Scotty C
superscotty19 at yahoo.com
Wed Jan 4 07:05:52 CET 2012
Philipp,
You are absolutely correct. Around the same time I received your reply, I deduced the same thing. So, I believe my original query is now more refined, I just need to fill in a few gaps. Here's what I've pieced together:
0.) TYPO3 Page Tree
- Demo Site (id 187)
-- Test Page1 (containing content)
-- Test Page2 (containing content)
1.) Files:
---- fileadmin/demo/query-1.7.1.min.js (self explanatory)
---- fileadmin/demo/actions.js (containing the custom code):
$ ( document ). ready ( function () {
/ Respond / if transmitted to the anchor
if ( location . hash ) {
x = location . hash ;
getContent ( x . slice ( 1 ) + "html." );
}
/ / Links via Ajax reload
//$(" A: not ([href ^ = 'http://'])"). click (function () {
$ ( "# menu a" ). click ( function () {
url = $ ( this ). attr ( "href" );
getContent ( url );
$ ( this ). blur ();
return false ;
});
/ / Inform something that happens
$ ( "# content" ). ajax start ( function () {
$ ( this ). fadeOut ( function () {
$ ( this )
. text ( "" )
. addClass ( "loading" )
. fadeIn ();
});
});
});
/ *
* Retrieve the content from the server
* /
function getContent ( url ) {
$ . ajax ({
/ / Expand links to call
url : url . replace ( / \ html /. , "/ ajax.html" ),
/ / If it worked
success : function ( html ) {
/ / Show contents clean and write
$ ( "# content" )
. removeClass ( "loading" )
. css ( "display" , "none" )
. html ( html )
. fadeIn ();
/ / Address bar update
location . hash = url . replace ( / \ html /. , "" );
}
});
}
---- fileadmin/demo/blank.html (containing a menu & youtube video on the left (to test functionality), and the content area in the right)
<!-- ###DOCUMENT### START -->
<table width="100%" border="1" height="700">
<tr height="700">
<td width="50%"><!-- ###MENU### START -->
MENU HERE
<!-- ###MENU### END -->
</td>
<td rowspan="2" width="50%"><!-- ###CONTENT### START -->
CONTENT HERE
<!-- ###CONTENT### END -->
</td>
</tr>
<tr>
<td>
<iframe width="560" height="315" src="http://www.youtube.com/embed/13K3cTrlE0U" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>
<!-- ###DOCUMENT### END -->
2.) TS
ajaxcall = PAGE
ajaxcall {
typeNum = 101
10 < page.10
config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
} # end config
} # end ajaxcall
page = PAGE
page {
typeNum = 0
headerData.10 = TEXT
headerData.10.value = <SCRIPT language="JavaScript" type="text/javascript" src="fileadmin/demo/ajax/actions.js"></SCRIPT><SCRIPT language="JavaScript" type="text/javascript" src="fileadmin/demo/ajax/jquery-1.7.1.min.js"></SCRIPT>
bodyTag = <body>
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/storm/ajax/blank.html
workOnSubpart = DOCUMENT
subparts.CONTENT < styles.content.get
subparts.MENU = HMENU
subparts.MENU {
entryLevel = 0
special = directory
# the starting point of the menu tree
special.value = 187
wrap = <ul class="guide-menu"><li class="guide-menu-title">Sample Menu</li>|</ul>
1 = TMENU
1 {
NO.subst_elementUid = 1
NO.doNotLinkIt = 1
NO.allWrap = <li><a href="javascript:" rel="#guide-content{elementUid}">|</a></li>
} # end 1
} # end subparts.menu
} # end 10
} # end page
I'm so close! Extra help greatly appreciated!
-Scott.
________________________________
From: Philipp Gampe <typo3.lists at philippgampe.info>
To: typo3-english at lists.typo3.org
Sent: Tuesday, January 3, 2012 11:35:00 AM
Subject: Re: [TYPO3-english] Reload/Refresh Page Content Without Reloading Page
Hi Scotty C,
Scotty C wrote:
> 1.) TypeNum - I've read about people doing it but no steps on "how"
A template can have multiple PAGE objects which have a typeNum as unique
property.
so page = PAGE defaults do page.typeNum = 0.
Each page also has copy of the config. section at page.config.
Of course page is only a name. You can write
hello = PAGE
hello.typeNum = 10
hello.10 = TEXT
hello.10.value = Hello World!
now call you page on http://example.org/?type=10.
This way you can use many different templates on the same page. The are only
distinguished by there &type=xxx parameter in the URL.
> 2.) iFrames - easy to do but I hear that's messy when it comes to SEO
It should not be used any more, but you integrate it with those different
page templates from above. That what it was invented for ;)
> 3.) AJAX - again, easy to do but I don't know how to integrate into TYPO3
> template
Well, the question is independent of TYPO3. What you need to do is, to fetch
the content of the &type=xyz URL and insert it into your page + maybe
deleting some nodes inside your DOM.
> I've found a German tutorial here:
> http://www.interaktionsdesigner.de/2008/12/12/typo3-seiten-dynamisch-
nachladen-mit-jquery/
> ... but Google Translate doesn't do a good enough job for me to understand
> as it appears that the code is in pieces. What I'm hoping for is advice on
> which option is best, and then a complete step by step on how to implement
> with TYPO3.
Well that tutorial explains it step by step. The first part is about how to
use typeNum and different PAGE objects in one template (just what I did
above), the second part is an introduction to AJAX content reloading (as
replacement for the menu).
This second part is not related to TYPO3 at all as TYPO3 is done as soon as
it has rendered the template.
So just search the web for ajax page reload and you should find useful
information.
Best regards
--
Philipp Gampe – PGP-Key 0AD96065
_______________________________________________
TYPO3-english mailing list
TYPO3-english at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
More information about the TYPO3-english
mailing list