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

[Scotty C]

Martin,

That makes perfect sense! I read that .live() is deprecated though in favour of .on(), but WHO CARES because ... (drum roll please!) ... IT WORKS!!!!!!!!!

Everyone, here's the solution to make pages load in a cool AJAX way so you can load content without reloading the page:
(Assumption: div with id="menu" for the menu, wrapper div with id="content_bg" and main div with 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">  $('#menu a, p.bodytext a').live("click",function(e) { e.preventDefault(); $('#content_bg').load($(this).attr('href')+' #content'); return false;  }); </script> 

I can't put words to my gratitude for your assistance. Please accept payment from my company for your time - please PM me to discuss.
-Scott.



________________________________
 From: Martin Mädler <martin.maedler at rwth-aachen.de>
To: typo3-english at lists.typo3.org 
Sent: Wednesday, March 14, 2012 5:53:46 AM
Subject: Re: [TYPO3-english] Load Page Content with JQuery - Doesn't work in TYPO3 Only?
 
Hello Scott,

you need to bind the click event handler for every new element that is 
dynamically added to the html page (i.e. through jQuery load).
Right now your event binding is executed once when the document is 
ready. jQuery attaches the click handler (your anonymous function) to 
every element that matches the pattern '#menu a, p.bodytext a'. Elements 
that are added afterwards are not considered.

To solve your problem you can use the live function instead of click: 
http://api.jquery.com/live/
It basically works like .click() ( which is shorthand for .bind("click", 
...) )

Another option would be to use the complete callback of the load 
function (called when loading of the specified page is comlete) and 
manually call .click() again.

Cheers
-Martin
Am 14.03.2012 09:10, schrieb 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
> _______________________________________________
> 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