DOM 在 xhtml 文档中找不到该元素

Question

我正在使用 Primefaces 和 jQuery 在对话框中创建平滑滚动。我的想法是：每次单击“Commentar”按钮时，我的代码都需要在对话框最后的文本区域滚动屏幕。

但是我有一个问题：当我点击按钮时，我的代码没有找到他需要滚动的elementId，所以它不能平滑滚动。

我测试了我的代码，参数'elementId'未定义，我不知道如何解决这个问题。

我的代码是：

jQuery：

function dialogScroll(dialogId, elementId) {
    console.log("dialogId: " + dialogId)
    console.log("elementId: " + elementId)

    let dlg = $(dialogId);
    let elm = $(elementId);

    if (elm.length) {
        console.log("entrou")
        dlg.find('.ui-dialog-content')
            .first()
            .animate({
                scrollTop: elm.offset().top
            }, 'smooth');
    } else {
        alert($(elementId).offset());
    }
}

xhtml:

<p:dialog header="Visualizar anúncio" class="modalAnuncio" id="modalAnuncio" widgetVar="dlgVisualizarAnuncio" modal="true" draggable="true" responsive="true" resizable="false" closeOnEscape="true" closable="true" height="600px" width="634px">
  <h:form id="dialogForm">
    [...]
    <h:panelGroup id="visualizarAvaliacoes">
      [...]
      <h:panelGroup id="container-botao-cadastrar-avaliacao" rendered="#{marketplaceMB.avaliacao eq null}">
        <span class="container-botao-cadastrar-avaliacao">
        <p:commandLink class="botao-cadastrar-avaliacao" id="botao-cadastrar-avaliacao"
                       actionListener="#{marketplaceMB.novaAvaliacao}"
                       process="@this" update="@form:visualizarAvaliacoes"
                       oncomplete="carregarMascaras(); dialogScroll('modalAnuncio', 'dialogForm:panelDialog')"
        >
            <i class="btn-text-cadastro-avaliacao">Comentar</i>
        </p:commandLink>
    </span>
      </h:panelGroup>

      <h:panelGroup id="pnlCadastrarAvaliacao" rendered="#{marketplaceMB.avaliacao ne null}">
        <p:outputPanel id="panelDialog">
          <div class="container-cadastro-avaliacao" id="container-cadastro-avaliacao">
            <div class="container-campo-comentario-cadastro-avaliacao">
              <h:inputTextarea class="textAreaComentarioMarketplace" id="comentario" rows="5" cols="60" maxlength="1000" value="#{marketplaceMB.avaliacao.comentario}" />
              <p:watermark for="comentario" value=" Comentar" />
              <components:fieldMessage fieldId="comentario" />
            </div>

            <div class="container-funcionalidades-cadastrar-avaliacao">
              <div class="botoes-funcionalidades-cadastrar-avaliacao">
                <p:commandLink styleClass="btn botao botao-neutro" process="@this" actionListener="#{marketplaceMB.cancelar}" update="@form:visualizarAvaliacoes @form:pnlAvaliacoes">
                  <i class="material-icons">cancel</i><i class="btn-text">Cancelar</i>
                </p:commandLink>

                <p:commandLink styleClass="btn botao botao-principal" process="@form:visualizarAvaliacoes" actionListener="#{marketplaceMB.salvarAvaliacao}" update="@form:visualizarAvaliacoes @form:pnlAvaliacoes">
                  <i class="material-icons">reviews</i><i class="btn-text">Avaliar</i>
                </p:commandLink>
              </div>
            </div>
          </div>
        </p:outputPanel>
        [...]
  </h:form>

</p:dialog>

我的托管 bean 通过这两种方法：

public void limpar() {
        anuncio = null;
        avaliacao = null;
    }

public void novaAvaliacao() {
        limpar();

        avaliacao = new Avaliacao();
    }

我相信问题是因为当我调用函数“dialogScroll”时我的 panelGroup 没有呈现，但我没有找到一种方法来在文档完全加载时加载我的函数。

Answer 1

如果第 3 行中的 console.log 返回空的 elementID，据我所知，我会从

'dialogForm:'

因为我相信它应该已经集中在dialogForm上。 我 90% 确定您正在传递不存在的元素 ID。我无法真正重现这个特定场景，所以对此回复持保留态度