'TypeError: jQuery is undefined' after Partial Update - OctoberCMS

Question

我有一个 OctoberCMS 组件，它有一个 onSelectTag 的 AJAX 处理程序，但是当 #posts HTML 元素更新（呈现）为 blogPosts/postList部分，抛出如下错误：

TypeError: jQuery is undefined

tagList.htm:

{% for tag in tags %}
<button type="button" class="list-group-item" data-request="onSelectTag" data-request-data="tagId: {{ tag.id }}">{{ tag.name }}</button>
{% endfor %}

onSelectTag() AJAX 处理程序：

public function onSelectTag()
{
    $this->page['posts'] = Post::all();

    // below is where the partial updates / renders
    return [
        '#posts' => $this->renderPartial('blogPosts/postList.htm')
    ];
}

blogPosts/postList.htm:

[viewBag]
==
{% if posts is empty %}
{% set posts = __SELF__.posts %}
{% endif %}
{% if not hideFeatured is defined %}
  {% set hideFeatured = __SELF__.property('hideFeatured') %}
{% endif %}
{% set pageSlug = post.slug %}
{% if not hideFeatured %}
<div class="row" id="highlight">
  <div class="col-lg-8">
    <div class="card" id="featured">
      <a href="{{ posts.first.url }}">
        {% if posts.first.featured_images.count %}
          <img src="{{ posts.first.featured_images[0].path }}" alt="{{ posts.first.title }}" class="card-img-top">
        {% endif %}
        {% if posts.first.categories.count %}
            <p class="card-header">
            {% for category in posts.first.categories %}
                <a href="{{ category.url }}" class="badge badge-secondary">{{ category.name }}</a>
            {% endfor %}
            </p>
        {% endif %}
        <div class="card-body bg-success text-white">
            <h5 class="card-title"><a href="{{ posts.first.url }}" class="text-white">{{ posts.first.title | upper }}</a> <small class="float-right">{{ posts.first.published_at|date('F d, Y') }}</small></h5>
            <hr class="tagline"/>
            <p class="card-text">{{ posts.first.summary|striptags|length > 150 ? posts.first.summary|striptags|slice(0, 150) ~ '...' : posts.first.summary|striptags}}</p>
        </div>
        <div class="card-footer text-muted">
          <span><i class="fas fa-tags" aria-hidden="true"></i> Tags: </span>
          {% if posts.first.tags.count %}
              {% for tag in posts.first.tags %}
                  <span class="badge badge-primary">{{ tag.name }}</span>
              {% endfor %}
          {% else %}
              <span class="badge badge-danger">No Tags</span>
          {% endif %}
        </div>
      </a>
    </div>
  </div>
    <div class="col-lg-4">
        <div class="embed-responsive embed-responsive-16by9">
            {% partial 'youtube' %}
        </div>
        <br />
        <div class="card">
            <h4 class="card-header">SUBSCRIBE TO OUR NEWSLETTER</h4>
            <div class="card-body">
                {% partial 'mail-chimp' %}
            </div>
        </div>
    </div>
</div>
{% endif %}
<br />
<div class="card-columns">
{% for post in posts %}
    {% if loop.first and not hideFeatured %}
    <!-- First Post is Featured -->
    {% elseif post.slug != pageSlug %}
    <a href="{{ url('/blog/post/' ~ post.slug) }}">
        <div class="card">
            {% if post.featured_images.count %}
            <img src="{{ post.featured_images[0].path }}" class="card-img-top" alt="{{ post.title }}">
            {% endif %}
            <div class="card-body">
                <h4 class="card-title text-center"><a href="{{ post.url }}">{{ post.title | upper }}</a></h4>
                <p class="card-subtitle text-muted text-center">{{ post.published_at|date('F d, Y') }}</p>
                {% if post.categories.count %}
                    {% for category in post.categories %}
                    <a href="{{ url('/blog/category/' ~ category.slug) }}" class="badge badge-success">{{ category.name }}</a>
                    {% endfor %}
                {% endif %}
                <hr class="tagline" />
                <div class="card-text">{{ post.summary|striptags|length > 50 ? post.summary|striptags|slice(0, 50) ~ '...' : post.summary|striptags}}</div>
            </div>
            <div class="card-footer text-muted">
                <span><i class="fas fa-tags" aria-hidden="true"></i> Tags: </span>
                {% if post.tags.count %}
                    {% for tag in post.tags %}
                    <span class="badge badge-primary">{{ tag.name }}</span>
                    {% endfor %}
                {% else %}
                <span class="badge badge-danger">No Tags</span>
                {% endif %}
            </div>
        </div>
    </a>
    {% endif %}
{% else %}
<h3 class="no-data">{{ noPostsMessage }}</h3>
{% endfor %}
</div>

<div class="row">
{% if posts.lastPage > 1 %}
    <ul class="pagination">
        {% if posts.currentPage > 1 %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">&larr; Prev</a></li>
        {% endif %}

        {% for page in 1..posts.lastPage %}
            <li class="{{ posts.currentPage == page ? 'active' : null }}">
                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
            </li>
        {% endfor %}

        {% if posts.lastPage > posts.currentPage %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">Next &rarr;</a></li>
        {% endif %}
    </ul>
{% endif %}
</div>

<!-- Modal -->
<div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="subscribeModalTitle">SUBSCRIBE TO OUR NEWSLETTER</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% partial 'mail-chimp' %}
      </div>
    </div>
  </div>
</div>

<div class="accordion subscribe-footer" id="accordionExample">
    <div class="card">
        <div class="card-header text-center" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    SUBSCRIBE TO OUR NEWSLETTER <i class="fas fa-chevron-up subscribe-chevron" aria-hidden="true"></i>
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            {% partial 'mail-chimp' %}
          </div>
        </div>
    </div>
</div>
<div class="accordion subscribe-footer-mobile" id="accordionExample">
    <div class="card">
        <div class="card-header text-center" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    SUBSCRIBE <i class="fas fa-chevron-up subscribe-chevron" aria-hidden="true"></i>
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            {% partial 'mail-chimp' %}
          </div>
        </div>
    </div>
</div>

我不认为引用或加载顺序是问题，因为我尝试将 jQuery 引用和 {% framework extras %} 引用以及 {% scripts %} 引用移动到许多不同的地方页面的某些部分，但没有任何改变。

我的理论：

我认为当部分更新时，它搞乱了 jQuery 框架调用或其他东西。这很奇怪，因为 jQuery 函数仍然像这样工作：

$('#tagFilter').on('input', function() {
    console.log("TEST");
});

这仍然有效，但是由 OctoberCMS AJAX 框架定义的函数，如 $.request(...) 不起作用。我不确定为什么会这样。

Answer 1

我再次阅读了你的问题，发现你似乎包含了 jquery 库，但没有显示布局代码。

我也运行遇到过这个问题。多深度 ajax 不起作用，并且会破坏使用整个 dom 的内容。可能跟partials的生命周期有关系。

留给一开始像我一样傻的人。

{{ framework extras }} 实际上并没有加载 jquery 库。这是 Octobercms 的默认模板代码。 Referenced here in the docs.

        <!-- Scripts -->
        <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
        <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
        <script src="{{ 'assets/javascript/app.js'|theme }}"></script>
        {% framework extras %}
        {% scripts %}

我在我的布局头部调用 <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>，它连接到一些 jquery 的最小化和压缩版本。

此外，{% scripts %} 是您希望如何处理插入的脚本。 Referenced here in the docs.

'TypeError: jQuery is undefined' after Partial Update - OctoberCMS