jquery - Storing data returned from ajax post- should I use async:false to store in var? Is there a better way? -

i have code:

  $.post('http://localhost/test_zone/index.php/blog/new_post', { image_codes: images, info: fielddata, post_body: body },     function(data){      if (data.success) {       if(data.error != ''){         alert(data.error);            }       else {         $('#preview_wrapper').css('display','none').html(data.posthtml).show(1000);         $('#array_store').html(data.dataarray);         }       }      else {        alert('sorry, error occurred. no response server.');         }        }     ,'json'); 

as can see, i'm grabbing 2 bits of data - posthtml & dataarray- through ajax post function. want put dataarray in var. i've read similar questions , beleive solution use 'async: false' - causing function wait data, , insert in var before proceeding. have several questions surrounding this:

1. firstly, how set 'async: false' using shorthand jquery $.post doing above, rather $.ajax ({ type:'post' }) ? possible? useful know, can't work out or find answer anywhere.

2. i've heard lot of negative comments using 'async: false'. recommend it? if not, how can store data string on page later use? @ moment can see i've set data inserted div (set display:none) strikes me being less ideal, least.

3. why function not wait data inserted var, when set insert data element on page via .html(), works? guess opening door data string spill page in it's own time..? why can't methodology apply inserting data var- why can't door stay open var well? (if see mean!).

apologies rather lengthy question- answers or partial answers points above appreciated. thanks.

edit: here full code (you can ignore data gathering bits, i'll post lot anyway)-

                $('#submit').click(function(){                     $('#input_table').hide(1000);                     if($('.image_info').length){                         var images = [];                         $.each($('.image_info'), function(img_count) {                             var img_code = $(this).attr('class').split(' ').slice(-1);                             images.push('"' + img_count + '"' + ':' + '"' + img_code + '"');                             img_count++;                         });                     images = '{' + images + '}';                     }else {                         var images = 'none';                     }                     var editor = ckeditor.instances.editor1;                     var body = editor.getdata();                     body = clean(body);                     var fielddata = [];                     var cleanvalue ='';                                          $.each($('.field'), function() {                         cleanvalue = clean($(this).val());                         fielddata.push('"' + $(this).attr('id') + '"' + ':' + '"' + cleanvalue + '"');                     });                     fielddata = '{' + fielddata + '}';                     $.post('http://localhost/test_zone/index.php/blog/new_post', { image_codes: images, info: fielddata, post_body: body },                             function(data){                                 if (data.success) {                                     if(data.error != ''){                                             alert(data.error);                                                         }                                     else {                                             $('#preview_wrapper').css('display','none').html(data.posthtml).show(1000);                                             $('#array_store').html(data.dataarray);                                          }                                     }                                 else {                                         alert('sorry, error occurred. no response server.');                                       }                                         }                          ,'json');                     });      

you should not use async, because browser hangs. have done events:

var evobj; var _event_result = "resultevent";  // listen event evobj.bind(_event_result, function(event, data){   alert(data); }  // ajax-request event-triggering $.ajax({     type:       "post",     ...     success:    function(data){                   evobj.trigger(_event_result, data);                 } }); 

the function not waiting because asynchronous. because code not stop , browser not hang. if use ".html()", insert result page if result send server. be, "thinking" working, because result send fasten. if server send result after 10 seconds, have no result in page 10 seconds - but: gui not hang.

edit: try this:

var evobj; var _event_result = "resultevent";  // listen event evobj.bind(_event_result, function(event, data){   alert(data); }  $('#submit').click(function(){   ...   else{     ...     $.post('http://localhost/test_zone/index.php/blog/new_post', {       image_codes: images,       info: fielddata,       post_body: body },       function(data){         if (data.success){           // @ point trigger event           evobj.trigger(_event_result, data);         }         else{           alert('sorry, error occurred. no response server.');         }         ,'json'); });