Rasha wrote:
> Hello Dan,
> Thank you for your reply!!!
> You are right, if I give the refresh a list ids, the corresponding elements
> will be submitted...
>
> However here is what I am trying to achieve,
> I have a textField (form1:txtID) and I want to update the remaining fields
> asynchronously after submitting this field.
>
> If I use the resfresh functionality as you described I would do the
> following:
>
> var node2 = document.getElementById("form1:textField2");
> node2.refresh('form1:txtID');
>
> This would cause node2 to be updated asynchronously after txtID has been
> submitted.
>
> But what if I have more than one such textField that needs to be updated
> AFTER txtID has been submitted.
>
In the same TLD, you'll find the following section. If you subscribe to
the "refresh" event, you will be notified when the asynchronous request
completes. You will also be provided with a JSON object containing the
id of the updated component and any JSF error messages. You can use this
notification to kick off another refresh or update other widgets in the
page.
Client Side JavaScript Events
|When the component is manipulated client side, some functions may
publish event topics for custom AJAX implementations to listen for.
Using the Dojo event system, listen for the refresh event topic using:|
||
|<webuijsf:script>|
| var processEvents = { |
| update: function(props) {|
| // Do something...|
| }|
| }|
||
| // Subscribe to refresh event.|
|
dojo.subscribe(webui.suntheme.widget.textField.event.<eventname>.endTopic,
processEvents, "update");|
||
|</webuijsf:script>|||
||
| |If you want to see this approach in action, see the live Woodstock
example below. This example subscribes to a similar validation event.
After validation has occurred, the developer is notified, then alert and
label widgets are updated using client-side APIs.
http://webdev2.sun.com/example/faces/field/Payment.jsp
Alternatively, You can use the ajaxZone tag from JSF Extensions to
redraw more than one component at once.
Dan
|
|
> I have tried the following:
>
> var node2 = document.getElementById("form1:textField2");
> node2.refresh('form1:txtID, form1:textField3, form1:txtField4');
> But obviously this does not work, simply because the values of these
> elements are being submitted and not refreshed.
>
> Also the following does not work:
> var node2 = document.getElementById("form1:textField2");
> node2.refresh('form1:txtID');
> document.getElementById("form1:textField3").refresh();
> document.getElementById("form1:textField4").refresh();
> Because the last two statements do not wait for the ajax response to come
> back.
>
>
> Could you suggest any possible work around that would allow me to refresh
> multiple elements after submitting one element?
>
> Thanks again,
> -Rasha
>
>
>
>
>
>
> Dan Labrecque wrote:
>
>> The widgets are only updated when the asynchronous call returns. In
>> fact, it only does so because the response generates an event to listen
>> for. If and only if the widget receives an event will it be updated.
>>
>> The reason you not seeing an update is because you have not provided a
>> param to the refresh function. (When no parameter is given, the refresh
>> function acts as a reset. That is, the component will be redrawn only
>> using values available server-side.) However, if you provide a comma
>> separated list of ids, you can perform both submit and refresh using a
>> single statement.
>>
>> Take a look at the examples provided in the Tag Library Documentation
>> below.
>>
>> http://webdev2.sun.com/woodstock-tlddocs
>>
>> In the textField TLD, you will find the following example:
>>
>>
>> Example 7: Asynchronously update textField using refresh function
>>
>> This example shows how to asynchronously update a text field using the
>> refresh function. The execute property of the refresh function is used
>> to define the client id which is to be submitted and updated
>> server-side. When the user clicks on the radio button, the input value
>> is updated server-side and the text field is updated client-side -- all
>> without a page refresh.
>>
>> <webuijsf:radioButton id="rb1" name="rb1" label="Refresh Text Field"
>> onClick="refreshField()"/>||||
>> <webuijsf:textField id="field1" text="#{MyBean.text}" /> // Field used to
>> asynchronously update text.
>>
>> |<webuijsf:script>
>> function ||refreshField||() {
>> var domNode = document.getElementById("form1:field1"); // Get
>> field
>> return domNode.refresh("form1:rb1"); // Asynchronously refresh
>> while submitting radio button value
>> }
>> </webuijsf:script>
>>
>> |Note that the refresh function can optionally take a list of elements
>> to execute. Thus, a comma-separated list of ids can be provided to
>> update components server-side: refresh("form1:id1,form2:id2,...").
>>
>> Dan
>>
>> Rashanova wrote:
>>
>>> Hello,
>>> I am trying to understand how the submit() and refresh() functions of
>>> ajax
>>> components work.
>>>
>>> I have tried to setup the following code using pure jsf-extensions
>>> (dynamic
>>> faces):
>>> <webuijsf:textField binding="#{ManageSession.txtID}" id="txtID"
>>>
>>> onChange="DynaFaces.fireAjaxTransaction(this, { execute:
>>> 'form1:txtID'});"
>>> valueChangeListenerExpression="#{ManageSession.txtID_processValueChange}"/>
>>>
>>> The code works in an excellent way since rendering the components on the
>>> page will only take place after the ajax response comes back.
>>>
>>> However I have tried to achieve the same effect using the submit and
>>> refresh
>>> functions of the ajax components by writing something like:
>>> function changeEvent() {
>>> var node1 = document.getElementById("form1:txtID");
>>> node1.submit();
>>> var domNode = document.getElementById("form1:textField2");
>>> domNode.refresh();
>>> }
>>>
>>> The problem with the above code is that the refresh function is NOT
>>> waiting
>>> for the ajax response to come back. and Hence it is not picking up the
>>> latest value from the server. The only way I was able to get around this
>>> is
>>> by moving the "refresh" part to another function and using the setTimeout
>>> as
>>> follows:
>>> function changeEvent(){
>>> var node1 = document.getElementById("form1:txtID");
>>> node1.submit();
>>> setTimeout('updateSessionInfo()',1000);
>>> }
>>>
>>> function updateSessionInfo() {
>>> var domNode = document.getElementById("form1:textField2");
>>> domNode.refresh();
>>> }
>>>
>>> 1- Is there away I can get around this problem, and force the refresh to
>>> take place ONLY after the ajax response comes back to the client?
>>> 2- If not, how can I create a call back function on the client side that
>>> will wait for the ajax response in order to execute?
>>> 3- Since the first code snippet above (one using pure jsf dynamic faces)
>>> works fine, what is the benefit of the submit and refresh functions
>>> introduced into woodstock? and is it a good practice to use dynamic faces
>>> and I did in the above example?
>>>
>>> THanks a lot!
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
>