title: Loading the content of div from another php page and showing using ajax
body: <p>I am trying to show the cotent of div in ajax_form page which shows google chart in its div.
  What ever content I put in body part of ajax_form.php page could be seen through ajax but not the chart only.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html;charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;meta content="utf-8" http-equiv="encoding" /&gt;
      &lt;script type="text/javascript"&gt;
          function viewChart(form, e){
          e.preventDefault();
              e.returnValue=false;    
              var xmlhttp;
  
          if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
          else{// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
      xmlhttp.onreadystatechange=function(){
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
              document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
              }
      }
  
      alert("hi");
      xmlhttp.open(form.method, form.action, true);
          xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
          xmlhttp.send();
  }
  
         //------------------Chart function end
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action="ajax_form_temp.php" method="post" onsubmit="viewChart(this, event)" /&gt;
      &lt;h4&gt;CLICK TO VIEW CHART&lt;/h4&gt;
      &lt;input type="submit" class="submit" value="submit" name="view"/&gt;
     &lt;/form&gt;
  
      &lt;br /&gt;
      &lt;div id="txtHint"&gt;
          &lt;b&gt;Person info will be listed here.&lt;/b&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and ajax_form_temp.php is:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!--Load the Ajax API--&gt;
      &lt;meta content="text/html;charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;meta content="utf-8" http-equiv="encoding" /&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});
  
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
  
      function drawChart() {
  
      var jsonData = $.ajax({
            url: "ajax_graph_temp.php",
            dataType:"json",
            async: false
            }).responseText;
  
  
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
        var options = {
             title: 'Index analysis',
            is3D: 'true',
            width: 800,
            height: 600
          };
        // Instantiate and draw our chart, passing in some options.
        // Do not forget to check your div ID
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!--this is the div that will hold the pie chart--&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It shows graph by redirecting to the page wihout using ajax but does not shows in ajax_form.php when ajax is used!</p>