[RESOLVED] Tabbed Content via Ajax using Wayfinder and jQuery Tabs Not working

4 Posts

togi_one Reply #1, 15 years, 4 months ago

I am using the code in: http://rtfm.modx.com/display/revolution20/Loading+Pages+in+the+Front-End+via+AJAX+and+jQuery+Tabs#LoadingPagesintheFront-EndviaAJAXandjQueryTabs-UsingWayfinder to Load Pages in the Front-End via AJAX and jQuery Tabs using Wayfinder [b]but when I click the tabbed links (the tabs are not visually correct either) the content is opening in separate pages[/b: http://www.elbafirst.co.uk/index.php?id=7

My Resource content looks like this:

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
 
<div id="tabs">
    <ul>
[[Wayfinder? &startId=7` &level=`1` &rowTpl=`TabbedContentRowTpl`]]
    </ul>
</div>

The &rowTpl template chunk looks like this:

<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>

I have tried jQuery Tabs here (without a Wayfinder call): http://www.elbafirst.co.uk/index.php?id=11 to test that jQuery tabs does work using:

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>

<div id="tabs">
    <ul>
        <li><a href="[[~10]]">About Elba ID #10</a></li>
        <li><a href="[[~12]]">Resource with ID #12</a></li>
        <li><a href="[[~14]]">Resource with ID #14</a></li>
    </ul>
</div>

863 Posts

Lucas Reply #2, 15 years, 4 months ago

Did you fix it? Works for me

Note however that it is loading the full page inside your tab. You’ll need to ensure that your header/footer/sidebar is excluded from pages you want to load in the tab...

863 Posts

Lucas Reply #3, 15 years, 4 months ago

I’m sorry, I didn’t notice the link to your first example. That doesn’t work embarrassed

But your Wayfinder call is missing a backtick ``, try this and called it uncached while developing:

[[!Wayfinder? &startId=`7` &level=`1` &rowTpl=`TabbedContentRowTpl`]]

Also check your rowTpl chunk. It’s outputting a whole lot of additional <ul> tags. From your page source:

<div id="tabs">
    <ul>
<ul><ul><li class="first"><a href="index.php?id=8" title="Description">Description</a></li></ul> 
<ul><li><a href="index.php?id=16" title="Hotels">Hotels</a></li></ul> 
<ul><li class="last"><a href="index.php?id=17" title="Culture">Culture</a></li></ul> 
</ul>
    </ul>
</div>

2 Posts

jepedia Reply #4, 15 years, 4 months ago

Hi There,

i might know whats going wrong there.
Use this in your wayfinder call and remove the ul elements in your template:

&outerTpl=`yourOuterTemplate`

then create a Chunk called `yourOuterTemplate` ->Same name you set in your wayfinder call
and place this code in the new Chunk

<ul id="yourID">
[[+wf.wrapper]]
</ul>

This is the shortest way to explain it, your simply missing a correct wayfinder wrap for your list elements.
You can see that in your actual source code, because your getting lots of ul-Elements back instead of li-Elements
Thats should be the reason why jquery tabs is not working correct

I hope this was the solution or a hint for you to get it running

Cheers
Jepedia

4 Posts

togi_one Reply #5, 15 years, 4 months ago

Quote from: lucas at May 17, 2011, 08:22 AM

But your Wayfinder call is missing a backtick ``, try this and called it uncached while developing:
[[!Wayfinder? &startId=`7` &level=`1` &rowTpl=`TabbedContentRowTpl`]]
Also check your rowTpl chunk. It’s outputting a whole lot of additional <ul> tags. From your page source:
<div id="tabs">
    <ul>
<ul><ul><li class="first"><a href="index.php?id=8" title="Description">Description</a></li></ul> 
<ul><li><a href="index.php?id=16" title="Hotels">Hotels</a></li></ul> 
<ul><li class="last"><a href="index.php?id=17" title="Culture">Culture</a></li></ul> 
</ul>
    </ul>
</div> 

Thanks for spotting the missing backtick (though that didn’t resolve it) and the extra <ul> tags (that was because of me experimenting with the &rowTpl after posting).

This was actually resolved by removing the <ul> tags surrounding the Wayfinder call as suggested by jepedia.

The &outerTpl is useful but doesn’t seem necessary, though probably come in handy for formatting.

Here is my new working code for the Resource Content:

<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
 
<div id="tabs">

[[!Wayfinder? &startId=`7` &level=`1` &outerTpl=`TabbedContentOuterTpl` &rowTpl=`TabbedContentRowTpl`]]

</div>

and the &outerTpl is a direct copy of jepedias for now:

<ul id="yourID">
[[+wf.wrapper]]
</ul>

2 Posts

jepedia Reply #6, 15 years, 4 months ago

Nice one,..

i´m glad it helped,..

10 Posts

enumaelis Reply #7, 15 years, 2 months ago

Quote from: togi_one at May 17, 2011, 09:36 AM

This was actually resolved by removing the <ul> tags surrounding the Wayfinder call as suggested by jepedia.

The &outerTpl is useful but doesn’t seem necessary, though probably come in handy for formatting.

Here is my new working code for the Resource Content:
<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
 
<div id="tabs">

[[!Wayfinder? &startId=`7` &level=`1` &outerTpl=`TabbedContentOuterTpl` &rowTpl=`TabbedContentRowTpl`]]

</div>
and the &outerTpl is a direct copy of jepedias for now:
<ul id="yourID">
[[+wf.wrapper]]
</ul>

Hi, I tried your solution but it doesn’t work either. I visited your site and saw that actually your tabbed page works. Here is my problem: I have a page (say id=2) which should contain the call via tabs to 3 other documents (say id= 3 , 4 , 5). If i call these pages via getResources or Wayfinder i cannot get them. If i try via getField snippet as shown in http://rtfm.modx.com/display/revolution20/Loading+Pages+in+the+Front-End+via+AJAX+and+jQuery+Tabs it works but has some problem on switching between the different tables. The same hapèpens if i insert the code manually without snippet call. Can you show me again your code how it works actually on your site? or does anyone have an idea or solution? Btw I am on modx 2.1.1 pl on a debian sid.