Loading page and spinner conundrum

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You may find some variation between browsers on this behavior – the issue you describe is common to Safari (and maybe some versions of Chrome) but is not seen elsewhere. As far as I know, the only way to completely avoid this is to submit the form by Ajax (XHR) and then rebuild the page with JavaScript when the response is received. But with the endpoint of the form being a “foreign” site (not on your domain) you’re going to have to leap through an unbelievable series of hoops to make this happen, and all for a nice style effect.

Another thing you can try is to disable the button when it is clicked. I’m using Prototype in this example, but you could use any form of JavaScript you like to do the same.

$('my_submit_button_id').observe('click', function(evt){
	this.writeAttribute('disabled', 'disabled');
	this.setValue('Sending...');
	return true;
});

It’s not a spinner, so it should survive the browser freeze. The actual problem is that animated GIFs just don’t want to play in this edge case.

Walter

On Jul 31, 2014, at 9:47 AM, David Owen wrote:

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oddly that does not work in Safari as the Form post url is totally disabled (Worked in Firefox). I did get this to work however…

var b = $('YourSubmitButtonID');
var f = b.up('form');
f.observe('submit',function(evt){
b.wrap('div').update('<p>Relax... This may take some time.</p>');
return f.submit();
});

David Owen
http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 14:57, Walter Lee Davis email@hidden wrote:

You may find some variation between browsers on this behavior – the issue you describe is common to Safari (and maybe some versions of Chrome) but is not seen elsewhere. As far as I know, the only way to completely avoid this is to submit the form by Ajax (XHR) and then rebuild the page with JavaScript when the response is received. But with the endpoint of the form being a “foreign” site (not on your domain) you’re going to have to leap through an unbelievable series of hoops to make this happen, and all for a nice style effect.

Another thing you can try is to disable the button when it is clicked. I’m using Prototype in this example, but you could use any form of JavaScript you like to do the same.

$(‘my_submit_button_id’).observe(‘click’, function(evt){
this.writeAttribute(‘disabled’, ‘disabled’);
this.setValue(‘Sending…’);
return true;
});

It’s not a spinner, so it should survive the browser freeze. The actual problem is that animated GIFs just don’t want to play in this edge case.

Walter

On Jul 31, 2014, at 9:47 AM, David Owen wrote:

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s very neat!

Walter

On Jul 31, 2014, at 10:32 AM, David Owen wrote:

Oddly that does not work in Safari as the Form post url is totally disabled (Worked in Firefox). I did get this to work however…

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});

David Owen
http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 14:57, Walter Lee Davis email@hidden wrote:

You may find some variation between browsers on this behavior – the issue you describe is common to Safari (and maybe some versions of Chrome) but is not seen elsewhere. As far as I know, the only way to completely avoid this is to submit the form by Ajax (XHR) and then rebuild the page with JavaScript when the response is received. But with the endpoint of the form being a “foreign” site (not on your domain) you’re going to have to leap through an unbelievable series of hoops to make this happen, and all for a nice style effect.

Another thing you can try is to disable the button when it is clicked. I’m using Prototype in this example, but you could use any form of JavaScript you like to do the same.

$(‘my_submit_button_id’).observe(‘click’, function(evt){
this.writeAttribute(‘disabled’, ‘disabled’);
this.setValue(‘Sending…’);
return true;
});

It’s not a spinner, so it should survive the browser freeze. The actual problem is that animated GIFs just don’t want to play in this edge case.

Walter

On Jul 31, 2014, at 9:47 AM, David Owen wrote:

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

the code I used does have an error…

TypeError: 'null' is not an object (evaluating 'b.up')

David Owen
Printline Advertising

On 31 Jul 2014, at 15:32, David Owen email@hidden wrote:

I did get this to work however…

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s because you wrote it!… http://www.freewaytalk.net/thread/view/34618#m_34625

Do you know why Safari Dev tools is saying…

TypeError: ‘null’ is not an object (evaluating ‘b.up’)

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:36, Walter Lee Davis email@hidden wrote:

That’s very neat!

Walter

On Jul 31, 2014, at 10:32 AM, David Owen wrote:

Oddly that does not work in Safari as the Form post url is totally disabled (Worked in Firefox). I did get this to work however…

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});

David Owen
http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 14:57, Walter Lee Davis email@hidden wrote:

You may find some variation between browsers on this behavior – the issue you describe is common to Safari (and maybe some versions of Chrome) but is not seen elsewhere. As far as I know, the only way to completely avoid this is to submit the form by Ajax (XHR) and then rebuild the page with JavaScript when the response is received. But with the endpoint of the form being a “foreign” site (not on your domain) you’re going to have to leap through an unbelievable series of hoops to make this happen, and all for a nice style effect.

Another thing you can try is to disable the button when it is clicked. I’m using Prototype in this example, but you could use any form of JavaScript you like to do the same.

$(‘my_submit_button_id’).observe(‘click’, function(evt){
this.writeAttribute(‘disabled’, ‘disabled’);
this.setValue(‘Sending…’);
return true;
});

It’s not a spinner, so it should survive the browser freeze. The actual problem is that animated GIFs just don’t want to play in this edge case.

Walter

On Jul 31, 2014, at 9:47 AM, David Owen wrote:

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The only reason you would see an error is if the ID was not correct (or the button did not have an ID).

Walter

On Jul 31, 2014, at 10:39 AM, David Owen wrote:

That’s because you wrote it!… http://www.freewaytalk.net/thread/view/34618#m_34625

Do you know why Safari Dev tools is saying…

TypeError: ‘null’ is not an object (evaluating ‘b.up’)

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:36, Walter Lee Davis email@hidden wrote:

That’s very neat!

Walter

On Jul 31, 2014, at 10:32 AM, David Owen wrote:

Oddly that does not work in Safari as the Form post url is totally disabled (Worked in Firefox). I did get this to work however…

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});

David Owen
http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 14:57, Walter Lee Davis email@hidden wrote:

You may find some variation between browsers on this behavior – the issue you describe is common to Safari (and maybe some versions of Chrome) but is not seen elsewhere. As far as I know, the only way to completely avoid this is to submit the form by Ajax (XHR) and then rebuild the page with JavaScript when the response is received. But with the endpoint of the form being a “foreign” site (not on your domain) you’re going to have to leap through an unbelievable series of hoops to make this happen, and all for a nice style effect.

Another thing you can try is to disable the button when it is clicked. I’m using Prototype in this example, but you could use any form of JavaScript you like to do the same.

$(‘my_submit_button_id’).observe(‘click’, function(evt){
this.writeAttribute(‘disabled’, ‘disabled’);
this.setValue(‘Sending…’);
return true;
});

It’s not a spinner, so it should survive the browser freeze. The actual problem is that animated GIFs just don’t want to play in this edge case.

Walter

On Jul 31, 2014, at 9:47 AM, David Owen wrote:

I have a Freeway page and form that post search results and resulting list from another service. There’s even a spinner that swaps out the submit button with a spinner when clicked.

So here’s the problem. When the form button is clicked the url for other service commences loading into the browser and instantly stops any function (the spinner replacement) in the page immediately. So the page hangs on the form sending page until the search on the other page completes fully to display the results and rendered page. If the results are very long the pause is huge.

Is there anything workarounds I can do to make this load pause acceptable? Or inform the use of the potential wait?

David Owen

http://www.printlineadvertising.co.uk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One last thing… if the back button is pressed after the results page is loaded the submit button is there a way of restoring the state of the submit button? (currently it would not be there).

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:32, David Owen email@hidden wrote:

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not really. The back button restores an image of the page as it last appeared from your browser’s cache. The document on the server is not consulted at all, so you see everything as you left it. This is usually a good thing, because it allows you to see your previous inputs, and repeat a form submission with different values in the form fields without re-entering everything.

Walter

On Jul 31, 2014, at 11:38 AM, David Owen wrote:

One last thing… if the back button is pressed after the results page is loaded the submit button is there a way of restoring the state of the submit button? (currently it would not be there).

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:32, David Owen email@hidden wrote:

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I suppose I could use this…

var b = $('YourSubmitButtonID');
var f = b.up('form');
f.observe('submit',function(evt){
b.wrap('div').update('<p>Relax... This may take some time. <a href=“mylastpage.html>Whoa! reset the search</a></p>');
return f.submit();
});

That could act to reset to page or abort a search with a long wait.

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 16:49, Walter Lee Davis email@hidden wrote:

Not really. The back button restores an image of the page as it last appeared from your browser’s cache. The document on the server is not consulted at all, so you see everything as you left it. This is usually a good thing, because it allows you to see your previous inputs, and repeat a form submission with different values in the form fields without re-entering everything.

Walter

On Jul 31, 2014, at 11:38 AM, David Owen wrote:

One last thing… if the back button is pressed after the results page is loaded the submit button is there a way of restoring the state of the submit button? (currently it would not be there).

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:32, David Owen email@hidden wrote:

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Or, instead of update() use insert() to add the warning, leaving the button there along with the admonition not to press it. Just leave off the P tag on the inserted content when you do that, and you should be good.

Walter

On Aug 1, 2014, at 4:38 AM, David Owen wrote:

I suppose I could use this…

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time. Whoa! reset the search

’);
return f.submit();
});

That could act to reset to page or abort a search with a long wait.

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 16:49, Walter Lee Davis email@hidden wrote:

Not really. The back button restores an image of the page as it last appeared from your browser’s cache. The document on the server is not consulted at all, so you see everything as you left it. This is usually a good thing, because it allows you to see your previous inputs, and repeat a form submission with different values in the form fields without re-entering everything.

Walter

On Jul 31, 2014, at 11:38 AM, David Owen wrote:

One last thing… if the back button is pressed after the results page is loaded the submit button is there a way of restoring the state of the submit button? (currently it would not be there).

David Owen

http://www.printlineadvertising.co.uk

On 31 Jul 2014, at 15:32, David Owen email@hidden wrote:

var b = $(‘YourSubmitButtonID’);
var f = b.up(‘form’);
f.observe(‘submit’,function(evt){
b.wrap(‘div’).update(‘

Relax… This may take some time.

’);
return f.submit();
});


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options