How to let the last ajaxResponseRenderer win?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

How to let the last ajaxResponseRenderer win?

Svein
When typing "test" pretty fast into textfield id=nameFilter the result is wrong. I am typical getting "DEBUG nameFilter: te" (sometimes just "t"). The grid data corresponds to the nameFilter output.

The output from  getNamefilterDebug() is always:
getNamefilterDebug: t
getNamefilterDebug: te
getNamefilterDebug: tes
getNamefilterDebug: test



<t:form t:id="nameFilterForm" id="nameFilterForm" async="true" autofocus="true" style="display:flex;align-items: center;">
    <t:label for="nameFilter">Name:</t:label>
    <t:textfield t:id="nameFilter" oninput="$(this).closest('form').submit()" style="vertical-align: top" value="nameFilter" autocomplete="off"/>
    <t:zone t:id="destinationCountZone">${destinationBeans.size()}</t:zone>
</t:form>

<t:zone t:id="destinationTableZone">
    DEBUG nameFilter: ${namefilterDebug}

    <t:grid renderTableIfEmpty="true" style="width:auto" source="destinationBeans" rowClass="prop:rowClass" class="table table-hover table-bordered" t:row="destinationBean" model="model" rowsPerPage="1000" t:pagerPosition="top">


void onSubmitFromNameFilterForm() {
    applyFilter();
    ajaxResponseRenderer.addRender(destinationTableZone);
}


public String getNamefilterDebug() {
    System.err.format("getNamefilterDebug: %s%n",nameFilter);
    return nameFilter;
}


When using JavaScript/React I just call XMLHttpRequest.abort() for all ongoing XHR's.


I cannot figure out how to do this in Tapestry 5.4.4. I was looking for AjaxResponseRenderer addRender(ClientBodyElement zone, abortPrevious);

S-E



Reply | Threaded
Open this post in threaded view
|

Re: How to let the last ajaxResponseRenderer win?

Dmitry Gusev
Hi,

There’s no reliable way to do so as all requests arrive simultaneously on
the server side, so unless you do a distributed lock — which is not a good
idea usually — there’s no way to do so.

One of ideas is: you could pass sequential number with every request, put
that number in a storage (like Redis) using compare and set, and if request
is older than the one already in storage — do nothing.

Usually such requests are throttled on the client side, I.e.:
https://github.com/cowboy/jquery-throttle-debounce

On Friday, June 7, 2019, Svein-Erik Løken <[hidden email]> wrote:

> When typing "test" pretty fast into textfield id=nameFilter the result is
> wrong. I am typical getting "DEBUG nameFilter: te" (sometimes just "t").
> The grid data corresponds to the nameFilter output.
>
> The output from  getNamefilterDebug() is always:
> getNamefilterDebug: t
> getNamefilterDebug: te
> getNamefilterDebug: tes
> getNamefilterDebug: test
>
>
>
> <t:form t:id="nameFilterForm" id="nameFilterForm" async="true"
> autofocus="true" style="display:flex;align-items: center;">
>     <t:label for="nameFilter">Name:</t:label>
>     <t:textfield t:id="nameFilter" oninput="$(this).closest('form').submit()"
> style="vertical-align: top" value="nameFilter" autocomplete="off"/>
>     <t:zone t:id="destinationCountZone">${destinationBeans.size()}</t:
> zone>
> </t:form>
>
> <t:zone t:id="destinationTableZone">
>     DEBUG nameFilter: ${namefilterDebug}
>
>     <t:grid renderTableIfEmpty="true" style="width:auto"
> source="destinationBeans" rowClass="prop:rowClass" class="table table-hover
> table-bordered" t:row="destinationBean" model="model" rowsPerPage="1000"
> t:pagerPosition="top">
>
>
> void onSubmitFromNameFilterForm() {
>     applyFilter();
>     ajaxResponseRenderer.addRender(destinationTableZone);
> }
>
>
> public String getNamefilterDebug() {
>     System.err.format("getNamefilterDebug: %s%n",nameFilter);
>     return nameFilter;
> }
>
>
> When using JavaScript/React I just call XMLHttpRequest.abort() for all
> ongoing XHR's.
>
>
> I cannot figure out how to do this in Tapestry 5.4.4. I was looking for
> AjaxResponseRenderer addRender(ClientBodyElement zone, abortPrevious);
>
> S-E
>
>
>
>

--
Dmitry Gusev

AnjLab Team
http://anjlab.com
Reply | Threaded
Open this post in threaded view
|

Re: How to let the last ajaxResponseRenderer win?

Cezary Biernacki
Hi,

A server-side solution will not solve the problem, as responses from the
server can be re-ordered because of network transmission hick-ups. With
Tapestry, you can the abort Ajax requests on client-side as well, it uses
Jquery (or Prototype.js) under the hood.  I would monkey-patch
dom.ajaxRequest function (see t5-core-dom-jquery.js
or t5-core-dom-prototype.js depending if your are using Jquery or
Prototype), to track currently running AJAX requests and abort it if a new
one is issued using Jquery's or XMLHttpRequest's abort methods. A more
advanced solution would allow multiple requests and only abort ones that
are conflicting with each other.

Cezary


On Fri, Jun 7, 2019 at 8:44 PM Dmitry Gusev <[hidden email]> wrote:

> Hi,
>
> There’s no reliable way to do so as all requests arrive simultaneously on
> the server side, so unless you do a distributed lock — which is not a good
> idea usually — there’s no way to do so.
>
> One of ideas is: you could pass sequential number with every request, put
> that number in a storage (like Redis) using compare and set, and if request
> is older than the one already in storage — do nothing.
>
> Usually such requests are throttled on the client side, I.e.:
> https://github.com/cowboy/jquery-throttle-debounce
>
> On Friday, June 7, 2019, Svein-Erik Løken <[hidden email]> wrote:
>
> > When typing "test" pretty fast into textfield id=nameFilter the result is
> > wrong. I am typical getting "DEBUG nameFilter: te" (sometimes just "t").
> > The grid data corresponds to the nameFilter output.
> >
> > The output from  getNamefilterDebug() is always:
> > getNamefilterDebug: t
> > getNamefilterDebug: te
> > getNamefilterDebug: tes
> > getNamefilterDebug: test
> >
> >
> >
> > <t:form t:id="nameFilterForm" id="nameFilterForm" async="true"
> > autofocus="true" style="display:flex;align-items: center;">
> >     <t:label for="nameFilter">Name:</t:label>
> >     <t:textfield t:id="nameFilter"
> oninput="$(this).closest('form').submit()"
> > style="vertical-align: top" value="nameFilter" autocomplete="off"/>
> >     <t:zone t:id="destinationCountZone">${destinationBeans.size()}</t:
> > zone>
> > </t:form>
> >
> > <t:zone t:id="destinationTableZone">
> >     DEBUG nameFilter: ${namefilterDebug}
> >
> >     <t:grid renderTableIfEmpty="true" style="width:auto"
> > source="destinationBeans" rowClass="prop:rowClass" class="table
> table-hover
> > table-bordered" t:row="destinationBean" model="model" rowsPerPage="1000"
> > t:pagerPosition="top">
> >
> >
> > void onSubmitFromNameFilterForm() {
> >     applyFilter();
> >     ajaxResponseRenderer.addRender(destinationTableZone);
> > }
> >
> >
> > public String getNamefilterDebug() {
> >     System.err.format("getNamefilterDebug: %s%n",nameFilter);
> >     return nameFilter;
> > }
> >
> >
> > When using JavaScript/React I just call XMLHttpRequest.abort() for all
> > ongoing XHR's.
> >
> >
> > I cannot figure out how to do this in Tapestry 5.4.4. I was looking for
> > AjaxResponseRenderer addRender(ClientBodyElement zone, abortPrevious);
> >
> > S-E
> >
> >
> >
> >
>
> --
> Dmitry Gusev
>
> AnjLab Team
> http://anjlab.com
>
Reply | Threaded
Open this post in threaded view
|

RE: How to let the last ajaxResponseRenderer win?

Svein
I have tried several methods without luck, but found a solution now. I don't want to rewrite the Tapestry javascript code if I don't have to, but found a way by stopping propagation of the events.zone.update. I have a filter on a grid. The grid is big and when Tapestry calls $.append(content) to insert zone data the browser gets very laggy. By including the input value in the zone, then I can check on match with the current user input when zone is ready to update. The mixin accept multiple zones.

I tried http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent, but I does not sync data and will display wrong result (om large zone updates).

Debugging:

STOP: stopPropagation
UPDT: Let zone update be handled as default
Test on currentInputVal vs inputValInZone

STOP: tes !== t zone:destinationTableZone
STOP: tes !== t zone:destinationCountZone
STOP: test !== te zone:destinationTableZone
STOP: test !== te zone:destinationCountZone
STOP: test !== tes zone:destinationTableZone
STOP: test !== tes zone:destinationCountZone
UPDT: test === test zone:destinationTableZone ZONEUPDATE
UPDT: test === test zone:destinationCountZone ZONEUPDATE
STOP: testla !== testl zone:destinationTableZone
STOP: testla !== testl zone:destinationCountZone
STOP: testlab !== testla zone:destinationTableZone
STOP: testlab !== testla zone:destinationCountZone
STOP: testlab2 !== testlab zone:destinationTableZone
STOP: testlab2 !== testlab zone:destinationCountZone
UPDT: testlab2 === testlab2 zone:destinationTableZone ZONEUPDATE
UPDT: testlab2 === testlab2 zone:destinationCountZone ZONEUPDATE

The code:
mixins\ZoneSync.java:
public class ZoneSync {
    @Parameter(required = true, allowNull = false)
    Object[] zones;
    @Inject
    JavaScriptSupport javaScriptSupport;
    @InjectContainer
    ClientElement clientElement;

    @AfterRender
    void afterRender() {
        String zonesSelector = Arrays.stream(this.zones).map(zone -> "#" + ((Zone) zone).getClientId()).collect(Collectors.joining(","));
        javaScriptSupport.require("mixins/zone-sync").invoke("syncWithInput").with("#" + clientElement.getClientId(), zonesSelector);
    }
}

Zone-sync.ts:
export = class ZoneSync {
    /*
    <t:zone t:id="<zoneId>">
        <!-- Add div.sync -->
        <div class="sync" hidden="">${<TextField.value>}</div>
    */
    static syncWithInput(textFieldSelector: string, zonesSelector: string) {
        let textField = $(textFieldSelector);
        Dom.on(zonesSelector, Events.zone.update, function (this: ElementWrapper, event: EventWrapper) {
            let currentInputVal = textField.val();
            let inputValInZone = $(`<div>${(event.memo.content)}</div>`).children(".sync").first().text();
            if (currentInputVal !== inputValInZone) {
                event.nativeEvent.stopPropagation();
                console.log(`STOP: ${currentInputVal} !== ${inputValInZone} zone:${this.element.id}`);
            } else {
                console.log(`UPDT: ${currentInputVal} === ${inputValInZone} zone:${this.element.id}`);
            }
        });
    }
}

TML:
        <t:form t:id="nameFilterForm" id="nameFilterForm" async="true" autofocus="true" style="display:flex;align-items: center;">
            <t:label for="nameFilterField">Name:</t:label>
            <t:textfield  t:mixins="jacillacore/ZoneSync" zoneSync.zones="[destinationTableZone, destinationCountZone]" t:id="nameFilterField" oninput="$(this).closest('form').submit()" style="vertical-align: top" value="nameFilter" autocomplete="off" />
            <t:zone t:id="destinationCountZone">
                <div class="sync" hidden="">${nameFilter}</div>
                ${destinationBeans.size()}</t:zone>
        </t:form>

        <t:zone t:id="destinationTableZone">
            <div class="sync" hidden="">${nameFilter}</div>
            <t:grid renderTableIfEmpty="true" style="width:auto" source="destinationBeans" rowClass="prop:rowClass" class="table table-hover table-bordered" t:row="destinationBean" model="model" rowsPerPage="1000" t:pagerPosition="top">



S-E

-----Original Message-----
From: Cezary Biernacki <[hidden email]>
Sent: lørdag 8. juni 2019 00:09
To: Tapestry users <[hidden email]>
Subject: Re: How to let the last ajaxResponseRenderer win?

Hi,

A server-side solution will not solve the problem, as responses from the server can be re-ordered because of network transmission hick-ups. With Tapestry, you can the abort Ajax requests on client-side as well, it uses Jquery (or Prototype.js) under the hood.  I would monkey-patch dom.ajaxRequest function (see t5-core-dom-jquery.js or t5-core-dom-prototype.js depending if your are using Jquery or Prototype), to track currently running AJAX requests and abort it if a new one is issued using Jquery's or XMLHttpRequest's abort methods. A more advanced solution would allow multiple requests and only abort ones that are conflicting with each other.

Cezary


On Fri, Jun 7, 2019 at 8:44 PM Dmitry Gusev <[hidden email]> wrote:

> Hi,
>
> There’s no reliable way to do so as all requests arrive simultaneously
> on the server side, so unless you do a distributed lock — which is not
> a good idea usually — there’s no way to do so.
>
> One of ideas is: you could pass sequential number with every request,
> put that number in a storage (like Redis) using compare and set, and
> if request is older than the one already in storage — do nothing.
>
> Usually such requests are throttled on the client side, I.e.:
> https://github.com/cowboy/jquery-throttle-debounce
>
> On Friday, June 7, 2019, Svein-Erik Løken <[hidden email]> wrote:
>
> > When typing "test" pretty fast into textfield id=nameFilter the
> > result is wrong. I am typical getting "DEBUG nameFilter: te" (sometimes just "t").
> > The grid data corresponds to the nameFilter output.
> >
> > The output from  getNamefilterDebug() is always:
> > getNamefilterDebug: t
> > getNamefilterDebug: te
> > getNamefilterDebug: tes
> > getNamefilterDebug: test
> >
> >
> >
> > <t:form t:id="nameFilterForm" id="nameFilterForm" async="true"
> > autofocus="true" style="display:flex;align-items: center;">
> >     <t:label for="nameFilter">Name:</t:label>
> >     <t:textfield t:id="nameFilter"
> oninput="$(this).closest('form').submit()"
> > style="vertical-align: top" value="nameFilter" autocomplete="off"/>
> >     <t:zone t:id="destinationCountZone">${destinationBeans.size()}</t:
> > zone>
> > </t:form>
> >
> > <t:zone t:id="destinationTableZone">
> >     DEBUG nameFilter: ${namefilterDebug}
> >
> >     <t:grid renderTableIfEmpty="true" style="width:auto"
> > source="destinationBeans" rowClass="prop:rowClass" class="table
> table-hover
> > table-bordered" t:row="destinationBean" model="model" rowsPerPage="1000"
> > t:pagerPosition="top">
> >
> >
> > void onSubmitFromNameFilterForm() {
> >     applyFilter();
> >     ajaxResponseRenderer.addRender(destinationTableZone);
> > }
> >
> >
> > public String getNamefilterDebug() {
> >     System.err.format("getNamefilterDebug: %s%n",nameFilter);
> >     return nameFilter;
> > }
> >
> >
> > When using JavaScript/React I just call XMLHttpRequest.abort() for
> > all ongoing XHR's.
> >
> >
> > I cannot figure out how to do this in Tapestry 5.4.4. I was looking
> > for AjaxResponseRenderer addRender(ClientBodyElement zone,
> > abortPrevious);
> >
> > S-E
> >
> >
> >
> >
>
> --
> Dmitry Gusev
>
> AnjLab Team
> http://anjlab.com
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]