Loading the content of div from another php page and showing using ajax

Question

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.

<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <script type="text/javascript">
        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 && 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
</script>
</head>
<body>
    <form action="ajax_form_temp.php" method="post" onsubmit="viewChart(this, event)" />
    <h4>CLICK TO VIEW CHART</h4>
    <input type="submit" class="submit" value="submit" name="view"/>
   </form>

    <br />
    <div id="txtHint">
        <b>Person info will be listed here.</b>
    </div>
</body>
</html>

and ajax_form_temp.php is:

<html>
  <head>
    <!--Load the Ajax API-->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <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 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);
    }
    </script>
  </head>

  <body>

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

  </body>
</html>

It shows graph by redirecting to the page wihout using ajax but does not shows in ajax_form.php when ajax is used!

You're already using jQuery, so why are you writing your own AJAX handler? It has this functionality built-in: api.jquery.com/load — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 16, 2013 at 15:37
@Diodeus: I am new to ajax and jquery, so dont know where I am making mistake, it would be highly appreciable if you can point out where is the issue! — user123
– user123, Commented Jul 16, 2013 at 17:52

Christian Bekker · Accepted Answer · 2013-07-16 15:40:04Z

1

Somthing like $('#PutInToThisDiv').load('FromThisPage.php #FromThisDiv');

answered Jul 16, 2013 at 15:40

Christian Bekker

1,8675 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user123 Over a year ago

I tried by keeping $('#txtHint').load('ajax_form_temp.php #chart_div'); into ajax_form before xmlhttp.open() but it makes no action on button click!

Christian Bekker Over a year ago

Are you using Chrome? if yes, then press F12 and click console. then re-run the page, and see if you get any errors

user123 Over a year ago

@Chrisitan: It was not about chrome. Code it self having some issue. I am using firefox for testing!

Christian Bekker Over a year ago

I know its not browser specific problem, but chrome has a console, to see fx. javascript errors (FF might have one too)... like your problem with not loading the google api... it would have shown up there, and you would have saved alot of time..

user123 Over a year ago

thanks a lot. I will see it all the time now onwards! Upvote my answer if you like it!

user123 · Accepted Answer · 2013-07-18 07:25:01Z

I completed it: I was getting failure because I could not load google api and other packages properly. Once i did it, it worked fine.

 <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">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);

Here is entire code, would be helpful to other:

<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <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">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawVisualization(dataFromAjax) {

    var jsonData = $.ajax({
          url: "ajax_graph_temp.php",
          dataType:"json",
          async: false
          }).responseText;
    var data = new google.visualization.DataTable(jsonData);
        var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
        var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
        chart.draw(data, options);
         }
   function makeAjaxCall() {
      $.ajax({url:'test.php',
              data: {},
              success: function(responseData) {
                         drawVisualization();
                       }
        });
    }
    </script>
    <script type="text/javascript">
        //------------------script 2 starts ---------
    function showUser(form, e) {
        e.preventDefault();
        e.returnValue=false;
        var xmlhttp;
        var submit = form.getElementsByClassName('submit')[0];
        var sent = form.elements['sent'].value;
    var id = form.elements['id'].value;

        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
       xmlhttp.onreadystatechange = function(e) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open(form.method, form.action, true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        xmlhttp.send('sent=' + sent + '&id=' + id + '&' + submit.name + '=' + submit.value);
    }

</script>
</head>
<body>
    <h4>INSERT</h4>
    <form action="db_process.php" method="POST" onsubmit="showUser(this, event)">
        <pre>
             <label>Enter the sentence: <input type="text" name="sent"></label><br/>
        </pre>
                <input type="submit" class="submit" name="insert" value="submit"/>
        <input type="" name="id" style="display: none"/>
    </form>

    <h4>UPDATE</h4>
    <form action="db_process.php" method="POST" onsubmit="showUser(this, event)">
        <pre>
            <label>Enter the ID:        </label><input type="text" name="id"><br>
            <label>Enter the sentence:  <input type="text" name="sent"></label><br />
        </pre>
        <input type="submit" class="submit" value="submit" name="update"/>
    </form>

    <form action="ajax_form_temp.php" method="post" onsubmit="viewChart(this, event)" />
    <h4>CLICK TO VIEW CHART</h4>
<input type="button" onclick="makeAjaxCall();return false;" value="View Graph"></input>
   </form>

    <br />
    <div id="txtHint">
        <b>Data will be shown here</b>
    </div>
</body>
</html>

ajax_temp_form.php sending json data:

<?php
$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_view');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'ind_type', 'type' => 'string'),
    array('label' => 'Index_val', '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['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>

Collectives™ on Stack Overflow

Loading the content of div from another php page and showing using ajax

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related