Ajaxinate
Ajaxinate copied to clipboard
Fails in Customizer
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!