Вопрос по jsf, richfaces, loading-image – Отключить кнопку и показать загрузку изображения при обработке JSF

0

У меня есть этот модуль в моем веб-приложении, где мне нужно обновить каталоги.

Идея состоит в том, чтобыdisable h:commandButton а такжеshow h:graphicImageоба действия должны произойти сразу после нажатия кнопки. Наконец, когда процесс обновления завершится, он должен сделать по-другому,hide h:graphicImage, enable h:commandButton но на этот раз также показать ярлыкh:outputText что говорит либо «Обновление успешно»; или «Ошибка обновления».

Проблема в моем коде состоит в том, что изображение и метка появляются сразу после завершения процесса, и я не могу найти способ сделать то, что я описал выше.

Где или что мне не хватает ?,

Приветствия.

    <a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
                       render="messageCatalogos actualizacionCorrecta
                       @this imgProcesando"
                       onclick="this.disabled=true;"
                       oncomplete="this.disabled=false"
                       actionListener="#{administrationBean.doImgProcesandoVisible}"
                       action="#{administrationBean.doActualizaCatalogos}"/>
    <a4j:outputPanel id="imgProcesando">
        <h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
                        url="img/imgLoading.gif"/>
    </a4j:outputPanel>
    <h:panelGroup/>
    <h:panelGroup/>
    <a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
        <h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
                      value="Actualización correcta !"/>
        <h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
                      value="Fallo la actualización !"/>
    </a4j:outputPanel>

UPDATE

Моя среда разработки:

Mojarra 2.1.6 RichFaces 4.1.0.Final Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)

Ваш Ответ

1   ответ
3

<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />

с

<a4j:commandButton ...
    onbegin="this.disabled=true; $('#formId\\:loading').show()"
    oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>
Хорошо, спасибо, я также проверю эти параметры. Кстати, не могли бы вы дать мне простое объяснение идентификатора клиента, который меня несколько смущает. BRabbit27
О, если изображение находится внутри формы, вам также необходимо указать идентификатор формы. В конечном итоге это должен быть идентификатор клиента изображения. Проверьте сгенерированный источник HTML.
Возможно, RichFaces запускает jQuery в режиме noconflict. использованиеjQuery('#loading') вместо$('#loading'), В противном случае вы всегда можете использовать доброdocument.getElementById('loading') и установить.style.display='block' а также.style.display='none' соответственно.
Спасибо за Ваш ответ. Я пробовал, но код$('#loading').show() не заставляет изображение появляться. Есть ли другой способ сделать это? может быть что-то вроде getDocumentById, я не знаю о JS, но я видел, что это способ получить ссылку на компонент ... BRabbit27
Идентификатор клиента - это сгенерированный JSF идентификатор элемента HTML. Откройте страницу JSF в браузере, щелкните правой кнопкой мыши иView Source, Найдите сгенерированный JSF HTML<img> элемент и посмотреть на егоid. That это идентификатор клиента<h:graphicImage> составная часть. Это может выглядеть какformId:imageId когда вложено внутри<h:form>, Вам нужно использовать именно этот идентификатор в JavaScript / jQuery (просто потому, что они не имеют доступа к исходному коду JSF, а только к сгенерированному HTML-выводу).

Похожие вопросы