Jquery tabs integrated into Views

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
akanik's picture

Hey guys, I'm having an issue with using a combination of jquery tabs and the views module. I have created a content type called "Movie Listings" and a custom template that puts all the fields from Movie Listings into a tabs table:

<div class="movie_listing">
          <div id="tabs">
                <ul>
                 <li><a href="#tabs-1">DETAILS</a></li>
                   <li><a href="#tabs-2">SHOWTIMES</a></li>
                 <li><a href="#tabs-3">TRAILER</a></li>
                   <li><a href="#tabs-4">PRESS</a></li>
             </ul>
                <div id="tabs-1">
                  <div class="left forty">
                     <?php print render($content['field_image']);?>
                   </div>
                   <div class="left forty">
                     <?php print $title; ?>
                   <?php print render($content['field_event_location']);?>
                    <?php print render($content['field_date_span']);?>
                     <?php print render($content['field_director']);?>
                      <?php print render($content['body']);?>
                  </div>
               </div>
               <div id="tabs-2">
                    <?php print render($content['field_event_location']);?>
                    <?php print render($content['field_showtimes']);?>
               </div>
               <div id="tabs-3">
                    <?php print render($content['field_trailer']);?>
             </div>
               <div id="tabs-4">
                    <?php print render($content['field_links']);?>
               </div>
           </div>
       </div>

My issue is that when views puts multiple of these tabs tables on the same page, the ID's fight each other. I've tried replacing all ID's with CLASSes but I think that there is something in the tabs ui .js file that is looking for ID's. . . I'm not a javascript wiz so I'm having some trouble navigating the tabs ui .js file.

I've searched for answers to the issue, but have come up dry. Does anyone know how to overcome this hurtle?

Thanks so much,
Allie

Comments

Fixed it!

akanik's picture

Sometimes I should wait to post issues until I've had a good night's sleep....

For anyone else who has had this issue, here is what I did.

I simply changed the first <div id="tabs"> ..... </div> to class="tabs", then created dynamic id's for each of the individual divs using <div id="tab-1<?php print $node->nid; ?>"> ...... </div>. I've included the full change below.

      <div class="movie_listing">
            <div class="tabs">
             <ul>
                 <li><a href="#tabs-1<?php print $node->nid; ?>">DETAILS</a></li>
                    <li><a href="#tabs-2<?php print $node->nid; ?>">SHOWTIMES</a></li>
                  <li><a href="#tabs-3<?php print $node->nid; ?>">TRAILER</a></li>
                    <li><a href="#tabs-4<?php print $node->nid; ?>">PRESS</a></li>
              </ul>
                <div id="tabs-1<?php print $node->nid; ?>" class="tabsection">
                  <div class="left forty">
                     <?php print render($content['field_image']);?>
                   </div>
                   <div class="left forty">
                     <?php print $title; ?>
                   <?php print render($content['field_event_location']);?>
                    <?php print render($content['field_date_span']);?>
                     <?php print render($content['field_director']);?>
                      <?php print render($content['body']);?>
                  </div>
               </div>
               <div id="tabs-2<?php print $node->nid; ?>" class="tabsection">
                    <?php print render($content['field_event_location']);?>
                    <?php print render($content['field_showtimes']);?>
               </div>
               <div id="tabs-3<?php print $node->nid; ?>" class="tabsection">
                    <?php print render($content['field_trailer']);?>
             </div>
               <div id="tabs-4<?php print $node->nid; ?>" class="tabsection">
                    <?php print render($content['field_links']);?>
               </div>
           </div>
       </div>

Note also that you will need to change the script callout in your header or html.tpl.php document.
Change this:

$("#tabs").tabs();

To this:

$(".tabs").tabs();

Best,
Allie

p.s. one last thing, be careful about your naming conventions. it seems that some themes use class="tabs" for some administrative tabs and it could make your site a touch wonky.

Pittsburgh

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week