Request response before applying styles

[Shade-]

Hi, I would like to be able to read the ajax response when targeting the pronto.load event. This is the workflow I would like to achieve:

• a login page is presented to the user, he fills his data into it, and clicks "login";
• a form is submitted, and a response is returned;
• depending on the response, a different CSS transition animation should be performed.

Currently I am targeting the pronto.request event (requestDelay = 300 to allow css transitions), firing an animation basically onClick, without checking for the actual response. But I would like to check for the response before triggering any animation; is there a variable or something?

[arvgta]

Hi,

thanks for opening this interesting issue!

Again, I would be targetting a solution, that would be best for as many users as possible. Here's my proposal:

I'll add a public method to the $.getPage sub-plugin, analogue to the existing ones, that can be addressed like this:

$.getPage('x')

That would return the last xhr object at any time the user wants.

In your use case, you could simply call the new public method from within the pronto event handler.

What do you think?.

[Shade-]

Seems the best solution to me.

[arvgta]

I'm glad you agree :)

I'll implement it asap...

[Shade-]

Maybe you should move the pronto.load event before the _render2() call wrapped in the setTimeout() function, or create a new event right there: pronto.request is triggered before the request, pronto.load after an eventual delay set with requestDelay. This is useful when applying custom animations to page transitions.

[arvgta]

Thanks for the new idea!

I'd favourise a new event, also for backwards compatibility. What should be call it?

[Shade-]

pronto.beforeload?

[arvgta]

So I'll change _render

to this:

        function _render(e, doPush, mode) {
            if (requestTimer !== null) {
                clearTimeout(requestTimer);
                requestTimer = null;
            }

            requestTimer = setTimeout(function () {
                 $window.trigger("pronto.beforeload", e);
                _render2(e, doPush, mode);
            }, requestDelay);
        }

Would that be alright?

[Shade-]

Maybe out of the setTimeout, right before it. This way, we can act before the new page rendering if a requestDelay is set.

 function _render(e, doPush, mode) {
        if (requestTimer !== null) {
            clearTimeout(requestTimer);
            requestTimer = null;
        }

        $window.trigger("pronto.beforeload", e);
        requestTimer = setTimeout(function () {
            _render2(e, doPush, mode);
        }, requestDelay);
    }

[arvgta]

Thanks! Like this:

        function _render(e, doPush, mode) {
            if (requestTimer !== null) {
                clearTimeout(requestTimer);
                requestTimer = null;
            }

            $window.trigger("pronto.beforeload", e);

            requestTimer = setTimeout(function () {
                _render2(e, doPush, mode);
            }, requestDelay);
        }

?

[Shade-]

Yes. It should work fine once the public method to access the response is ready.

[arvgta]

Yes, I'll make the public method right away and then provide a test file - sec

[arvgta]

Done

or here:

@4nf.org

Changes

[Shade-]

Awesome, it works like a charm. Thank you arvgta, and good luck with future updates! I will suggest other features if I will find them necessary or useful.