title: How to get HtmlUnit to update page after javascript has finished
body: <p>I am trying to load the contents of a div which changes when a listener is triggered.</p>
  
  <p>The java code I currently have is:</p>
  
  <pre><code>public static void main(String arg[]) throws IOException{
      String url = "http://localhost/chartsTest/test.html";
      WebClient wc = new WebClient();
  
      HtmlPage p = null;
      try {
          System.out.println("Attempting to load page: " + url);
          p = wc.getPage(url);
          System.out.println("Sucsess!");
      } catch (Exception e) {
          System.err.println("Failed to get page");
      }
  
      JavaScriptJobManager m = p.getEnclosingWindow().getJobManager();
      int c;
      while ((c = m.getJobCount()) &gt; 0){
          System.out.println("Jobs: " + c);
          try {
              Thread.sleep(1000);
          } catch (InterruptedException e) {}
      }
  
      div = p.getHtmlElementById("test");
      content = div.asText();
      System.out.println(content);
  
      wc.close();
  }
  </code></pre>
  
  <p>and my <code>test.html</code> page (which loads a google chart) is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          google.load("visualization", '1', {packages:['corechart']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
  
              // var query = new google.visualization.Query('simpleexample?tq=select name,population');
              // query.send(handleSimpleDsResponse);
              handleSimpleDsResponse(true);
  
              function handleSimpleDsResponse(response) {
  
                  // var data = response.getDataTable();
                  var data = google.visualization.arrayToDataTable([
                      ['Year', 'Sales', 'Expenses'],
                      ['2013',  1000,      400],
                      ['2014',  1170,      460],
                      ['2015',  660,       1120],
                      ['2016',  1030,      540]
                  ]);
  
  
                  var chart_div = document.getElementById('chart_div');
                  var chart_data = document.getElementById('chart_data');
                  var test = document.getElementById('test');
                  var chart = new google.visualization.AreaChart(chart_div);
  
                  // Wait for the chart to finish drawing before calling the getImageURI() method.
                  google.visualization.events.addListener(chart, 'ready', function () {
                      chart_div.innerHTML = '&lt;img src="' + chart.getImageURI() + '"&gt;';
                      chart_data.innerHTML = chart.getImageURI();
                      test.innerHTML = "after";
                  });
  
                  chart.draw(data);
              }
  
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="test"&gt;before&lt;/div&gt;
  
      &lt;div id='chart_div'&gt;&lt;/div&gt;
  
      &lt;div id="chart_data"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but when I print the div it always equals <code>before</code> and not <code>after</code>. How can I get the value for after the chart has finished loading?</p>