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

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

Animation playing WHILE a form is submitted

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

Contents

  Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-15 20:58 -0700
    Re: Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-21 05:18 -0700
      Re: Animation playing WHILE a form is submitted "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-21 22:38 +0200
        Re: Animation playing WHILE a form is submitted Julio Di Egidio <julio@diegidio.name> - 2019-05-21 14:40 -0700
          Re: Animation playing WHILE a form is submitted "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-22 00:07 +0200
        Re: Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-21 23:38 -0700
          Re: Animation playing WHILE a form is submitted "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-22 12:22 +0200
            Re: Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-22 06:05 -0700
              Re: Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-22 06:27 -0700
                Re: Animation playing WHILE a form is submitted "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-23 09:17 +0200
              Re: Animation playing WHILE a form is submitted Julio Di Egidio <julio@diegidio.name> - 2019-05-23 02:32 -0700
                Re: Animation playing WHILE a form is submitted Julio Di Egidio <julio@diegidio.name> - 2019-05-23 03:16 -0700
                  Re: Animation playing WHILE a form is submitted groovee@cyberdude.com - 2019-05-24 04:24 -0700

#36615 — Animation playing WHILE a form is submitted

I have a form which will be submitted using AJAX, and I would like an animation (a *programmed* animation of some sort, NOT an animated GIF) to be played AFTER the user clicks "Submit". However, after the user *does* click "Submit", if the form submission has not taken place correctly say, within 10 secs., (network outage or whatever), a "Message not sent" message should be displayed. If, within that time, the message HAS gone through, ie. the server has echoed "OK", then a "Message sent" message should be displayed.
I was trying to work out how to do this. My original thought was, after the "request.send(null)", to do this:
  
       request.send(null);
       setTimeout (function() {
         request.onreadystatechange=null; // to negate the handler
         alert("Message not sent");
}, 10000);

and then, this:
         request.onreadystatechange = blah blah alert("Message sent");

But this is not having the effect I want.
I want the animation (ie. tampering with CSS in whatever way to do animation) to play WHILE the 10 secs passes, after the user has clicked Submit, and, if the "onreadystatechange" happens within that time, then say "Message sent". So - do I need to mess with multithreading or something do that? I don't know much about it.


Thanks for your help.

[toc] | [next] | [standalone]

#36623

Hi - anyone here? No one knows?

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

#36624

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

> Hi - anyone here? No one knows?

Please quote what you are referring to, this is usenet, not email.


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

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

#36625

On Tuesday, 21 May 2019 22:38:27 UTC+2, Evertjan.  wrote:
> groovee@cyberdude.com wrote on 21 May 2019 in comp.lang.javascript:
> 
> > Hi - anyone here? No one knows?
> 
> Please quote what you are referring to, this is usenet, not email.

Usenet is email, and that's why.

This is Usenet, not a forum.

Julio

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

#36626

Julio Di Egidio <julio@diegidio.name> wrote on 21 May 2019 in 
comp.lang.javascript:

> On Tuesday, 21 May 2019 22:38:27 UTC+2, Evertjan.  wrote:
>> groovee@cyberdude.com wrote on 21 May 2019 in comp.lang.javascript:
>> 
>> > Hi - anyone here? No one knows?
>> 
>> Please quote what you are referring to, this is usenet, not email.
> 
> Usenet is email, and that's why.
> 
> This is Usenet, not a forum.
> 
> Julio

You don't make much sense, Julio,



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

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

#36627

On Wednesday, 22 May 2019 02:08:27 UTC+5:30, Evertjan.  wrote:
> 
> Please quote what you are referring to, this is usenet, not email.


Can you not read the FIRST POST in this thread, for whatever reason??!!

Anyway:

I have a form which will be submitted using AJAX, and I would like an animation (a *programmed* animation of some sort, NOT an animated GIF) to be played AFTER the user clicks "Submit". However, after the user *does* click "Submit", if the form submission has not taken place correctly say, within 10 secs., (network outage or whatever), a "Message not sent" message should be displayed. If, within that time, the message HAS gone through, ie. the server has echoed "OK", then a "Message sent" message should be displayed.
I was trying to work out how to do this. My original thought was, after the "request.send(null)", to do this:
 
       request.send(null);
       setTimeout (function() {
         request.onreadystatechange=null; // to negate the handler
         alert("Message not sent");
}, 10000);

and then, this:
         request.onreadystatechange = blah blah alert("Message sent");

But this is not having the effect I want.
I want the animation (ie. tampering with CSS in whatever way to do animation) to play WHILE the 10 secs passes, after the user has clicked Submit, and, if the "onreadystatechange" happens within that time, then say "Message sent". So - do I need to mess with multithreading or something do that? I don't know much about it.


Thanks for your help.

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

#36629

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

> On Wednesday, 22 May 2019 02:08:27 UTC+5:30, Evertjan.  wrote:
>> 
>> Please quote what you are referring to, this is usenet, not email.
> 
> 
> Can you not read the FIRST POST in this thread, for whatever reason??!!

Usenet has no "treads" in that sense, postings are shown in different 
newsservers in a rather random way, so NETIQUETTE requires to always quote 
what you are responding on.

> Anyway:
> 
> I have a form which will be submitted using AJAX,

Do you mean JSON?

> and I would like an
> animation (a *programmed* animation of some sort, NOT an animated GIF)
> to be played AFTER the user clicks "Submit". 

After submit, unless you add a destination URL using
action <form action = '..URL..'>, the page is gone and the destination page 
is being build up.

> However, after the user
> *does* click "Submit", if the form submission has not taken place
> correctly say, within 10 secs.,

So you are not form-submitting anything, just using the <form> format to 
send something using a javascript script?

> (network outage or whatever), a "Message
> not sent" message should be displayed. If, within that time, the message
> HAS gone through, ie. the server has echoed "OK", then a "Message sent"
> message should be displayed. I was trying to work out how to do this. My
> original thought was, after the "request.send(null)", to do this: 

I see.
  
>        request.send(null);
>        setTimeout (function() {
>          request.onreadystatechange=null; // to negate the handler
>          alert("Message not sent");
>}, 10000);

1 The onreadystatechange is asynchronous by itself, I think you cannot 
expact an immediate response.

2 the alert() will stop any execution till responded to by enter or mouse-
click

> 
> and then, this:
>          request.onreadystatechange = blah blah alert("Message sent");
> 
> But this is not having the effect I want.

Stands to reason,depending on what you wrongly expect to happen.

> I want the animation (ie. tampering with CSS in whatever way to do
> animation) to play WHILE the 10 secs passes, after the user has clicked
> Submit, and, if the "onreadystatechange" happens within that time, then
> say "Message sent". So - do I need to mess with multithreading or
> something do that?

Javascript is single-threaded.

Perhaps you should just do your animation by CSS or Javaascript till the 
onreadystatechange fires as okay.

  var xhttp = new XMLHttpRequest();
  ...
  let stopIt = setTimeOut(== STOP YOUR ANIMATION HERE IF TOO LONG ==, 5000);
  
  xhttp.onreadystatechange = function() {
     if (xhttp.readyState == 4 && xhttp.status == 200) {
       == STOP YOUR ANIMATION HERE == ;
       == RESET stopIt timeout == ;
     };
  };
  

> I don't know much about it. 

There is an excellent remedy for that: 

Go and study!
Find out what others have done!
Don't ask for ready-to-consume solutions!

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

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

#36635

On Wednesday, 22 May 2019 15:52:39 UTC+5:30, Evertjan.  wrote:

> > However, after the user
> > *does* click "Submit", if the form submission has not taken place
> > correctly say, within 10 secs.,
> 
> So you are not form-submitting anything, just using the <form> format to 
> send something using a javascript script?
> 

Correct. It will be something like this:

     var subject = document.getElementById('subject').value;
     var message = document.getElementById('message').value;

     var queryString = "?subject=" + subject + "&message=" + message;
     ajaxRequest.open("GET", "http://localhost/sendmessage.php" + queryString, true);
     ajaxRequest.send(null);

(I've seen this code on the net - it IS correct, right? I mean, it IS the right way to do it??)




> >        request.send(null);
> >        setTimeout (function() {
> >          request.onreadystatechange=null; // to negate the handler
> >          alert("Message not sent");
> >}, 10000);
> 
> 1 The onreadystatechange is asynchronous by itself, I think you cannot 
> expact an immediate response.

I don't really understand what you're saying, and I REALLY want to be sure I've got this right - what I want to do is to cancel anything happening if the OTHER "onreadystatechange" handler is triggered -ie. if the message gets sent OK AFTER 10 secs - is "request.onreadystatechange=null;" the right way to do that??

> 
> 2 the alert() will stop any execution till responded to by enter or mouse-
> click
> 

Oh the "alert" is just illustrative - I won't be using any alerts in the production site :)



> Javascript is single-threaded.

Er - aren't there WebWorkers?


> 
> Perhaps you should just do your animation by CSS or Javaascript till the 
> onreadystatechange fires as okay.
> 
>   var xhttp = new XMLHttpRequest();
>   ...
>   let stopIt = setTimeOut(== STOP YOUR ANIMATION HERE IF TOO LONG ==, 5000);
>   
>   xhttp.onreadystatechange = function() {
>      if (xhttp.readyState == 4 && xhttp.status == 200) {
>        == STOP YOUR ANIMATION HERE == ;
>        == RESET stopIt timeout == ;
>      };
>   };
>   
> 

Sorry I dont'get you - how do I stop the animation?? It has to play in a continuous loop until the "onreadystatechange" fires..? What does this line mean?:
let stopIt = setTimeOut..blah blah

And what does THIS mean?:
== RESET stopIt timeout == ;


> There is an excellent remedy for that: 
> 
> Go and study!
> Find out what others have done!
> Don't ask for ready-to-consume solutions!

By NO MEANS do I want a ready-to-consume solution - and I AM studying! :)

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

#36636

Also, I have another question - if I do a setTimeout for say, 10 secs, anywhere in my code, the line/s of code after that run *concurrently* with the 10 secs passing right, ie. they're counted IN the 10 secs...? Or does setTimeout just block and do <whatever> AFTER 10 secs with nothing going on while that 10 secs elapses??

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

#36640

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

> Also, I have another question - if I do a setTimeout for say, 10 secs,
> anywhere in my code, the line/s of code after that run *concurrently*
> with the 10 secs passing right, ie. they're counted IN the 10 secs...?
> Or does setTimeout just block and do <whatever> AFTER 10 secs with
> nothing going on while that 10 secs elapses?? 

The timeout will not block anything, but could be temporarily blocked by 
still running code, and run later. However, that seeme improbible with 10 
seconds. Code never runs concurrently in single threaded js, I suppose.

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

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

#36642

On Wednesday, 22 May 2019 15:05:31 UTC+2, gro...@cyberdude.com  wrote:

>      var queryString = "?subject=" + subject + "&message=" + message;

That's guaranteed to break, it should be:

  var queryString = "?subject=" + encodeURIComponent(subject) + ...

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent>

> I've seen this code on the net

RTFM first, at least get an idea what's in there, then look at examples.

> > >         setTimeout (function() {
> > >          request.onreadystatechange=null; // to negate the handler

To abort a request you should use the abort method:

<https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort>

> what I want to do is to cancel anything happening if the OTHER
> "onreadystatechange" handler is triggered

Here is the basic scheme (slightly expanded re what I had already posted):

- Unset a global flag just before sending the request.
- In the onreadystatechange handler, first check the flag: if it is set,
  don't do anything, otherwise proceed as usual.
- In the timeout handler, first set the flag then (optionally) abort the
  request.

This scheme works under the assumption that no request is sent while another
is in progress (because of the one global variable).  To do better than that,
you'll need closures rather than just a global variable.  Anyway this can come
later, the basic code remains the same.

HTH,

Julio

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

#36643

On Thursday, 23 May 2019 11:32:25 UTC+2, Julio Di Egidio  wrote:
> On Wednesday, 22 May 2019 15:05:31 UTC+2, gro...@cyberdude.com  wrote:
<snip>
> > > >         setTimeout (function() {
> > > >          request.onreadystatechange=null; // to negate the handler
> 
> To abort a request you should use the abort method:
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort>
> 
> > what I want to do is to cancel anything happening if the OTHER
> > "onreadystatechange" handler is triggered
> 
> Here is the basic scheme (slightly expanded re what I had already posted):

Maybe just forget about that scheme:

<https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout>

Note to myself: RTFM...

HTH,

Julio

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

#36645

On Thursday, 23 May 2019 15:46:52 UTC+5:30, Julio Di Egidio  wrote:

> Maybe just forget about that scheme:
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout>
> 

Aaah THAT looks awesome, thanks Julio! :)

[toc] | [prev] | [standalone]

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

csiph-web