0

i have a div with style="display:none;"

And a button click event

$('#apply_filters').on('click', function () {
  console.log("test1");
  $("#mydiv").show();
  console.log("test2");
  //Do some work that take a minut
});

mydiv is a div with a message so the user know that the button click works and the server is processing the data,

now the thing is that the test1 and test2 messages shows instantly, but the div shows after the processing is done,

i also try with the javascript code version 

document.getElementById("mydiv").style.display = "block";

and doesn't work either

Josh Stevens
  • 3,943
  • 1
  • 15
  • 22
Cristian
  • 25
  • 5
  • What kind of processing is being done? It is JavaScript intensive? Is there a way you could reproduce the issue here? – showdev Jun 01 '15 at 19:11
  • 1
    Because the page did not get to redraw the DOM before the action that locks up the window started to run – epascarello Jun 01 '15 at 19:11
  • Put your "do some work" code in a `setTimeout` with a very short duration. –  Jun 01 '15 at 19:17
  • @showdev the click function checks some values from input elements and then do a ajax call where the server do some php processing – Cristian Jun 01 '15 at 19:17
  • 3
    You're probably using `async: false` then, which is just really bad for the very reason you're seeing here. –  Jun 01 '15 at 19:18
  • Is the AJAX call truly asynchronous? It's difficult to troubleshoot without being able to reproduce the problem. – showdev Jun 01 '15 at 19:18
  • @squint yes async is false – Cristian Jun 01 '15 at 19:29
  • 2
    So then you're getting the behavior you've defined. Even if you get the `.show()` to work by doing what I described above, the page will still be frozen, which offers a bad user experience. –  Jun 01 '15 at 19:30
  • See [What does “async: false” do in jQuery.ajax()?](http://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax) – showdev Jun 01 '15 at 19:35
  • @squint but the $("#mydiv").show(); is done before i call ajax, so the correct order must be show the div, then call ajax, or i am missing something? – Cristian Jun 01 '15 at 19:52
  • 1
    Sorry, had the wrong order in the example above. Here's the corrected one: http://jsfiddle.net/vpbr9m36/2/. As you can see, async false will prevent the show function to execute even if it's placed before the ajax call. – balzafin Jun 01 '15 at 20:14
  • 1
    Yes Cristian, you're missing the fact that the page doesn't redraw itself until the function is complete, and you're blocking the function from completing. Blocking code like that is *almost never* used in JavaScript. –  Jun 01 '15 at 20:23

0 Answers0