Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36674 > unrolled thread

Animation playing while a form is submitted, part 2

Back to article view | Back to comp.lang.javascript

Contents

  Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-30 04:45 -0700
    Re: Animation playing while a form is submitted, part 2 Julio Di Egidio <julio@diegidio.name> - 2019-05-30 09:41 -0700
      Re: Animation playing while a form is submitted, part 2 Julio Di Egidio <julio@diegidio.name> - 2019-05-30 09:47 -0700
        Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-30 22:56 -0700
          Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-31 00:22 -0700
          Re: Animation playing while a form is submitted, part 2 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-31 09:31 +0200
            Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-31 01:11 -0700
              Re: Animation playing while a form is submitted, part 2 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-31 10:52 +0200
          Re: Animation playing while a form is submitted, part 2 Julio Di Egidio <julio@diegidio.name> - 2019-05-31 00:33 -0700
            Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-31 01:13 -0700
              Re: Animation playing while a form is submitted, part 2 Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-05-31 11:11 +0000
      Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-30 22:51 -0700
    Re: Animation playing while a form is submitted, part 2 groovee@cyberdude.com - 2019-05-31 01:16 -0700
      Re: Animation playing while a form is submitted, part 2 "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-31 10:57 +0200

#36674 — Animation playing while a form is submitted, part 2

Hi guys,
I'm trying to submit a form via AJAX and have an animation play while it submits, but it's not working. I've got this, right up top:

    function ajaxFunction(e){
        e.preventDefault();
        blah blah
        var spin = true;


Then:
        ajaxRequest.onload = function() {
	var spin = false;
	var ack =  ajaxRequest.responseText;
        if (ack === "OK") { ajaxDisplay.innerHTML = "Message Sent"; }
        };

Then:
       	ajaxRequest.ontimeout = function (e) {
	var spin = false;
	ajaxDisplay.innerHTML = "Message NOT Sent";// XMLHttpRequest timed out. Do something here.
	};

        blah blah

And finally (a pink box has to spin infinitely until the response comes back):
        ajaxRequest.send(null);
        
        var pinkbox = document.getElementById('container');
        while (spin === true) {
		pinkbox.style.transition="transform 1s";	//spin the box;
		pinkbox.style.transform="rotate3d(1,0,0,360deg)";
		}


But it BLOCKS when "submit" is clicked, and then Firefox says "Wait" or "Stop your webpage", and if I click "Wait", then the box spins ONCE! :( What am I doing wrong??

[toc] | [next] | [standalone]

#36675

On Thursday, 30 May 2019 13:45:29 UTC+2, gro...@cyberdude.com  wrote:
> 
> Hi guys,
> I'm trying to submit a form via AJAX and have an animation play while it submits, but it's not working. I've got this, right up top:
> 
>     function ajaxFunction(e){
>         e.preventDefault();
>         blah blah
>         var spin = true;

Drop that: since you are using the timeout mechanism and handler,
you do not need any flag.

> Then:
>         ajaxRequest.onload = function() {
> 	var spin = false;

Drop that: if you get called here, the ontimeout has not and will not happen.

> 	var ack =  ajaxRequest.responseText;
>         if (ack === "OK") { ajaxDisplay.innerHTML = "Message Sent"; }
>         };
> 
> Then:
>        	ajaxRequest.ontimeout = function (e) {
> 	var spin = false;

Drop that: if you get called here, the onload has not and will not happen.

> 	ajaxDisplay.innerHTML = "Message NOT Sent";// XMLHttpRequest timed out. Do something here.
> 	};
> 
>         blah blah
> 
> And finally (a pink box has to spin infinitely until the response comes back):
>         ajaxRequest.send(null);

Have you set the ajaxRequest.timeout property as well (ideally, just before
send)?  "The default value is 0, which means there is no timeout" (see the
docs).

>         var pinkbox = document.getElementById('container');
>         while (spin === true) {

Hehe, you wish that could work!  :)  You are simply blocking the single
thread of execution, effectively running an infinite loop at that point.
The UI will freeze, the CPU will go to 100%, and the browser will ask
if you want to kill script...

What you could do is set styles just after you send the request,
the unset style in the handlers!

> 		pinkbox.style.transition="transform 1s";	//spin the box;
> 		pinkbox.style.transform="rotate3d(1,0,0,360deg)";
> 		}
> 
> 
> But it BLOCKS when "submit" is clicked, and then Firefox says "Wait" or "Stop your webpage", and if I click "Wait", then the box spins ONCE! :( What am I doing wrong??

Julio

[toc] | [prev] | [next] | [standalone]

#36676

On Thursday, 30 May 2019 18:42:02 UTC+2, Julio Di Egidio  wrote:

Sorry, I'll correct few typos for clarity.

> The UI will freeze, the CPU will go to 100%, and the browser will ask
> if you want to kill script...

... if you want to kill the script.

> What you could do is set styles just after you send the request,
> the unset style in the handlers!

... then unset the styles from the handlers!

Julio

[toc] | [prev] | [next] | [standalone]

#36686

On Thursday, 30 May 2019 22:17:14 UTC+5:30, Julio Di Egidio  wrote:

> 
> > What you could do is set styles just after you send the request,
> > the unset style in the handlers!
> 
> ... then unset the styles from the handlers!


Er yes, I suppose I *could* do this, but I'd rather like to know what's wrong with my code above, ie. why the "while (spin === true)..." won't work...?

[toc] | [prev] | [next] | [standalone]

#36691

Ah, searching around, I found these! :

https://stackoverflow.com/questions/34824460/why-does-a-while-loop-block-the-event-loop

and 

https://stackoverflow.com/questions/7575589/how-does-javascript-handle-ajax-responses-in-the-background/7575649#


....does this mean I can't DO what I'm trying to do?? :(

Will I have to use WebWorkers or something?? How? I don't know much about it....

[toc] | [prev] | [next] | [standalone]

#36693

groovee@cyberdude.com wrote on 31 May 2019 in comp.lang.javascript:

> "while (spin === true)..."

What's wrong with:

"while (spin) ..."

Do you say to your children?:

"As long as IT IS TRUE THAT you have dirty hands,
please wash them!"

Your children should understand that "as long as" 
either expects a boolean type value
or an expression that automagically converts to that type.

[Perhaps after Jean-Paul Sartre's "Les mains sales".]

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36698

On Friday, 31 May 2019 13:02:01 UTC+5:30, Evertjan.  wrote:

> What's wrong with:
> 
> "while (spin) ..."

Well THAT blocks too...

[toc] | [prev] | [next] | [standalone]

#36701

groovee@cyberdude.com wrote on 31 May 2019 in comp.lang.javascript:

> On Friday, 31 May 2019 13:02:01 UTC+5:30, Evertjan.  wrote:
> 
>> What's wrong with:
>> 
>> "while (spin) ..."
> 
> Well THAT blocks too...

That is not my question how it works in not working code.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36694

On Friday, 31 May 2019 07:56:35 UTC+2, gro...@cyberdude.com  wrote:
> On Thursday, 30 May 2019 22:17:14 UTC+5:30, Julio Di Egidio  wrote:
> 
> > > What you could do is set styles just after you send the request,
> > > the unset style in the handlers!
> > 
> > ... then unset the styles from the handlers!
> 
> Er yes, I suppose I *could* do this, but I'd rather like to know what's wrong
> with my code above, ie. why the "while (spin === true)..." won't work...?

Fucking pointless pieces of spamming shit...

*Plonk*

Julio

[toc] | [prev] | [next] | [standalone]

#36699

On Friday, 31 May 2019 13:03:34 UTC+5:30, Julio Di Egidio  wrote:

> Fucking pointless pieces of spamming shit...
> 
> *Plonk*
> 
> Julio

You talking to me?? Don't use language like that, you little cunt.

[toc] | [prev] | [next] | [standalone]

#36703

On 2019-05-31, groovee@cyberdude.com <groovee@cyberdude.com> wrote:
> On Friday, 31 May 2019 13:03:34 UTC+5:30, Julio Di Egidio  wrote:
>> Fucking pointless pieces of spamming shit...
>> 
>> *Plonk*
>> 
>> Julio
>
> You talking to me?? Don't use language like that, you little cunt.

Ignore Plonk Julio, he's a foul-mouthed imbecile with nothing to say.

[toc] | [prev] | [next] | [standalone]

#36685

On Thursday, 30 May 2019 22:12:02 UTC+5:30, Julio Di Egidio  wrote:

> Have you set the ajaxRequest.timeout property as well (ideally, just before
> send)?  

Yes, I have actually, sorry, forgot to post that line.



> Hehe, you wish that could work!  :)  You are simply blocking the single
> thread of execution, effectively running an infinite loop at that point.


Er - yes, the box *is* supposed to spin infinitely until "onload" or "ontimeout" get called...? So what AM I supposed to do then???!!

[toc] | [prev] | [next] | [standalone]

#36700

OK, for anyone who's interested, I was trying to this:

In the CSS:

@keyframes spinit {
	from {
		rotate3d(1,0,0,0deg);
	}
	to {
		rotate3d(1,0,0,360deg);
	}
	
	}


.spinclass {
	animation-name: spinit;
	animation-iteration-count: infinite;
	}


..and then, in the JS, do a:

    pinkbox.className =  "spinclass";
right after the  ajaxRequest.send(null);

..but that doesn't seem to be working. I'm unsure of the syntax - have I got it right? Will this even, indeed, WORK??

[toc] | [prev] | [next] | [standalone]

#36702

groovee@cyberdude.com wrote on 31 May 2019 in comp.lang.javascript:

> ..and then, in the JS, do a:
> 
>     pinkbox.className =  "spinclass";
> right after the  ajaxRequest.send(null);
> 
> ..but that doesn't seem to be working. I'm unsure of the syntax - have I
> got it right? Will this even, indeed, WORK?? 

You should go debugging:

If 
pinkbox.className =  "spinclass";
has the desired effect
a breakpoint or console.log() after that
would show that classname.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web