'TypeError: jQuery не определен' после частичного обновления - OctoberCMS - PullRequest
Новая
       11

'TypeError: jQuery не определен' после частичного обновления - OctoberCMS

0 голосов
/ 18 декабря 2018

У меня есть компонент OctoberCMS, который имеет обработчик AJAX для onSelectTag, но когда элемент HTML #posts обновляется (отображается) с частичным blogPosts/postList, выдается следующая ошибка:

TypeError: jQuery не определен

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 Framework или что-то в этом роде.Это странно, потому что функции jQuery по-прежнему работают так: 

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

Это все еще работает, но функции, определенные платформой OctoberCMS AJAX, такие как $.request(...), не работают.Я не уверен, почему это происходит.

1 Ответ

0 голосов
/ 20 декабря 2018

Я прочитал ваш вопрос еще раз и заметил, что вы, похоже, включаете библиотеку jquery, но не показывает код компоновки.

Я также столкнулся с этой проблемой.Многоуровневый Ajax не работает и не позволяет контенту использовать весь домен.Это может иметь какое-то отношение к жизненным циклам частичек.

Оставить это для тех, кто вначале был таким дураком, как я.

{{ framework extras }} на самом деле не загружаетсябиблиотека jquery.Вот код шаблона по умолчанию для Octobercms. Ссылка здесь в документах. 

        <!-- 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 %} - это способ обработки вставленных сценариев. Ссылка здесь в документах.

...