voyent
Ajax is not working for me! What am I doing wrong?  XML
Forum Index -> General Help Go to Page: 1, 2 Next 
Author Message
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


I have a dataTable with multi-columns. One of the columns carries commandButton.
On pressing the commandButton a storeData action is activated and in it, a list reserveIt is modified.
I want to use ajax to repaint the column that displays reserveIt list.

What am I missing? See below and I will appreciate your directing me.
<ice:dataTable rows="10" id="matchedTrucks" binding="#{avlbleTrucksBean.theDataTable}"
value="#{avlbleTrucksBean.matchedTruckList}" var="truck">
<!-- Truck Origin Country -->
<ice:column>
<f:facet name="header">
<ice:outputText value="Origin"></ice:outputText>
</f:facet>
<ice:outputText value="#{truck.originCountry}"
style="width: 90px">
</ice:outputText>
</ice:column>
.............


<ice:column>
<f:facet name="header">
<ice:outputText value="Reserve?"></ice:outputText>
</f:facet>
<ice:commandButton id="commandBtn" value="Reserve"
partialSubmit="false"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}">
<f:param name="currentId" value="#{truck.theIndex}"></f:param>
<f:ajax event="click" execute="@this" render="statusColumn"></f:ajax> // This is not working! What am I doing wrong?
</ice:commandButton>
</ice:column>
<ice:column id="statusColumn">
<f:facet name="header">
<ice:outputText value="Status"></ice:outputText>
</f:facet>
<ice:outputText id="truckStatus"
value="#{avlbleTrucksBean.reserveIt.get(truck.theIndex)}"
style="width: 95px">
</ice:outputText>
</ice:column>
</ice:dataTable>

What am I doing wrong in the <f:ajax above?
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Please check the logic with me and let me know where it is wrong:

1. I have a list of objects.
2. I use the list to give values to fields in columns of a dataTable.
3. I have a commandButton column that executes an action
4. The action causes changes in the list of objects
5. My desire is to re-paint values in one of the columns using Ajax

<ice:form id="form4">
<ice:panelGrid id="pg3">
<ace:dataTable id="matchedTrucks" rows="10" paginator="true"
paginatorPosition="bottom" value="#{avlbleTrucksBean.matchedTruckList}"
var="truck">
<!-- Truck Origin Country -->
<ace:column id="originCountry" headerText="Origin">
<h:outputText id="countryOfOrigin" value="#{truck.originCountry}"
style="width: 90px">
</h:outputText>
</ace:column>
..................

<ace:column id="reserve" headerText="Book?">
<ice:commandButton id="commandBtn" value="Book"
partialSubmit="false"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}"
actionListener="#{avlbleTrucksBean.pushTruckStatusChange}">
<f:param name="currentId" value="#{truck.theIndex}"></f:param>
<!-- Ajax -->
<ace:ajax event="click" execute="action actionListener @this" render="statusColumn truckStatus"></ace:ajax>
</ice:commandButton>
</ace:column>
<ace:column id="statusColumn" headerText="Status">
<h:inputText id="truckStatus" style="width: 65px"
value="#{truck.availability}">
</h:inputText>
</ace:column>
</ace:dataTable>
</ice:panelGrid>
</ice:form>
...........

@ManagedBean
@SessionScoped
@Named("avlbleTrucksBean")

public class AvlbleTrucksBean implements Serializable {
............

public List<MatchedTruck> getMatchedTruckList() {
// Set matchedTruckList
...........

return matchedTruckList;
}

public String storeData(int Id) {
// some object of matchedTruckList is changed here
// Get currentId of reserved truck
this.currentId = Id;

// Change value of String availability at currentId from "Available" to "Reserved"
someTruck = matchedTruckList.get(currentId);
someTruck.setAvailability("Reserved");

//Insert someTruck with new availability back into matchedTruckList
matchedTruckList.set(currentId, someTruck);
..............
return(null)
}
}

6. My question: when return(null) is executed does it invoke AvlbleTruckBean afresh. For my case, not good if it does!
7. I would like to understand more about Ajax does it render truckStatus without running AvlblelTruckBean afresh?
I presume only changes in matchedTruckList are noted in DOM
I'd appreciate your kind help as Ajax is not working for me when implemented as shown above!
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


Hi,
The <ice> tags aren't compatible with the JSF2 <f:ajax> tag. Try using a plain <h:commandButton> instead.

Philip

.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Thanks Philip,
I have switched to h:commandButton together with <ace:ajax as follows
<ace:column id="reserve" headerText="Book?">
<h:commandButton id="commandBtn" value="Book"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}"
actionListener="#{avlbleTrucksBean.pushTruckStatusChange}">
<f:param name="currentId" value="#{truck.theIndex}"></f:param>
<!-- Ajax -->
<ace:ajax event="click" execute="action actionListener @this" render="statusColumn truckStatus"></ace:ajax>
</h:commandButton>
</ace:column>
<ace:column id="statusColumn" headerText="Status">
<h:inputText id="truckStatus" style="width: 65px"
value="#{truck.availability}">
</h:inputText>
</ace:column>

But the problem still persists. Ajax does not execute! I'm totally baffled!

And another question: Are <ice:form and <ice:panelGrid compatible with <h:commandButton ?
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


The <ace:ajax> is for use with ace components. Try a standard <f:ajax> tag. Also, the terms used in the ajax attributes, have to be either keywords, starting with @, or component ids.

Thanks,
Philip

.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Philip, why are you wasting your time to tell me what is I have already done? Can't you see from my posting that @ is used for the keyword and that the other fields in my <ace:ajax tag are ids?

Thanks anyway. The trouble lies somewhere else and I'd be grateful for someone having a look at this.
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


So ...

execute="action actionListener @this"

what components do 'action' and 'actionListener' refer to??

.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Yes indeed, action and actionListener are not components! Thanks for pointing that out.

<ace:column id="reserve" headerText="Book?">
<h:commandButton id="commandBtn" value="Book"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}"
actionListener="#{avlbleTrucksBean.pushTruckStatusChange}">
<f:param name="currentId" value="#{truck.theIndex}"></f:param>
<!-- Ajax -->
<ace:ajax event="click" execute="@this" render="truckStatus"></ace:ajax>
</h:commandButton>
</ace:column>
<ace:column id="statusColumn" headerText="Status">
<h:inputText id="truckStatus" style="width: 65px"
value="#{truck.availability}">
</h:inputText>
</ace:column>
Still, ajax does not work! Will have to abandon this component!
Thank you all and bye for now.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Could someone please direct me to a working example or tutorial on <ace:ajax tag Does it work? I'm asking this because I have been directed from <ace:ajax to <f:ajax !!

judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


As Philip has recommended, the <ace:ajax> tags are for the <ace> components and the <f:ajax> tags are for the <h> components (standard jsf component library).

You can see the information about <ace:ajax> here:-
http://www.icesoft.org/wiki/display/ICE/Ajax

and for <f:ajax> here is some other information:-
http://docs.oracle.com/javaee/6/tutorial/doc/gkabr.html

there are examples also on the online showcase example here:-
http://icefaces-showcase.icesoft.org/showcase.jsf
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Thanks judy.guglielmin I have once again throughly gone through http://www.icesoft.org/wiki/display/ICE/Ajax

and tried out the following tags:
<h:form <h:panelGrid <ace:dataTable <ace:column
<h:commandButton id="commandBtn" value="Book"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}"
actionListener="#{avlbleTrucksBean.pushTruckStatusChange}">

<!-- Ajax -->
<ace:ajax event="click" execute="@this" render="truckStatus"></ace:ajax>
</h:commandButton>

The above does not work for both the above action="#{}" and <ace:ajax

But the following tags do work for action="#{}" but not for <ace:ajax
<ice:form <ice:panelGrid <ace:dataTable <ace:column <ice:commandButton

Moreover, action="${}" as inferred from recommended url does not work for me thus I've instead stuck with action=#{}"

Question: Am I on the right track mixing <ice: with <ace:
I'd appreciate your kind reply
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


You are using <ace:ajax> with an <h:commandButton> (I believe Phlip already pointed this out above?)

use
<ace:pushButton.......>
<ace:ajax /> <!-- while it's new use default values -->
</ace:pushButton>

OR
<h:comandButton.....>
<f:ajax/>
</h:commandButton>

Don't mix the ajax support with another library.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Kindly clarify don't mix <ajax support with another library
Does the statement mean I shouldn't mix <ice: with <ace: while using <ace:ajax ?

Well, I'm at the moment trying out <ace:pushButton while I've mixed <ice:form with <ace:ajax


ken.fyten

Joined: 26/Oct/2004 00:00:00
Messages: 1337
Offline


Hi,

Yes, there can be issues when using ICE comps with ace:ajax as not all of the ICE components can support JSF 2 partial-page-rendering due to the use of older direct-to-DOM renderers (mostly ICE containers).

I would try removing any ICE components from the hierarchy of components when using ace:ajax.

Regards,
Ken

Ken Fyten
VP Product Development
ICEsoft Technologies, Inc.
rrugemalira

Joined: 26/Jun/2008 00:00:00
Messages: 61
Offline


Thanks!
I'm now using:
<h:form <h:panelGrid <ace:dataTable <ace:column <ace:pushButton <ace:ajax
as yet to no avail!

It looks like the action="#{}" and actionListener="#{}" are not working when pushButton is pushed!

This is how that segment looks like:

<ace:pushButton id="pushBtn" value="Book"
action="#{avlbleTrucksBean.storeData(truck.theIndex)}"
actionListener="#{avlbleTrucksBean.pushTruckStatusChange}">
<!-- Ajax -->
<ace:ajax execute="@this pushBtn" render="@this truckStatus"></ace:ajax>
</ace:pushButton>
</ace:column>
<ace:column id="statusColumn" headerText="Status">
<h:outputText id="truckStatus" style="width: 65px"
value="#{truck.availability}">
</h:outputText>
</ace:column>

I'd appreciate any feedback as I look forward to using ace components in my project.

Moreover, I'm avoiding event="" in the ajax tag as there is scant info on that property! Believe me, I've searched and read and re-read throughly the available documentation! Whey!
 
Forum Index -> General Help Go to Page: 1, 2 Next 
Go to:   
Powered by JForum 2.1.7ice © JForum Team