Exposed Filter Results Displaying in Nested DIVs (using view-dom-id-<?php print $dom_id; ?>)

Question

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

Answer 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>