javascript - Why doesn't my high-chart load on subsequent jquery-ajax call? -

here how passing php array data through jquery ajax , after process on called php script loads succesfully first time further request not showing updated data.

i have 2 questions

1: if load page(mydomain.com/new.php) directly check chart functioning (here manually setting $_post value of $myarray) , loading fast , quick, when called via ajax taking lot of time.? this question know how things works

2: first time loads though taking own time, when again click button call chart, remaining text gets loaded not chart?

mypage.php

<?php         $acoders = array();           $acoders['ed']['age'] = 25;           $acoders['ed']['languages'] = array('php', 'mysql', 'javascript', 'objective-c', 'html', 'css');           $acoders['sarah']['age'] = 25;           $acoders['sarah']['languages'] = array('html', 'css');       ?>  /* html part */ <button type="button" class="btn btn-warning btn-sm pull-right" id="new" >               call graph </button>                <hr />                <div id="wheretoprint"></div> // here graph loads       <br />       <hr />    <script> $(document).ready(function (){ /* check starts*/         var activities = <?php echo json_encode($acoders); ?>;         $('#new').click(function (e){            $("#flash").show();             $("#flash").fadein(400);              $.ajax({                     type: "post",                     url: "new.php",                     data: { activitiesarray : activities },                     cache: false,                     async: false,                     error: function (jqxhr, textstatus, errorthrown) {                         alert('error');                     },                     success: function (data) {                         //alert("new3");                          $('#wheretoprint').fadein(2000).html(data);                         $("#flash").hide();                         }                  });               });           }); </script> 

new.php

<?php  $myarray = $_post['activitiesarray']; 

// other script , db call

?> <script src="js/jquery.js" ></script> <script type="text/javascript"> $(function () {         $('#container').highcharts({             // here script bar chart stacked goes using $myarray values             // working fine             });     });           </script>  <h2>here chart</h2>         <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <script src="highstock-js/highstock.js"></script>  <script src="highstock-js/exporting.js"></script>  <script src="highstock-js/highcharts-more.js"></script> 

output

as remove inexisting pieces of code ( javascript files highstock-js/highstock.js ) , call $('#container').highcharts({}) - not defined in code provided, scripts run , reload fine every time me - every time click button.

however, code provided not enough find out problem may lie.

but in order debug code , find errors - recommend using firefox firebug extension installed or chrome developer tools open (menu -> tools -> developer tools) - check out network tab - see there files load - time take - , check console javascript errors. should easy go there.