Плагин PrimeFaces JumpToPageDropdown Ошибка

Question

Я мигрирую с PrimeFaces 6.2 на 8.0. В моем проекте я использую несколько Primeface DataTables с Paginator .

MCVE:

Создайте список данных с более чем 10 элементами. Затем кликните по разным номерам страниц. Если щелкнуть или выбрать любой номер страницы больше 10 в JumpToPageDropdown, консоль зарегистрирует следующую ошибку:

Ошибка в консоли Chrome:

jquery.js.xhtml?ln=primefaces&v=8.0:2 Uncaught Error: Syntax error, unrecognized expression: option[value=\31 0]
    at Function.se.error (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at se.tokenize (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at se.compile (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at se.select (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at se (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at Function.se.matches (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at Function.k.filter (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at k.fn.init.k.fn.<computed> [as children] (jquery.js.xhtml?ln=primefaces&v=8.0:2)
    at c.updateUI (components.js.xhtml?ln=primefaces&v=8.0:58)
    at c.updateTotalRecords (components.js.xhtml?ln=primefaces&v=8.0:58)

Используемый компонент:

<p:dataTable id="datatable"value="#{backendController.dataList}"
    var="data" paginator="true" rows="1" paginatorPosition="top"
    pageLinks="20"
    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {JumpToPageDropdown} {NextPageLink} {LastPageLink}">

    -> Add a few <p:column> tags.        

</p:dataTable>

Временное исправление:

Мне удалось определить, что JumpToPageDropdown вызывает ошибку. Когда это удалено из шаблона paginatorTemplate, ошибка больше не будет отображаться при нажатии на страницы больше 10. К сожалению, я хочу использовать это раскрывающееся меню.

Дальнейшие исследования:

PrimeFaces использует эти JS файлы для своих компонентов и, следовательно, также для JumpToPageDropdown:

• PrimeFaces 6.2: компоненты. js .x html? Ln = primefaces & v = 6.2 PrimeFaces
• PrimeFaces 8.0: компоненты. js .x html? Ln = primefaces & v = 8.0

Это соответствующие вызовы для обновления

Both versions:
this.jtpSelect = this.jq.children(".ui-paginator-jtp-select");

PrimeFaces 8.0:
this.jtpSelect.children("option[value=" + $.escapeSelector(this.cfg.page) + "]").prop("selected", "selected")

PrimeFaces 6.2:
this.jtpSelect.children("option[value=" + (this.cfg.page) + "]").prop("selected", "selected")

Разница в версии 8.0 значение this.cfg.page передается в функцию $.escapeSelector().

this.cfg.page использует нумерацию с нуля. Страница 1 - это 0, страница 10 - это 9 и так далее. В версии 6.2 this.jtpSelect.children() вызывается с опцией [value = 10], когда выбранная страница равна 11. Но в версии 8.0 $.escapeSelector() форматирует тот же ввод в \31 0 и приводит к option[value=\31 0].

Это приводит к ошибке, упомянутой выше. Смотрите эту строку: Uncaught Error: Syntax error, unrecognized expression: option[value=\31 0]

Рекомендация:

Если это ошибка, $.escapeSelector() следует удалить из этой функции в PrimeFaces 8.0, очевидно, в этом нет необходимости. для экранирования: экранировать номера не нужно.

Answer 1

Решение :

После глубокого изучения кода я нашел хак для исправления ошибки:

window.PrimeFaces.widget.Paginator.prototype.updateUI = function(){
    if (this.cfg.page === 0) {
        this.disableElement(this.firstLink);
        this.disableElement(this.prevLink)
    } else {
        this.enableElement(this.firstLink);
        this.enableElement(this.prevLink)
    }
    if (this.cfg.page === (this.cfg.pageCount - 1)) {
        this.disableElement(this.nextLink);
        this.disableElement(this.endLink)
    } else {
        this.enableElement(this.nextLink);
        this.enableElement(this.endLink)
    }
    var a = (this.cfg.rowCount === 0) ? 0 : (this.cfg.page * this.cfg.rows) + 1
      , c = (this.cfg.page * this.cfg.rows) + this.cfg.rows;
    if (c > this.cfg.rowCount) {
        c = this.cfg.rowCount
    }
    var e = this.cfg.currentPageTemplate.replace("{currentPage}", this.cfg.page + 1).replace("{totalPages}", this.cfg.pageCount).replace("{totalRecords}", this.cfg.rowCount).replace("{startRecord}", a).replace("{endRecord}", c);
    this.currentReport.text(e);
    if (this.cfg.prevRows !== this.cfg.rows) {
        this.rppSelect.filter(":not(.ui-state-focus)").children("option").filter('option[value="' + $.escapeSelector(this.cfg.rows) + '"]').prop("selected", true);
        this.cfg.prevRows = this.cfg.rows
    }
    if (this.jtpSelect.length > 0) {
        if (this.jtpSelect[0].options.length != this.cfg.pageCount) {
            var d = "";
            for (var b = 0; b < this.cfg.pageCount; b++) {
                d += '<option value="' + b + '">' + (b + 1) + "</option>"
            }
            this.jtpSelect.html(d)
        }
        this.jtpSelect.children("option[value=" + (this.cfg.page) + "]").prop("selected", "selected")
    }
    if (this.jtpInput.length > 0) {
        this.jtpInput.val(this.cfg.page + 1)
    }
    this.updatePageLinks()
}

Объяснение:

Функция updateUI виджета Paginator вызывает ошибку. Он может быть доступен по window.PrimeFaces.widget.Paginator.prototype.updateUI и затем перезаписан исправленной версией.

Измененная строка в хаке:

this.jtpSelect.children("option[value=" + (this.cfg.page) + "]").prop("selected", "selected")

Исходная строка в PrimeFaces 8.0:

this.jtpSelect.children("option[value=" + $.escapeSelector(this.cfg.page) + "]").prop("selected", "selected").