Ajax to load content of another php page

StackOverflow https://stackoverflow.com/questions/17626413

  •  03-06-2022
  •  | 
  •  

Question

I had two seperate code: 1. One form which was showing content of database on button click (form.php) 2. Another php page whoch was showing chart into div retrieving content from mysql database on load. (graph.php)

I am new to ajax. I tried to show chart on another php page's(form.php)div whose code is present in the graph.php.

Problem is graph.php which shows chart on load event uses id of div present in the same page itself(graph.php)to show the graph. How can I load this page in the div present in form.php

form.php

<html><head><script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","graph.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="submit"onclick="showUser(this.value)"/>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

And another page which loads data from db and shows chart using google chart API is graph.php:

<?php
$q=$_GET["q"];
  $mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}

  $result = $mysqli->query('SELECT * FROM new_temp');
  $rows = array();
  $table = array();
  $table['cols'] = array(

    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'sum', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();
      $temp[] = array('v' => (string) $r['ind_type']); 
      $temp[] = array('v' => (int) $r['sum']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // 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 data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
      var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="txtHint"></div>
  </body>
</html>

No correct solution

OTHER TIPS

first you must make all data with json on php file, include jquery on html then use this code : i hope it will help you

HTML 

<form action="graph.php" method="get">
  <input type="text" name="q" />
  <input type="submit"/>
</form>

js

$("form").on("submit", function(){
 $.get($('form').attr('action'), $('form').serialize(), 
     function(result) {
         $("#txtHint").html(result);
      },'json');
 });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top