Вопрос по 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()"
/>
О, если изображение находится внутри формы, вам также необходимо указать идентификатор формы. В конечном итоге это должен быть идентификатор клиента изображения. Проверьте сгенерированный источник HTML.
Хорошо, спасибо, я также проверю эти параметры. Кстати, не могли бы вы дать мне простое объяснение идентификатора клиента, который меня несколько смущает. BRabbit27
Возможно, 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-выводу).

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