1

I now want to create a second set of pill tabs based on a playa list called up within the first channel entry (called "nwt_2cd_order_location") I am using Zurb Foundation's mark up for responsive design and it worked on flat pages.

The child in a playa list would be (called "3rd_order_under") and from that list i want to add content from that child. This all works pretty good until the user chooses a different selection under the first set of tabs (nwt_2cd_order_location). It does not update the second set correctly (3rd_order_under).

If thats not enough, once that works i would like to add another playa list (no tabs this time fortunately) in the content derived from a playa list inside (3rd_order_under) called {4th_order_under_3rd_order}. Can you call up a playa list three tier deep?

So if any one here has any suggestions I sure would appreciate it.

Thanks Eric

The page

http://niwot.colorado.edu/index.php/location

My simplified code:

<!-- PILL TABS -->

<div class="row">

<div class="twelve columns" style="padding-top:20px;"&#62;
  <dl class="tabs pill"&#62;
    {exp:channel:entries channel="nwt_2cd_order_location" limit="10" sort="asc"}
       <dd style="padding:5px;" {if count == '1'}class="active"{/if}> <a href="#pillTab{url_title}">{title}&#60;/a&#62;</dd>
    {/exp:channel:entries}
 </dl>

  <ul class="pill tabs-content contained">
          {exp:channel:entries channel="nwt_2cd_order_location" limit="10" sort="asc"}
       <li {if count == '1'}class="active"{/if} id="pillTab{url_title}Tab">
            <!-- li class="active" id="pillTab{url_title}" -->
            <div class="row">                              
                   <!-- MAP BOX -->       
               <div class="twelve columns" style="float:right;"> 
                  {summary}
               </div>

            {if 3rd_order_under}
            <p><strong>Locations within {title}</strong></p>
            {/if}      
         </div>        

      <dl class="tabs pill">
           {exp:playa:children field="3rd_order_under" limit="25" sort="asc"}
               <dd style="padding:5px;" {if count == '1'}class="active"{/if}><a href="#pillTab{url_title}">{title}</a>
               </dd>
          {/exp:playa:children}
      </dl>

<!-- CONTENT FOR 3rd ORDER pill tabs within pill tabs -->

    <ul class="pill tabs-content contained">
     {exp:playa:children field="3rd_order_under" limit="25" sort="asc"}
       <li {if count == '1'}class="active"{/if} id="pillTab{url_title}Tab">
            <div class="row">                                     
               <div class="twelve columns" style="float:right;"> 
                   {summary_3rd_order}<br />

                   {!-- nothing I've done here works
                   exp:playa:siblings entry_id="{4th_order_under_3rd_order}" parent_id="3rd_order_under"}
                   {4th_order_under_3rd_order}
                   {/exp:playa:siblings}
                   --}
               </div>
            </div>
         </li>
       {/exp:playa:children}
       {/exp:channel:entries}     
      </ul>   
    </li>    
  </ul>         

the additional tab selections just stack on top each other instead of replacing the previous selection.

  • First and foremost, there's an error on your page because jQuery is not defined: Uncaught ReferenceError: jQuery is not defined. You either did not include it, or included it too late in the page. – Joan May 5 '14 at 17:28
  • You did include jQuery after 'foundation.tabs.js', make sure to include jQuery first! – Joan May 5 '14 at 17:29
  • Thanks- I moved jQueries around a bit. Still looking to solve problem however. That does not seem to be the problem or I did it incorrectly. Again thanks for your help! – Eric May 5 '14 at 18:43
1

You have still included your JavaScript in the wrong order, jQuery should come first.

How it is now:

<!-- More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.foundation.tabs.js"></script
<!-- END More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.js"></script>
<script src="http://niwot.colorado.edu/eejavascripts/foundation.min.js"></script>

How it must be:

<script src="http://niwot.colorado.edu/eejavascripts/jquery.js"></script>
<!-- More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/jquery.foundation.tabs.js"></script
<!-- END More Foundation pannel -->
<script src="http://niwot.colorado.edu/eejavascripts/foundation.min.js"></script>
| improve this answer | |
  • Hi @Joan, Based on your comment I had made a change very similar to this. It did not solve initial problem. However moving the closing children tag did. Closing the code block with {/exp:playa:children} </ul> </li> {/exp:channel:entries} </ul> </div> </div> working with var_prefix to try to fix the second problem. – Eric May 8 '14 at 17:40
  • Hi Eric, good to hear you solved it. I also see in your code that at {!-- nothing I've done here works exp:playa:siblings You forgot the opening curly bracket. { – Joan May 9 '14 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.