Do function before confirm jquery

Question

here is my jquery code

$('.input').keyup(function(event){
    update_text(); // $('div').html('blahblah');
})
.blur(function(event){
    $(this).keyup();
    if(confirm('Are you sure?')){
        // do somthing...
    }
});

my problem is when input blur, confirm box should be show after doing update_text();

but update_text() seems run after confirm...

How to make it do update_text() first, then show confirm dialog?

Is it that `update_text()` runs after the `confirm()`, or that any changes `update_text()` makes to the page are not repainted until after the `confirm()`? — nnnnnn, Jul 28 '17 at 03:30
It seems `update_text` run before `confirm`. but `.html()` and `.val()` repaints after `confirm`. =D — Anne Wu, Jul 28 '17 at 04:59

score 0 · Answer 1 · answered Jul 28 '17 at 03:39

This might be too simple, but it seems like it fixes the problem.

$('.input').keyup(function(event){
  update_text(); // $('div').html('blahblah');
})
$('.input').blur(function(event){
  update_text();
  if(confirm('Are you sure?')){
    // do somthing...
  }
});

Spencer Wieczorek · Accepted Answer · 2017-07-28T03:54:19.213

0

Actually your method does run before confirm(), the issue here is that your browser repaints the DOM asynchronously even though the method .html() is in itself synchronous. So while it doesn't appear to run first visually it indeed is.

For example a more simple version will have the same functionality, which can vary by browser:

$("div").html("foo");
confirm('Are you sure?');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

One way to get around this is to force the DOM to repaint rather than letting the browser do it. For example:

$("div").html("foo");
$("div").hide().show(function(){
  confirm('Are you sure?'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

edited Jul 28 '17 at 03:54

answered Jul 28 '17 at 03:40

Spencer Wieczorek

21,229
7
44
54

*"your browser updates the DOM asynchronously"* - It updates the DOM synchronously, but does any resulting repaints asynchronously. (Just going for today's nitpicking award.) Anyway, you didn't suggest a solution - maybe use `setTimeout()`? – nnnnnn Jul 28 '17 at 03:49
@nnnnnn Yes sorry I meant repaints of the DOM. – Spencer Wieczorek Jul 28 '17 at 03:56
@SpencerWieczorek That is what I'm facing on.Thanks for your explain :) – Anne Wu Jul 28 '17 at 04:48
@nnnnnn I'm using setTimeout, and it working well. Thanks for your suggest. =D – Anne Wu Jul 28 '17 at 04:49

score 0 · Answer 3 · answered Jul 28 '17 at 03:40

update_text() happens on keyup event, which is triggered before the input is blurred, so if set up correctly it actually happens each time the user inputs another character.

$('.input').keyup(function(event){
    update_text(); // $('div').html('blahblah');
})
.blur(function(event){
    $(this).keyup();
    if(confirm('Are you sure?')){
        // do somthing...
    }
});

update_text = function() {
  text = $('.input').val();
  $('#text').text(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='input'/>
<div id='text'>

It is just what I expected! Sadly it still not work on my code. :| Thanks for your help. :) — Anne Wu, Jul 28 '17 at 05:33

Do function before confirm jquery

3 Answers3