title: jQUERY refresh PHP file included in <head>
body: <p>I have a php file that dynamically prints a script in the head of my html page. The php will not print anything unless data has been posted. Once I post the data from a form on my page, I want the php file to refresh, printing the script in the head. What I have looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;link href="graph.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;?php include("graph.php"); ?&gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
      $(document).ready(function(){
          //On-load defaults                     
          var critSelected = 'sex';      
          $(".criteria#sex").addClass("criteriaSelected");
  
          //Action for update button
          $("form#update").submit(function() {
              var formData = $("form#update").serialize();
                  $.ajax({
                      type: "POST",
                      url: "graph.php",
                      data: formData + "&amp;criteria=" + critSelected,
                      success: function(data){
                          $('div.graph').fadeOut(function(){$('div.graph').html(data).fadeIn();});
                      }
                  });
              return false;
          });
      });&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="update" method="post"&gt;
  &lt;div class="leftnav" align="center"&gt;
  
      &lt;div id="title" align="center"&gt;
          &lt;select name="graphContent" style="width:150px"&gt;
              &lt;option value="Age Distribution"&gt;Age Distribution&lt;/option&gt;
              &lt;!-- &lt;option value="sex"&gt;Sex Distribution&lt;/option&gt;
              &lt;option value="volvloc"&gt;Volume vs. Location&lt;/option&gt;
              &lt;option value="treatment"&gt;Treatment Distibution&lt;/option&gt; --&gt;
          &lt;/select&gt;
          &lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div id="criteria" align="right"&gt;
          &lt;br /&gt;
          &lt;div class="criteria" name="sex" id="sex" style="float:left"&gt;&amp;nbsp;&amp;nbsp;By Sex&amp;nbsp;&amp;nbsp;&lt;/div&gt;
          &lt;div class="criteria" name="loc" id="patient_location" style="float:left"&gt;&amp;nbsp;&amp;nbsp;By Location&amp;nbsp;&amp;nbsp;&lt;/div&gt;
          &lt;div class="criteria" name="type" id="patient_type" style="float:left"&gt;&amp;nbsp;&amp;nbsp;In/Out Patient&amp;nbsp;&amp;nbsp;&lt;/div&gt;&lt;br /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div id="constraints" align="left"&gt;
          &lt;br /&gt;
          Age Range : &amp;nbsp&amp;nbsp;
          &lt;input type="text" value="0" style="width:30px" name="ageLow" /&gt;
          &amp;nbsp;to&amp;nbsp
          &lt;input type="text" value="110" style="width:30px" name="ageHigh" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          Location : 
          &lt;input type="checkbox" value="TR" name="tr" /&gt;TR 
          &lt;input type="checkbox" value="RO" name="ro" /&gt;RO
          &lt;input type="checkbox" value="Tilch" name="tilch" /&gt;Tilch&lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div class="submit" align="center" style="padding-top:100px"&gt;
      &lt;button type="submit" name="submit"&gt;&lt;b&gt;Update Graph&lt;/b&gt;&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="graph" style="display:none"&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Once the Ajax function finishes the php post, I need success to replace the php include with the updated file. The script that graph.php will generate would look something like this:</p>
  
  <pre><code>&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 data = new google.visualization.DataTable();
      data.addColumn('string', 'Task');
      data.addColumn('number', 'Hours per Day');
      data.addRows(5);
      data.setValue(0, 0, 'Work');
      data.setValue(0, 1, 11);
      data.setValue(1, 0, 'Eat');
      data.setValue(1, 1, 2);
      data.setValue(2, 0, 'Commute');
      data.setValue(2, 1, 2);
      data.setValue(3, 0, 'Watch TV');
      data.setValue(3, 1, 2);
      data.setValue(4, 0, 'Sleep');
      data.setValue(4, 1, 7);
  
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks!</p>