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?