3

I have a contact form with a submit button. I am using JQuery to do the following in exactly the following order once a response is received from the server-side PHP that processes the submitted data:

  1. Change button text to "Send"
  2. Display the received response in an alert

The code is straightforward:

submit_button.text('Send');
alert(response);

However, the alert() always seems to trigger before the text change no matter what. Is this by design? Any trick to alter the sequence? I need the button's text to change before the alert is displayed. I even tried the following in vain:

submit_button.text('Send');
if(submit_button.text() == 'Send') { alert(response); }

I'm sorry if this question has already been answered elsewhere and request you to point me in the right direction should that be the case.

TheLearner
  • 2,813
  • 5
  • 46
  • 94
  • why would you need to use a native alert in the first place? Please provide a [mcve] – charlietfl Jan 30 '17 at 12:36
  • The alert is there to tell the user if the email was sent and why if not. The prototype is live at peppyburro.com/sandboxindex if you need to see it live. Just click HELP->CONTACT US from the navbar menu. – TheLearner Jan 30 '17 at 12:37
  • Possible duplicate of [why does this alert fire before earlier code has finished executing?](http://stackoverflow.com/questions/19869275/why-does-this-alert-fire-before-earlier-code-has-finished-executing) – Vaibhav Kumar Jan 30 '17 at 12:38
  • check this http://stackoverflow.com/questions/16082452/javascript-alert-box-shows-up-before-executing-previous-statement – Vaibhav Kumar Jan 30 '17 at 12:39
  • Simple solution is don't use alert – charlietfl Jan 30 '17 at 12:40
  • 1
    Possible duplicate of [Javascript alert box shows up before executing previous statement](http://stackoverflow.com/questions/16082452/javascript-alert-box-shows-up-before-executing-previous-statement) – insertusernamehere Jan 30 '17 at 12:56

4 Answers4

10

You can wrap your alert call into a setTimeout call, that will put the alert call at the end of the event loop and will give time for the browser to update the DOM first.

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

FIDDLE: https://jsfiddle.net/sn9cbqz3/3/

Guilherme Sehn
  • 6,727
  • 18
  • 35
  • 2
    Ah, you beat me to it by 40 seconds! – Rik Lewis Jan 30 '17 at 12:39
  • 1
    Since technically 1ms may not be sufficient to update the button text on some old systems, you can also 'literally' wait for it to change then display the alert with : submit_button.text('Send'); while(submit_button.text()!='Send'); alert('test'); – mrbm Jan 30 '17 at 12:54
6

The problem is that the script continues without giving DOM the time to update. You can use setTimeout to achieve what you want:

submit_button.text('Send');
setTimeout(function(){
      alert(response);
},10);
yadejo
  • 1,910
  • 15
  • 26
4

I think this can be solved with a setTimeout to allow the browser to complete the thread and repaint, before the alert is triggered, like this...

submit_button.text('Send');
setTimeout(function() {alert(response);},0);
Rik Lewis
  • 750
  • 4
  • 10
0

As respondent in Javascript alert box shows up before executing previous statement

Changes in the browser doesn't show up as long as your Javascript code is running.

The browser is event driven, so changing an element in the DOM doesn't show the change immediately, instead an event is triggered to redraw the element. When your function has finished running, the browser will handle any pending events and show the changes.

So, when building an application, you have to use the same approach so that the browser has a chance to show the changes. By Guffa

The timeout suggestions are pretty much your best bet.

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

Suggested by Rik Lewis

Community
  • 1
  • 1
Atska
  • 11
  • 2