overflow,
since yesterday I have for unknown reasons following problem:
i have a list of items, and when i delete one of them and let the page refresh by ajax, it stucks after the deletion-procedure and prints me following error:
Jul 28, 2013 3:54:42 PM org.apache.myfaces.context.servlet.ServletExternalContextImpl setResponseContentType
SEVERE: Cannot set content type. Response already committed
the deletion code is called by:
public void deleteEntry(AjaxBehaviorEvent event){...} //runs fine
and the ajax part is:
<h:commandButton value="delete" onclick="closeDialog(deleteDlg);">
<f:ajax event="click" execute="#form" render=":maintable" listener="#{updateEntryMetaDataBean.deleteEntry}"/>
</h:commandButton>
i don't really know why this error occurs, it seems like it only occurs on this specific page, on other pages with the same behaviour it runs fine.
my ajax-status hangs up and keeps running too:
<!-- AJAX-STATUS INFO -->
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
<f:facet name="start">
<p:graphicImage value="resources/images/loading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
what can I do there?
Related
I try to apply primefaces to my project. I created a test page to demo the ajax. The listener was called but the UI component was not updated with new value.
I am using Primefaces 4.
Here is my code (I do the same with the showcase here: http://www.primefaces.org/showcase/ui/ajax/poll.xhtml):
<h:form id="testForm">
<h:outputText id="txt_count" value="A: #{testBean.number}" />
<p:poll interval="30" listener="#{testBean.increment}" update="testForm:txt_count" />
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:panelGroup style="margin-top:5;" styleClass="statusBar">
<h:graphicImage value="/images/ajax-busy.gif" style="width:15;height:15;margin:0;padding:0;"/> Checking...
</h:panelGroup>
</f:facet>
<f:facet name="stop">
<h:panelGroup style="margin-top:5;" styleClass="statusBar">
<h:outputText value=" " style="width:15;height:15;"/>
</h:panelGroup>
</f:facet>
</p:ajaxStatus>
</h:form>
I debug on Firefox and get the response:
<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="testForm:txt_count"><![CDATA[<span id="testForm:txt_count">A: 1</span>]]></update><update id="javax.faces.ViewState"><![CDATA[rO0ABXVyABNbTGphdmEubc3Npb25... too long ...weHNxAH4CcAApQ==]]></update>
and this error:
XML Parsing Error: no element found Location:
moz-nullprincipal:{2b3608be-0d4d-4533-8ca1-52b28a98a16d} Line Number
1, Column 56128:
...AfgG1cQB+AbVxAH4BtXBweHhweHhxAH4BpQ==]]>
...-------------------------------------------------^
You can see that the response xml is missing closing tag for <partial-response> and <changes>
Could you please help me to find out the root cause?
==============================================================================
Above issue was resolved by removing richfaces from application
==============================================================================
UPDATED:
This works on Firefox but not works on IE.
Here is what I get: http://i.stack.imgur.com/qq6m8.png
The problem is when i use global status for ajax requests and ExtendedDataTable together strange bug happens - when i scroll down (i have large data loaded in the table) ajax request keep spaming in the console and the ajax status (picture loading) keep flashing.
there is my code:
<h:head></h:head>
<h:body>
<h:outputText value="TEsts with Extended Table" />
<h:form id="form">
<a4j:status id="waithStatus"
onstart="#{rich:component('waithStatusPanel')}.show();"
onstop="#{rich:component('waithStatusPanel')}.hide();">
<f:facet name="start">
<rich:popupPanel id="waithStatusPanel" autosized="true">
<h:graphicImage library="images" name="waith.gif" />
</rich:popupPanel>
</f:facet>
</a4j:status>
<h:panelGrid columns="2">
<rich:extendedDataTable value="#{testKrasi.tableList}" var="row" id="table"
selectionMode="none" clientRows="10" style="height:250px;width:400px"
iterationStatusVar="it">
<rich:column>
<f:facet name="header">#</f:facet>
#{it.index}
</rich:column>
<rich:column filter="#{testKrasi.vendorFilter}" filterType="custom">
<f:facet name="header">
vendor
</f:facet>
<h:outputText value="#{row[1]}"/>
</rich:column>
<rich:column filter="#{testKrasi.modelFilter}" filterType="custom">
<f:facet name="header">
model
</f:facet>
<h:outputText value="#{row[2]}"/>
</rich:column>
</rich:extendedDataTable>
</h:panelGrid>
</h:form>
</h:body>
</html>
and there is screenshot of the firebug console
the AJAX response is
<partial-response>
<changes>
<update id="javax.faces.ViewState">-2313795786913874202:5967295793801101249</update>
</changes>
</partial-response>
I don't know what to do... i try to fix this problem over a week now...
Please help me.
As you are using ajax lazy data loading for the table, these data load requests cause status to show.
You need either disable ajax data loading if you don't need that (refer to RichFaces Showcase to know how).
Or to disable status to show on the table updates. You can wrap the table into a4j:region to do this.
I'm new to jsf, and I'm writing my first application using richfaces. I'm having trouble with the ajax tag that I use to update the associated managed bean property on server for rich:calendar components. This is the code:
<rich:panel header="Computing Options">
<h4>Time Interval</h4>
<h:panelGrid columns="4" width="100%">
<h:outputText value="From" />
<rich:calendar id="intervalFrom" value="#{scenarioEditor.intervalFrom}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outFrom" />
</rich:calendar>
<h:outputText value="To" />
<rich:calendar id="intervalTo" value="#{scenarioEditor.intervalTo}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outTo" />
</rich:calendar>
<h:outputText id="outFrom" value="From: #{scenarioEditor.intervalFrom}" />
<h:outputText id="outTo" value="To: #{scenarioEditor.intervalTo}" />
</h:panelGrid>
<h4>Algorithms</h4>
<h:panelGrid columns="2">
<h:selectBooleanCheckbox value="#{scenarioEditor.visibilityClashes}" id="clash" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="Visibility Clashes Evaluator" for="clash" style="width:170px" />
<h:selectBooleanCheckbox value="#{scenarioEditor.xBandInterference}" id="xband" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="X-Band Interferences Evaluator" for="xband" style="width:170px"/>
</h:panelGrid>
</rich:panel>
checkboxes works fine, but the calendars do not. Why? I`ve tried both f:ajax and a4j:ajax without luck.
To better clarify, I want that right after the user has finished entering a value into the calendar, an ajax request is made that call the setter method for the associated property. And this, for the calendar does not happen while for the checkboxes, it does.
The ajax event is failing because of T in datePattern="yyy-MM-ddTHH:mm" is not a valid date formatting pattern. If you add a <rich:messages/> component to your field, you'll see that a conversion error is occurring on each ajax request. Remove the T and you'll be fine
I've stumbled upon a strage behavior of richfaces. Some background about my view structure:
It's mainly a <rich:extendedDataTable> where a click on a row displays info about it on a <a4j:outputPanel>
Also, each row has a context menu with items like "Create", "Edit", etc... that pops a <rich:popupPanel>
The component structure is this:
<h:panelGrid columns="2">
<h:column>
<rich:dataScroller for="testTable" maxPages="7"/>
<rich:extendedDataTable id="testTable" value="#{testController.items}" rendered="#{testController.items.rowCount != 0}"
selection="#{testController.selectedRow}" noDataLabel="No results to show" var="test" rows="20"
style="width: 790px" selectionMode="single">
<a4j:ajax execute="#form"
event="selectionchange"
listener="#{testController.selectionListener}"
render=":res"/>
{columns to display}
</rich:extendedDataTable>
</h:column>
<a4j:outputPanel id="res">
<rich:panel header="Selected Rows:" rendered="#{not empty testController.selectedRows}">
<rich:list type="unordered" value="#{testController.selectedRows}" var="t">
<h:outputText value="#{t.name}"/>
<br/>
<h:outputText value="#{t.details}" converter="#{testConverter}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
</h:panelGrid>
<rich:contextMenu target="testTable" mode="ajax" id="contextMenu">
<rich:menuItem label="Edit" render="popupEdit" oncomplete="#{rich:component('popupEdit')}.show();" mode="ajax"/>
</rich:contextMenu>
<rich:popupPanel id="popupEdit" modal="true" autosized="true" resizeable="false" moveable="false" domElementAttachment="form">
<rich:hotKey key="esc" onkeyup="#{rich:component('popupEdit')}.hide(); return false;"/>
<f:facet name="header">
<h:outputText value="Edit Test"/>
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popupEditar')}.hide(); return false;">
<h:graphicImage value="/resources/css/images/fechar_janela.png" width="20" height="20"/>
</h:outputLink>
</f:facet>
<h:panelGrid id="popupEditContent" columns="2">
... {display of info}
<a4j:commandButton value="Salvar" actionListener="#{testeController.update()}" render="tabelaTestes, contextMenu"/>
<h:panelGroup id="messagePanel" layout="block">
<rich:messages ajaxRendered="true" />
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
And now the strange behaviour (using NetBeans):
Deploy the app from NetBeans;
Open the URL of the deployed project on browser (Firefox) . The <a4j:ajax> inlined in the table doesn't work, I know this because the 'testController.selectionListener' is not called and the details are not displayed (it sets the attribute current in the backing bean). The contextMenu works but the popupPanel shows null or empty properties in all fields (the current attribute is not set);
Go back to the IDE, remove all the <rich:popupPanel> section and save the file;
Back in the browser, hit F5 and click a row. Now the <a4j:ajax> works and calls testController.selectionListener, showing the details in <a4j:outputPanel>. The context menu works but (obviously) the panel does not pop;
In the IDE, put back the <rich:popupPanel> section and save the file;
Now refresh the page again, and everything works, details are shown and the Edit pop up shows the right info of the selected row.
I have tried deploying it without the <rich:popupPanel> section and the selecionListener gets called. I think that the problem is deploying the page with both <a4j:ajax> and <rich:popupPanel> sections, hence the "conflict".
I took the structure from the richfaces showcase and made changes. I noticed that in the showcase, the <rich:popupPanel> is placed outside the <h:form> tag, wich in my project is placed in the template.xhtml (so a topmenu page works). Is it possible that the error is caused by this placement?
Could this be considered a bug to file in the richfaces project or am I missing something there?
Is there a workaround or solution?
Thank you very much!
I think I have solved it. I set the id attribute to "form" in the <h:form> tag, in template.xhtml, so now it looks like this:
<h:body>
<h:form id="form">
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:form>
</h:body>
It was the only change I made and now all the components work at first post-deploy.
Edit: Found the solution when searching for another problem: JSF action call on secon click
I tried to alternate pages using ui:include on click of ajax (PrimeFaces) treenodes. The first page that load by default loads properly with all the components active but when I click on the other treenode to display another page, the latter page loads abnormally like having the dialog box visible below and the page hands.
I feel if I can force the page to reload partially as default on nodeSelect
index.jsf (gets loaded on login)
<p:layoutUnit position="west" size="270" header="Menu" collapsible="false" resizable="true">
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:graphicImage value="../design/ajaxloading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputText value=""/>
</f:facet>
</p:ajaxStatus>
<h:form id="appsMainControl">
<ui:include src="/ui/appServices.jsf"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="centerControl">
<ui:include src="/ui/#{amb.appToGet}.jsf"/>
</h:form>
</p:layoutUnit>
The treeview component with the listener action. On node selection I want the child page to load appropriately
<p:layoutUnit position="west" size="270" header="Menu" collapsible="false" resizable="true">
<p:ajaxStatus style="width:16px;height:16px;">
<f:facet name="start">
<h:graphicImage value="../design/ajaxloading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputText value=""/>
</f:facet>
</p:ajaxStatus>
<h:form id="appsMainControl">
<ui:include src="/ui/appServices.jsf"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="centerControl">
<ui:include src="/ui/#{amb.appToGet}.jsf"/>
</h:form>
</p:layoutUnit>
The backing bean:
public void onNodeSelect(NodeSelectEvent event) throws Exception {
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
try {
appToGet = appsMainDAO.appToGet(event.getTreeNode().toString());
// ec.redirect("index.jsf");
// System.out.println("Got "+appToGet);
// appSubList = appsMainDAO.appsSubServicesList(appToGet, "Forms");
} catch (Exception ex) {
ex.printStackTrace();
Logger.getLogger(appsMainBean.class.getName()).log(Level.SEVERE, null, ex);
} finally {
}
}
Don't do that. You are rubbing JSF the wrong way and thus heading into a major catastrophe.
It's impossible to explain the whole life cycle here, but - until you really know your way around JSF - just assume that facelet pages are _not_supposed_ to work like HTML pages.
Instead, they should work like window applications, where you have a certain number of widgets that don't really appear or disappear - they can be put in tabs, they can become disabled, but they stay where they were from the beginning.
If there is a finite number of things to include, the easiest option is to include them all and add some rendered="#{gui.current=='component1'}", so only one of the components is visible.