этот пример является своего рода крайним, и я пытаюсь сделать не совсем это, но проще продемонстрировать мою проблему с этим
У меня есть страница с простым index.xhtml:
<html
xmlns:h="http://java.sun.com/jsf/html"
xmlns:mc="http://java.sun.com/jsf/composite/mc">
...
<h:panelGroup id="u1" styleClass="unique_container">
<mc:component1></mc:component1>
</h:panelGroup>
<h:panelGroup id="u2" styleClass="unique_container">
<mc:component2></mc:component2>
</h:panelGroup>
<h:panelGroup id="u3" styleClass="unique_container">
<mc:component3></mc:component3>
</h:panelGroup>
<form action="/faces/async.xhtml">
<input type="checkbox" name="renderu1" />
<input type="checkbox" name="renderu2" />
<input type="checkbox" name="renderu1" />
<input type="submit" value="render" />
</form>
...
</html>
когда я нажимаю на кнопку «GO», я хочу отрендерить component1, если выбран renderu1, component2, если renderu2 отмечен, и component3, если renderu3 отмечен
мое текущее решение для этого - функция js с использованием плагина форм jQuery:
$(document).ready(function(){
registerForms($(document));
});
function registerForms(rootElement)
{
rootElement.find("form").submit(function() {
// submit the form
$(this).ajaxSubmit(function(data, textStatus) {
if(textStatus == "notmodified")
return;
var tempDiv = $('<div></div>');
tempDiv.css("display", "none");
tempDiv.html(data);
var newUniqueContainer;
while((newUniqueContainer = tempDiv.find(".unique_container:first")).html() != null)
{
var oldUniqueContainer = $("#" + newUniqueContainer.attr("id") + ":first");
oldUniqueContainer.empty();
oldUniqueContainer.html(newUniqueContainer.html());
registerForms(oldUniqueContainer);
newUniqueContainer.remove();
}
tempDiv.remove();
});
// return false to prevent normal browser submit and page navigation
return false;
});
}
Когда я отправляю форму, он запускает ajax-запрос к указанному URL-адресу, ожидает ответа, а если имеется содержимое (код состояния не 304, поэтому он не «не изменен»), он получает данные и заменяет содержимое в исходных "unique_containers" на новые данные
async.xhtml:
<html xmlns:mc="http://java.sun.com/jsf/composite/mc"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<c:if test="#{asyncBean.render1}">
<h:panelGroup id="u1" styleClass="unique_container">
<mc:component1></mc:component1>
</h:panelGroup>
</c:if>
<c:if test="#{asyncBean.render2}">
<h:panelGroup id="u2" styleClass="unique_container">
<mc:component2></mc:component2>
</h:panelGroup>
</c:if>
<c:if test="#{asyncBean.render3}">
<h:panelGroup id="u3" styleClass="unique_container">
<mc:component3></mc:component3>
</h:panelGroup>
</c:if>
</html>
AsyncBean.java:
@ManagedBean(name="asyncBean")
@RequestScoped
public class AsyncBean {
@ManagedProperty(value="#{param.renderu1}")
private boolean render1;
@ManagedProperty(value="#{param.renderu2}")
private boolean render2;
@ManagedProperty(value="#{param.renderu3}")
private boolean render3;
private boolean isRender1() {
return render1;
}
private void setRender1(boolean render1) {
this.render1 = render1;
}
private boolean isRender2() {
return render2;
}
private void setRender2(boolean render2) {
this.render2 = render2;
}
private boolean isRender3() {
return render3;
}
private void setRender3(boolean render3) {
this.render3 = render3;
}
}
так, например, если установлен только 3-й флажок, ответ будет примерно таким:
<html>
<span id="u3" class="unique_container">
content of component3
</span>
</html>
он работает нормально, и все просто, но потом я начал использовать RichFaces для одного из моих компонентов - проблема в том, что он использует функцию jQuery $ (document) .ready (fn), и когда я перезагружаю деталь с RichFaces он ломается (это компонент дерева, и я не могу открыть узлы)
Я искал рабочее решение, которое может делать то же, что и мое, но лучше подготовлено к проблемам совместимости (технически я хочу решить, какую часть обновлять, основываясь на параметрах, поэтому при визуализации исходной страницы я пока не знаю, что написать в атрибуты execute или render)