Elkfox / Ajaxinate

🎡 Ajax pagination plugin for Shopify themes

Home Page:https://ajaxinate.elkfox.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fails in Customizer

tairli opened this issue · comments

Hi there, the library works great in store, but fails in Customizer.
Looks like Customizer somehow forces the request to become synchronous and the code throws exception:

Uncaught DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document.

Looks like it can be fixed by not setting the this.request.responseType = 'document'; and then use
like DomParser on the response string?

Setting the response type might be unnecessary anyway. I think it can safely be removed.

Had the same problem. Here's what I changed the loadMore method to:

Ajaxinate.prototype.loadMore = function getTheHtmlOfTheNextPageWithAnAjaxRequest() {
  this.request = new XMLHttpRequest();
  this.request.onreadystatechange = function success() {
    if (this.request.readyState === 4 && this.request.status === 200) {
      var parser = new DOMParser();
      var htmlDoc = parser.parseFromString(this.request.responseText, "text/html");
      var newContainer = htmlDoc.querySelectorAll(this.settings.container)[0];
      var newPagination = htmlDoc.querySelectorAll(this.settings.pagination)[0];
      this.containerElement.insertAdjacentHTML('beforeend', newContainer.innerHTML);
      this.paginationElement.innerHTML = newPagination.innerHTML;
      if (this.settings.callback && typeof this.settings.callback === 'function') {
        this.settings.callback(this.request.responseXML);
      }
      this.initialize();
    }
  }.bind(this);
  this.request.open('GET', this.nextPageUrl, false);
  this.request.send();
};

Thank you @onedanshow I found that the problem is if you have another script using the XMLHttpRequest and breaks it, then Ajaxinate can't run anymore.

Your solution worked!