[TYPO3-english] Reload/Refresh Page Content Without Reloading Page

Sat Jan 21 09:46:55 CET 2012

To all TS coders,

My company is serious about getting this issue solved. To that end, we are willing to pay. Please send a private email to me if you are able to assist. 

Thanks,
-Scott.

________________________________
 From: Scotty C <superscotty19 at yahoo.com>
To: TYPO3 English <typo3-english at lists.typo3.org> 
Sent: Thursday, January 12, 2012 11:58:17 PM
Subject: Re: [TYPO3-english] Reload/Refresh Page Content Without Reloading Page

Philipp,

I have sent you a private message.

Thanks,
-Scott.

________________________________
From: Philipp Gampe <typo3.lists at philippgampe.info>
To: typo3-english at lists.typo3.org 
Sent: Wednesday, January 11, 2012 4:18:56 PM
Subject: Re: [TYPO3-english] Reload/Refresh Page Content Without Reloading Page

Hi Scotty C,

Scotty C wrote:

> Philipp,
> 
> Wow I didn't realize I had that many holes - Thank you so much! Here's my
> new setup:
> 
> (note: "demo" has been replaced with "storm")
> 
> *** FILES: ***
> 
> /fileadmin/storm/ajax/jquery... (same)
> /fileadmin/storm/ajax/blank.html (same)
> /fileadmin/storm/ajax/actions.js (modified as below without spaces)
> $(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() {
it is #menu (same below). This are normal CSS selectors.

> url = $(this).attr("href");
> getContent(url);
> $(this).blur();
> return false;
> });
> 
> / / Inform something that happens
> $("# content").ajax start(function() {
#content

> $(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) {
> alert (url);
> / / Show contents clean and write
> $("# content")
> .removeClass("loading")
> .css("display", "none")
> .html(html)
> .fadeIn();
> / / Address bar update
> location.hash = url.replace(/\html/. , "" );
> }
> });
> }

snip ...
leave out the realurl stuff until you get it working.

> *** TS SETUP (thanks for the header tip!) ***
> ajaxcall = PAGE
> ajaxcall {
> typeNum = 101
I can not call:
http://demo.stormat.ca/?type=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
> 
> page.includeJSlibs.jquery = fileadmin/storm/ajax/jquery-1.7.1.min.js
> page.includeJS.ajax = fileadmin/storm/ajax/actions.js

They are not on your demo site.

> 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> 

you need an id="menu" to make the JS work. Not a class menu-guide.

> 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
> 
> config {
> simulateStaticDocuments = 0
> baseURL = http://demo.stormat.ca/
> tx_realurl_enable = 1
> } # end config
> } # end page
> 
> 
> 
> 
> I don't have any example.org/ajax.html stuff ... am I supposed to?

No need. Just put the correct URL in the JS file.

> As you'll see, the url for testing is http://demo.stormat.ca ... and it's
> messed up. Aside from the fact that the AJAX/TYPO3 cocktail isn't working,
> for some reason there's also my main site's template showing up below(?)!

I don't know what you do, but it seems to be a mess.

You will need to add the id "content" around the content like 
<div id="content">###CONTENT###</div>

Do not use any other menues in TYPO3 than TMENU (or if you really really 
need it: GMENU; but TMENU+CSS is the way to go).

It this point I kindly suggest to start reading a lot of documentation 
(about CSS, HTML and JS) or hire someone to do the job for you.

At least I have the feeling that you are totally lost by the concept:
Render a normal page with normal menu.
Add a JS listner that intercepts the click on the link and
1) computes the new URL
2) fetches the new content from the new URL
3) replaces the old content with the new content
4) optionally change the browser URL to allow bookmarking

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
_______________________________________________
TYPO3-english mailing list
TYPO3-english at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english