javascript - Div does not show on change function but in ajax success it does -

javascript - Div does not show on change function but in ajax success it does -

it's simple thing want do, on alter function want loading div visible, & through ajax request i'm filling content. thing loading div not working in alter function it's working in ajax success function, not know i'm making mistake. please have @ code.

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script> $(document).ready(function(){ $('#sub').change(function(){ $('.autoload').empty(); $('.loading').show(); // here doesn't work var val=$(this).val(); $(this).value= val; if(val=='one'){ var sub_cat=11; } else if(val=='two'){ var sub_cat=12; } else{ var sub_cat=13; } var cat_id= <?php echo $cat_id; ?>; $.ajax({ type: "post", url: "ajax_showsubdiv.php", data: {cat_id:cat_id,sub_cat:sub_cat}, success: function(option){ $('.loading').show(); // here it's working $('.autoload').replacewith(option); flag=false; } }); $('.loading').hide(); }); }); </script>

html

<div class='autoload'></div> <div class='loading'> <img src='acz.gif'> </div>

everything working fine, info coming fine, replacing perfectly, thing takes time show loading div because lies in success function, after ajax request completed, div shows. can tell why it's not working?

the statement $('loading').hide(); @ bottom of alter function executing , hiding element after calling $('loading').show();. since ajax asynchronous browser not wait $.ajax() calls finish before continuing execution. seek removing statement.

javascript ajax