Show the after the loading of its child from external PHP script is finished

I am trying to create a dynamically generated chart in my PHP page. It works fine but I want to control the display such that the div containing the chart only shows after the chart finished loading.

HTML:

<div id="ViewsChartContainer">

   /* ... */            
      
   <div id="ViewsChart">
   </div>

</div>

JavaScript:

$("#MyButton").on('click', function(){
   // hide the div
   $("#ViewsChartContainer").hide();

   // loading from PHP
   $('#ViewsChart').load(
      'UserStats/DrawLineChart.php', 
      {
         'project_id_arr': JSON.stringify(totalSelectedPrjIdArr), 
         'start_date': startDate,
         'end_date': endDate
      }
   ).fadeIn("slow");

   // show the div
   $("#ViewsChartContainer").show();
});

‘UserStats/DrawLineChart.php’ is just generating a canvas element, if you need I could provide the codes.

1. I have tried putting the JS code inside an async function and call await, but it is not doing anything.

   $("#MyButton").on('click', async function(){
      $("#ViewsChartContainer").hide();
   
      await $('#ViewsChart').load(
         /* ... */
      ).fadeIn('slow');
   
      $("#ViewsChartContainer").show();
   });
   

2. I cannot use $(document).ready({}) because it is triggered on button click.

3. The only thing that’s working is setTimeout

   $("#MyButton").on('click', function(){
      $("#ViewsChartContainer").hide();
   
      $('#ViewsChart').load(
         /* ... */
      ).fadeIn("slow");
   
      setTimeout(() => {
         $("#ViewsChartContainer").show();
      }, 2000);
   });
   

But it is hardcoded timing so I can’t help thinking if there is a better way to do it. Kindly let me know if this is the only way to achieve this effect as well.

Answer

.load() comes with a callback. So you can change your code to the following and it should work.

$("#MyButton").on('click', function(){
   $("#ViewsChartContainer").hide();

   $('#ViewsChart').load(
      /* ... */
   , () => {
       $("#ViewsChartContainer").show();
   }).fadeIn('slow');
});

See https://api.jquery.com/load/

I believe when you were thinking of using async you were assuming it was using a promise. It is not, so async will have no effect. Before promises became a thing, the standard practice was to use callbacks (functions that are triggered when the operation is complete). Here is an article that gives some more information: here.