0

I am trying to create a page that displays a bunch of resources with a filter to allow the end-user to sort the resources by type. I am using the following versions:

  • Drupal 7.28
  • Views 7.x-3.8
  • Semantic Views 7.x-1.0-alpha1
  • Bootstrap 3

VIEWS SETTING:

  • Format: Semantic Views
  • Show: Semantic Views: Fields
  • Filter Criteria: Content: Resource Type (exposed)
  • Exposed form in block: Yes
  • Exposed form style: Basic
  • Use AJAX: Yes

The functionality works and the results are displayed based on what's selected in the resource type drop-down filter. However, the results are displaying in nested divs each time the form gets submitted and I can't figure out why. :(

SOURCE CODE BEFORE SUBMISSION

<div class="region region-content">
  <section id="block-system-main" class="block block-system clearfix">
    <div class="resources-container container-fluid">
      <div class="container">
        <div class="view-dom-id-a9b31cdd0f34c14b5d87837cb4d072cc jquery-once-1-processed">
          <div class="row resources-Wrapper">
            [script for the $rows]

SOURCE CODE AFTER 1st SUBMISSION

<div class="region region-content">
  <section id="block-system-main" class="block block-system clearfix">
    <div class="resources-container container-fluid">
      <div class="container">
        <div>
          <div class="resources-container container-fluid">
            <div class="container">
              <div class="view-dom-id-65d9abf32d69cd0ef0cf53a48be512f6 jquery-once-1-processed">
                <div class="row resources-Wrapper">
                   [script for the $rows]

SOURCE CODE AFTER 2nd SUBMISSION

<div class="region region-content">
  <section id="block-system-main" class="block block-system clearfix">
    <div class="resources-container container-fluid">
      <div class="container">
        <div>
          <div class="resources-container container-fluid">
            <div class="container">
              <div>
                <div class="resources-container container-fluid">
                  <div class="container">
                    <div class="view-dom-id-5ce84e5f739ed6ab5c8f11ade31e3e96 jquery-once-1-processed">
                      <div class="row resources-Wrapper">
                        [script for the $rows]

To theme the exposed filter as a block, I did the following: copied the ‘views-exposed-form.tpl.php’ file in sites/all/modules/views/theme and pasted it in my theme directory and renamed accordingly (views-exposed-form--[view name].tpl.php). I did not edit the script in the template. (My reference: http://timonweb.com/how-display-views-exposed-filter-block-and-theme-it)

Then in my views-view--[view name].tpl.php, I added the following script:

<?php if ($rows): ?>  
<div class="resources-container container-fluid">
    <div class="container">
        <div class="view-dom-id-<?php print $dom_id; ?>">
            <div class="row resources-Wrapper"> 
                <?php print $rows; ?>
            </div>
        </div>

    </div>
</div>
<?php elseif ($empty): ?>
  <div class="view-empty">
    <?php print $empty; ?>
  </div>
<?php endif; ?>

I don't really understand what view-dom-id- does even after reading a bunch of articles...but I added in as a div after reading the following post: https://www.drupal.org/node/690748. If I don't have it in the views template, then the filter doesn't work.

DEFAULT SCRIPT IN views-exposed-form--[view name].tpl.php

<?php if (!empty($q)): ?>
  <?php
   // This ensures that, if clean URLs are off, the 'q' is added first so that
   // it shows up first in the URL.
    print $q;
 ?>
<?php endif; ?>
<div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
     <?php foreach ($widgets as $id => $widget): ?>
      <div id="<?php print $widget->id; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
    <?php if (!empty($widget->label)): ?>
      <label for="<?php print $widget->id; ?>">
        <?php print $widget->label; ?>
      </label>
    <?php endif; ?>
    <?php if (!empty($widget->operator)): ?>
      <div class="views-operator">
        <?php print $widget->operator; ?>
      </div>
    <?php endif; ?>
    <div class="views-widget">
      <?php print $widget->widget; ?>
    </div>
    <?php if (!empty($widget->description)): ?>
      <div class="description">
        <?php print $widget->description; ?>
      </div>
    <?php endif; ?>
  </div>
<?php endforeach; ?>
<?php if (!empty($sort_by)): ?>
  <div class="views-exposed-widget views-widget-sort-by">
    <?php print $sort_by; ?>
  </div>
  <div class="views-exposed-widget views-widget-sort-order">
    <?php print $sort_order; ?>
  </div>
<?php endif; ?>
<?php if (!empty($items_per_page)): ?>
  <div class="views-exposed-widget views-widget-per-page">
    <?php print $items_per_page; ?>
  </div>
<?php endif; ?>
<?php if (!empty($offset)): ?>
  <div class="views-exposed-widget views-widget-offset">
    <?php print $offset; ?>
  </div>
<?php endif; ?>
<div class="views-exposed-widget views-submit-button">
  <?php print $button; ?>
</div>
  <?php if (!empty($reset_button)): ?>
  <div class="views-exposed-widget views-reset-button">
    <?php print $reset_button; ?>
  </div>
  <?php endif; ?>
</div>
</div>

I've spent 2 days trying to debug, so any guidance would be greatly appreciated!!

Thank you for taking the time to read

  • Does it work OK with one of built-in themes and only repeat divs for your theme? – Mołot Aug 25 '14 at 20:51
  • Hi Molot, Thank you for the speedy help! I just tried this in the Bartik theme and YES, it does work okay in the built-in theme and the results are not displaying in nested divs. Hmm... – ForTheWin Aug 25 '14 at 21:52
1

UPDATE: I realized my issue -- In my Views template, I needed to place my divs outside of the :-p

Thank you, Molot, for leading me in the right direction! My original thought was that it was an AJAX issue, but after the issue disappeared when I used a pre-built theme, I looked more into the template.php and my template files (views-view--[view name].tpl.php). It works now with the following:

<div class="resources-container container-fluid">
<div class="container">
    <div class="view-content">
        <div class="row resources-Wrapper">
            <?php if ($rows): ?>
              <div class="view-content">
                <?php print $rows; ?>
              </div>
            <?php elseif ($empty): ?>
              <div class="view-empty">
                <?php print $empty; ?>
              </div>
            <?php endif; ?>
        </div>
    </div>           
</div>
</div>
  • Glad my pointer helped. I couldn't figure it out from your code (it was about midnight where I live), but maybe that's better? Now you know one debugging trick that often helps. – Mołot Aug 26 '14 at 6:36
  • Oh wow, I can't express how grateful I am for you taking the time to answer my question so late in the day! I was looking at all sorts of posts that was taking me further away from the issue. Thanks again for leading me in the right direction and for teaching me a debugging trick! – ForTheWin Aug 26 '14 at 13:27

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.