strange behaviour of jquery - append () is not working

this is my script:

$(document).ready(function() {
  $.post("mysql_calendar/json_fail.php",
    function (data) {
      var sel = $( "#availableTime" );
      sel.empty();
      for (var i=0; i<20; i++)
        sel.append( 'val' + i + '; ' );
      sel.append ( 'test; ' ) ;
  }, "json");
  var ss = $( "#availableTime" );
  ss.empty();
  ss.append ( 'not working 1; ', 'not working 2; ', 'not working 3; ' ) ;

json_fail.php:

< ? php
echo '[]';
 ? >

Results of this script: Laikas:val0; val1; val2; val3; val4; val5; val6; val7; val8; val9; val10; val11; val12; val13; val14; val15; val16; val17; val18; val19; test;

Why ss.empty () and ss.append is not workin开发者_高级运维g? If I delete $.post part, it starts working. Also, if I debug it step by step with firebug, everything works as expected.

---

what's the expected behavior? Keep in mind that $.post is asynchronous, so first ss will be emptied, then you append 'not working1;...'.

Then the $.post callback occurs, empties it again and appends the 'val' strings.

---

The post is asynchronous which causes the succss function to be called after the post has been completed.

In effect you are doing this:

  $.post("mysql_calendar/json_fail.php", //1) Post begins to process.
    function (data) { //5) once complete call this
      var sel = $( "#availableTime" ); //6) get ss
      sel.empty(); //7) call empty items added in 4) will be cleared.
      for (var i=0; i<20; i++) //8) append some text
        sel.append( 'val' + i + '; ' );
      sel.append ( 'test; ' ) ;
  }, "json");
  var ss = $( "#availableTime" ); //2) get ss
  ss.empty(); //3) call empty
  ss.append ( 'not working 1; ', 'not working 2; ', 'not working 3; ' ) ; //4) Append stuff

What do you intend as your end result?