[TYPO3-english] Load Page Content with JQuery - Doesn't work in TYPO3 Only?

[Scotty C]

Martin,

I think we're getting somewhere! The bad news is, it doesn't work completely. However, it's better than it was before your solution! With your solution, I can now get menu items AND the topmost links to work (i.e. "STORM" logo and "24/7 tech support", which are both wrapped in <p bodytext> tags). However, content links are still not working. For example, if I click "Services", it works. But in the "Services" page, if I click "Web", it reloads the page. My guess is it's because, upon inspecting the "web" link using Chrome, the tag has a "target='self'" parameter? The exact code is:

<p class="bodytext">
   <a href="index.php?id=web_services" target="_self">Web Design &amp; Hosting</a>

</p>

So the question is: am I right, and if so how do I remove "target='self'" from all the content elements' <a> tags?

Thanks!
-Scott.


________________________________
 From: Martin Mädler <martin.maedler at rwth-aachen.de>
To: typo3-english at lists.typo3.org 
Sent: Tuesday, March 13, 2012 1:26:42 AM
Subject: Re: [TYPO3-english] Load Page Content with JQuery - Doesn't work in TYPO3 Only?
 
Hi Scott,

from what I can see you are missing to "prevent the default behavior" of a link. (see http://api.jquery.com/event.preventDefault/ )

Try this instead:

page.headerData.30.value =<script language="JavaScript" type="text/javascript">  $(document).ready(function() { $('#menu a|, p.bodytext a|').click(function(e) {|e.preventDefault();
|$('#content_bg').load($(this).attr('href')+' #content');  return false; }); });</script>

Hope this helps. Someone on stackoverflow mentioned this, too.
-Martin
Am 13.03.2012 06:19, schrieb Scotty C:
> Hi everyone,
> 
> A while back I started a thread asking for help on how to make a TYPO3 site load page content without a refresh. I even offered to pay someone to help me. I ended up figuring it out myself - couldn't be easier. All you need is some JQuery in the TS Template SETUP:
> 
> # Translation: When anything inside the "menu" id is clicked, # ONLY the stuff inside the "content" id will be loaded into the "content_bg" div
> # Requires: CSS template with div id=menu and div id=content
> page.headerData.20 = TEXT
> page.headerData.20.value =<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
> page.headerData.30 = TEXT
> page.headerData.30.value =<script language="JavaScript" type="text/javascript">  $(document).ready(function() { $('#menu a').click(function() { $('#content_bg').load($(this).attr('href')+' #content');  return false; }); });</script>
> 
> (sidebar: I know I can use IncludeJS but I've been having problems with it in other applications so I reverted to old faithful headerData) 
> 
> ... and it works great! Also, if I replace '#menu a' with 'bodytext a' (i.e. a regular<a>  tag/link in the content), that will work. But the problem is, it *only* works with one or the other, not both. I know the code is good because we've flogged it to death here: http://stackoverflow.com/questions/9574400/jquery-multiple-elements-clickfunction so that leads me to conclude it's something inside TYPO3. 
> Can anybody help me find the right touch to make both menu links and content links do the fancy load-content-without-page-reload?
> 
> Thanks as always,
> -Scott.
> _______________________________________________
> 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