Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Boris Kamp
Boris Kamp
16,660 Points

Transforming html with jQuery

I was wondering if it is worth the while to transform this code:

<div id="archive-grid-view" class="row row-mobile">
      <div class="list box text-shadow">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <div class="col-xs-6 col-sm-4 col-md-3 list-item box archive-view-container grid">
            <a href="<?php the_permalink(); ?>">
              <div class="box-content">
                <img class="box-img" src="<?php the_field('postGridImage'); ?>" alt="<?php the_title();?>" title="<?php the_title();?>">
                <h5 class="title"><?php the_field('kitName'); ?></h5>
                <div class="archive-kit-info grid">
                  <?php if ( has_term( 'none', 'countries' ) ) {} else { ?>
                    <img class="country-flag" src="<?php bloginfo('stylesheet_directory'); ?>/images/country_flags/<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->name; } ?> Flag.png" alt="><?php $term = get_field('country_of_origin');?><?php echo $term->name; ?> Flag">
                  <?php } ?>
                  <div class="label-feature scale CB-<?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                   <?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <div class="label-feature manufacturer CB-<?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                   <?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <div class="label-feature country CB-<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                    <?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <?php if ( has_term( '', 'product_categories' ) ) { ?>
                    <div class="label-feature product-categories <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
                      <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                    </div>
                  <?php } else {}?>
                  <?php if ( has_term( '', 'vehicle_categories' ) ) { ?>
                    <div class="label-feature vehicle-categories <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
                      <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                    </div>
                  <?php } else {}?>
                  <div class="label-feature date">
                    <?php echo the_time('m/d/Y h');?>
                  </div>
                </div>
              </div>
            </a>
          </div>

to this code when a user clicks a button (to change the layout from grid style to list style)

<div id="archive-list-view" class="row row-mobile">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Scale</th>
        <th>Manufacturer</th>
        <th>Country</th>
        <th>Product Category</th>
        <th>Vehicle Category</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody class="list box text-shadow">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <tr class="list-item box archive-view-container list">
        <td class="title">
          <?php the_field('kitName'); ?>
        </td>
        <td class="label-feature scale CB-<?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
          <?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
        </td>
        <td class="label-feature manufacturer CB-<?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
          <?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
        </td>
        <td class="label-feature country CB-<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
          <?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
        </td>
        <td class="label-feature product-categories <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
          <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
        </td>
        <td class="label-feature vehicle-categories <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
          <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
        </td>
        <td class="label-feature date">
          <?php echo the_time('m/d/Y h');?>
        </td>
      </tr>

      <?php endwhile; else: ?>

      <div class="page-header">
        <h1>Oh no!</h1>
      </div>

      <p>No content is appearing for this page!</p>

      <?php endif; ?>
    </tbody>
  </table>
</div>

What do you guys think? hiding, adding with JS or something else?

Thanks!

1 Answer

Andre Romano
Andre Romano
8,809 Points
Andre Romano
Andre Romano
8,809 Points

Not sure if I understand what you mean, but you could remove the initial grid view and load the list view from a separate html file with ajax.

Or if you want the user to be able to switch back and forth, have the two layouts in separate html files and load them with ajax on button click.

http://api.jquery.com/jquery.ajax/

Boris Kamp
Boris Kamp
16,660 Points

let me give you some background info: I use Wordpress and a jQuery plugin called jPlist http://jplist.com/ to create filters in my archive pages. Now I would like the user to switch between grid and list view as well. The code I gave above is part of a lot more code to create the total output for jPlist. here's the total code:

<div id="archivePhp" class="box jplist">
  <div class="container">
    <div class="row row-mobile">
    <!-- ios button: show/hide panel -->

      <div class="jplist-ios-button">
        <i class="fa fa-sort"></i>
        Filter Options
      </div>

      <!-- panel -->
      <div class="jplist-panel box panel-top">                 

        <!-- reset button -->
        <button
          type="button"
          class="jplist-reset-btn"
          data-control-type="reset" 
          data-control-name="reset" 
          data-control-action="reset">
          Reset  <i class="fa fa-share"></i>
        </button>

        <!-- items per page dropdown -->
        <div 
          class="jplist-drop-down" 
          data-control-type="drop-down" 
          data-control-name="paging" 
          data-control-action="paging">
          <ul>
            <li><span data-number="3"> 3 per page </span></li>
            <li><span data-number="5"> 5 per page </span></li>
            <li><span data-number="10" data-default="true"> 10 per page </span></li>
            <li><span data-number="all"> view all </span></li>
          </ul>
        </div>

        <!-- sort dropdown -->
        <div 
          class="jplist-drop-down" 
          data-control-type="drop-down" 
          data-control-name="sort" 
          data-control-action="sort"
          data-datetime-format="{month}/{day}/{year} {hour}"> <!-- {year}, {month}, {day}, {hour}, {min}, {sec} -->

          <ul>
            <li><span data-path="default">Sort by</span></li>
            <li><span data-path=".title" data-order="asc" data-type="text">Kitname A-Z</span></li>
            <li><span data-path=".title" data-order="desc" data-type="text">Kitname Z-A</span></li>
            <li><span data-path=".manufacturer" data-order="asc" data-type="text">Manufacturer A-Z</span></li>
            <li><span data-path=".manufacturer" data-order="desc" data-type="text">Manufacturer Z-A</span></li>
            <li><span data-path=".country" data-order="asc" data-type="text">Country asc</span></li>
            <li><span data-path=".country" data-order="desc" data-type="text">Country desc</span></li>
            <li><span data-path=".date" data-order="asc" data-type="datetime">Oldest</span></li>
            <li><span data-path=".date" data-order="desc" data-type="datetime" data-default="true">Newest</span></li>
          </ul>
        </div>

        <!-- views -->
        <div class="archive-view-options">
          <button id="grid-view-button"><span class="glyphicon glyphicon-th"></span></button>
          <button id="list-view-button"><span class="glyphicon glyphicon-align-justify"></span></button>
        </div>

        <!-- filter by title -->
        <div class="text-filter-box">
          <input 
          data-path=".title" 
          type="text" 
          value="" 
          placeholder="search by Name" 
          data-control-type="textbox" 
          data-control-name="title-filter" 
          data-control-action="filter"
          />
        </div>

        <!-- pagination results -->
        <div 
          class="jplist-label" 
          data-type="Page {current} of {pages}" 
          data-control-type="pagination-info" 
          data-control-name="paging" 
          data-control-action="paging">
        </div>

        <!-- pagination -->
        <div 
          class="jplist-pagination" 
          data-control-type="pagination" 
          data-control-name="paging" 
          data-control-action="paging">
        </div>

        <!-- Button Advanced Search -->
        <button type="button" id="adv-search-btn" class="">Advanced Search</button>

        <?php include (TEMPLATEPATH . '/includes/jp-list-filters.php'); ?>

      </div> <!-- panel Top -->
    </div> <!-- Row Mobile -->

    <!-- Data Loop -->
    <div id="archive-grid-view" class="row row-mobile">
      <div class="list box text-shadow">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <div class="col-xs-6 col-sm-4 col-md-3 list-item box archive-view-container grid">
            <a href="<?php the_permalink(); ?>">
              <div class="box-content">
                <img class="box-img" src="<?php the_field('postGridImage'); ?>" alt="<?php the_title();?>" title="<?php the_title();?>">
                <h5 class="title"><?php the_field('kitName'); ?></h5>
                <div class="archive-kit-info grid">
                  <?php if ( has_term( 'none', 'countries' ) ) {} else { ?>
                    <img class="country-flag" src="<?php bloginfo('stylesheet_directory'); ?>/images/country_flags/<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->name; } ?> Flag.png" alt="><?php $term = get_field('country_of_origin');?><?php echo $term->name; ?> Flag">
                  <?php } ?>
                  <div class="label-feature scale CB-<?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                   <?php $terms = get_the_terms( $post->ID , 'scales' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <div class="label-feature manufacturer CB-<?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                   <?php $terms = get_the_terms( $post->ID , 'manufacturers' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <div class="label-feature country CB-<?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo $term->slug; } ?>">
                    <?php $terms = get_the_terms( $post->ID , 'countries' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                  </div>
                  <?php if ( has_term( '', 'product_categories' ) ) { ?>
                    <div class="label-feature product-categories <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
                      <?php $terms = get_the_terms( $post->ID , 'product_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                    </div>
                  <?php } else {}?>
                  <?php if ( has_term( '', 'vehicle_categories' ) ) { ?>
                    <div class="label-feature vehicle-categories <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo 'CB-' . $term->slug . ' '; } ?>">
                      <?php $terms = get_the_terms( $post->ID , 'vehicle_categories' ); foreach ( $terms as $term ) { echo '<span>' . $term->name . '</span>'; } ?>
                    </div>
                  <?php } else {}?>
                  <div class="label-feature date">
                    <?php echo the_time('m/d/Y h');?>
                  </div>
                </div>
              </div>
            </a>
          </div>

        <?php endwhile; else: ?>

          <div class="page-header">
            <h1>Oh no!</h1>
          </div>

          <p>No content is appearing for this page!</p>

        <?php endif; ?>
      </div>
    </div> <!-- Row Mobile -->

    <div class="row row-mobile">

      <div class="box jplist-no-results text-shadow align-center">
        <p>No results found</p>
      </div>

      <!-- ios button: show/hide panel -->
      <div class="jplist-ios-button">
        <i class="fa fa-sort"></i>
        Filter Options
      </div>

      <!-- panel -->
      <div class="jplist-panel box panel-bottom"> 
         <!-- items per page dropdown -->
         <div 
          class="jplist-drop-down"
          data-control-type="drop-down"
          data-control-name="paging"
          data-control-action="paging"
          data-control-animate-to-top="true">

          <ul>
            <li><span data-number="3"> 3 per page </span></li>
            <li><span data-number="5"> 5 per page </span></li>
            <li><span data-number="10" data-default="true"> 10 per page </span></li>
            <li><span data-number="all"> view all </span></li>
          </ul>
        </div>

        <!-- sort dropdown -->
        <div 
          class="jplist-drop-down" 
          data-control-type="drop-down" 
          data-control-name="sort" 
          data-control-action="sort"
          data-control-animate-to-top="true"
          data-datetime-format="{month}/{day}/{year}"> <!-- {year}, {month}, {day}, {hour}, {min}, {sec} -->

          <ul>
            <li><span data-path="default">Sort by</span></li>
            <li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
            <li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
            <li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
            <li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
            <li><span data-path=".like" data-order="asc" data-type="number" data-default="true">Likes asc</span></li>
            <li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
            <li><span data-path=".date" data-order="asc" data-type="datetime">Date asc</span></li>
            <li><span data-path=".date" data-order="desc" data-type="datetime">Date desc</span></li>
          </ul>
        </div>

        <!-- pagination results -->
        <div 
          class="jplist-label" 
          data-type="{start} - {end} of {all}"
          data-control-type="pagination-info" 
          data-control-name="paging" 
          data-control-action="paging">
        </div>

        <!-- pagination -->
        <div 
          class="jplist-pagination" 
          data-control-animate-to-top="true"
          data-control-type="pagination" 
          data-control-name="paging" 
          data-control-action="paging">
        </div>

      </div> <!-- panel bottom -->
    </div> <!-- Row Mobile -->
  </div>  <!-- Container -->
</div> <!-- archivePhp -->

I found out that if I use two containers (one for list and one for grid) inside the <!-- Data Loop --> and simply hide/show either one of the two based on the user's click action (grid or list button), this breaks the jPlist and thus disables all the filters and sorting and stuff etc, I found jQuery to be the solution (this keeps jPlist working) but am wondering if im missing something or if this is really the way It should be achieved. I would like to be sure before I start transforming everything with JS and find out later that this is not the ideal solution.

if you need more info, shoot! Thanks!