[FX.php List] Visual cue when processing a long, multi-record edit request?

[Joel Shapiro]

Thank you so much, Steve and Kevin!

It took me a while to get it to work, because I found out that if the  
<div> is longer than can fit in one browser window (which my form  
certainly is), it doesn't hide well.  (In Firefox, I can see the  
processingNow <div> if I scroll up after submitting, but in Safari it  
doesn't work at all -- it only worked when I removed enough table  
rows to see the whole form fit within the browser window, otherwise  
the form just stayed displayed as normal, and only via clicking the  
Back button after processing could I see the processingNow <div>.)

So instead of hiding the whole form, I'm just hiding the Submit/ 
Cancel buttons, and displaying my "processing..." message in their  
place, which is still great and provides just what I was looking for.

Thanks again.

Best,
-Joel


On Oct 12, 2005, at 5:45 PM, Kevin Futter wrote:

> On 13/10/05 10:21 AM, "Steve Winter" <steve at bluecrocodile.co.nz>  
> wrote:
>
>
>> Joel,
>>
>> Let us assume that the form is contained thus;
>>   <div id="editForm">
>>     ...your form...
>>   </div>
>> and the processing area thus;
>>   <div id="processingNow" style="display: none">
>>     ...we're processing your submission...
>>   </div>
>>
>> In your validate form script (for want of anywhere better to put  
>> it), just
>> before you return true to enable to form to submit, add the  
>> following two
>> lines;
>>   document.getElementById(processingNow).style.display = '';
>>   document.getElementById(editForm).style.display = 'none';
>>
>> Which should have the desired effect...not tested, written off the  
>> top of
>> my head, think I got it right... (also not sure how valid/cross  
>> platform
>> it is, but think it should be pretty okay that way too, at least for
>> 'modern' browsers)
>>
>> Cheers
>> Steve
>>
>
> The first JS line should end: display = 'block';
> And when you grab an element by ID using getElementById, you need  
> to quote
> the element ID (eg document.getElementById('processingNow'))
>
> -- 
> Kevin Futter
> Webmaster, St. Bernard's College
> http://www.sbc.melb.catholic.edu.au/
>
> On Oct 12, 2005, at 4:36 PM, Joel Shapiro wrote:
>
>> Thanks so much, Steve, that's a great idea!
>>
>> And thanks, Kevin, I agree that Steve's suggestion #1 is much  
>> better, but why do you recommend against using an image and only  
>> using text?
>>
>> Steve: I've played some with hiding/showing <div>s, but just in  
>> direct links so far (e.g. <a href="javascript:toggleLayer 
>> ('2');"> ) and not in form submissions (my form is already using  
>> javascript for validation:
>> <form method="post" action="edit.php" name="form" onsubmit="return  
>> validateForm(this)">
>>
>> If you've got any examples of toggling the form <div> to Hidden  
>> and the "Processing..." div to Display, I'd love to see one.
>>
>> Thanks very much,
>> -Joel
>>
>>
>> On Oct 12, 2005, at 4:10 PM, Kevin Futter wrote:
>>
>>
>>> I'd advise you go for the first option, as it's more accessible  
>>> (provided
>>> you use text for "Processing" instead of an image), and won't run  
>>> afoul of
>>> errant popup blockers or confuse screenreaders like the second. I  
>>> use this
>>> approach all the time for hiding and displaying error messages.
>>>
>>
>>
>> On Oct 12, 2005, at 3:29 PM, Steve Winter wrote:
>>
>>
>>> Joel,
>>>
>>> It seems that you're happy using Javascript, so there are a  
>>> couple of
>>> options which spring to mind just now.
>>>   1. Place the form that users fill in inside a <div> tag which  
>>> has an id,
>>> associated with it.  Place a 'processing' graphic inside another  
>>> <div>
>>> (with id) which usually has 'display' set to none.  When the user  
>>> clicks
>>> your submit button, run a short piece of javascript, which sets the
>>> content <div> to display: none, and the 'processing' <div> to  
>>> display.
>>> Then when the process finishes and the next page loads it clears.
>>>   2. Use javascript to open another small window, placed in the  
>>> center of
>>> the users screen when they submit the form. put some sort of loading
>>> graphic in there. When the next page loads, have further  
>>> javascript inside
>>> there that closes that window donw.
>>>
>>> Let me know if you want more details about either of these  
>>> ideas...I'm
>>> also sure other people will have other suggestions too ;-)
>>>
>>> Cheers
>>> Steve
>>>
>>>
>>>
>>>> Hi all
>>>>
>>>> I've got a page that allows users to edit many related records  
>>>> all at
>>>> once (via radio buttons).  Unfortunately, the browser stays on the
>>>> editable page -- sometimes for up to 30 seconds -- after clicking
>>>> submit.  I'm wondering if there's some way I can display some  
>>>> kind of
>>>> "processing..." message or animated gif after submitting,  
>>>> instead of
>>>> leaving the user staring at the page he/she just submitted (and
>>>> wondering if anything is happening).
>>>>
>>>> Or is there a way to have the browser switch to the processing page
>>>> right away, and I could put my message/gif on that page?
>>>>
>>>> (I already have a note next to the Submit button.  I know I could
>>>> have a javascript alert pop-up, but I'd rather users not have to
>>>> click OK again after clicking 'Submit'.... Maybe even something  
>>>> like
>>>> a javascript pop-up window that then closes upon completion??)
>>>>
>>>> I know this isn't specifically FX.php, but I'm hoping someone might
>>>> have a suggestion.
>>>>
>>>> TIA
>>>>
>>>> -Joel