CODEWITHSUNDEEP
phpjqueryajax
meburbo
meburbo

Reputation: 590

jQUERY refresh PHP file included in <head>

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="graph.css" rel="stylesheet" type="text/css" />

    <?php include("graph.php"); ?>
<script src="jquery.js"></script>
<script type="text/javascript"> 
    $(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 + "&criteria=" + critSelected,
                    success: function(data){
                        $('div.graph').fadeOut(function(){$('div.graph').html(data).fadeIn();});
                    }
                });
            return false;
        });
    });</script>
</head>

<body>
<form id="update" method="post">
<div class="leftnav" align="center">

    <div id="title" align="center">
        <select name="graphContent" style="width:150px">
            <option value="Age Distribution">Age Distribution</option>
            <!-- <option value="sex">Sex Distribution</option>
            <option value="volvloc">Volume vs. Location</option>
            <option value="treatment">Treatment Distibution</option> -->
        </select>
        <br />
        <br />
    </div>

    <div id="criteria" align="right">
        <br />
        <div class="criteria" name="sex" id="sex" style="float:left">&nbsp;&nbsp;By Sex&nbsp;&nbsp;</div>
        <div class="criteria" name="loc" id="patient_location" style="float:left">&nbsp;&nbsp;By Location&nbsp;&nbsp;</div>
        <div class="criteria" name="type" id="patient_type" style="float:left">&nbsp;&nbsp;In/Out Patient&nbsp;&nbsp;</div><br />
        <br />
    </div>

    <div id="constraints" align="left">
        <br />
        Age Range : &nbsp&nbsp;
        <input type="text" value="0" style="width:30px" name="ageLow" />
        &nbsp;to&nbsp
        <input type="text" value="110" style="width:30px" name="ageHigh" />
        <br />
        <br />
        Location : 
        <input type="checkbox" value="TR" name="tr" />TR 
        <input type="checkbox" value="RO" name="ro" />RO
        <input type="checkbox" value="Tilch" name="tilch" />Tilch<br />
    </div>

    <div class="submit" align="center" style="padding-top:100px">
    <button type="submit" name="submit"><b>Update Graph</b></button>
    </form>
    </div>


</div>

<div class="graph" style="display:none">
    <div id="chart_div"></div>
</div>

</body>

</html>

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:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  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'});
  }
</script>

Thanks!

Upvotes: 0

Views: 954

Answers (1)

Jage
Jage

Reputation: 8096

You can't do what you're going for here. It looks like you want to reload javascript in your and have it execute. It will not do that. Even if you ajax new html into the body of your page, javascript that is placed inside that html will not execute like it would on a normal page load. You should send back some json data in the response and send that to a javascript function that is loaded initially. That function should output your new chart.

Upvotes: 1

Related Questions