jQUERY刷新<;头部>;


jQUERY refresh PHP file included in <head>

我有一个php文件,它可以在html页面的头部动态打印脚本。php不会打印任何内容,除非数据已经发布。一旦我在页面上发布了表单中的数据,我就希望php文件刷新,在头部打印脚本。我看到的是这样的:

<!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>

Ajax函数完成php发布后,我需要成功地用更新的文件替换php-include。graph.php将生成的脚本如下所示:

<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>

谢谢!

你不能在这里做你想要做的事情。看起来您想要在中重新加载javascript并执行它。它不会那样做。即使您将新的html ajax到页面主体中,放置在该html中的javascript也不会像在正常页面加载中那样执行。您应该在响应中发回一些json数据,并将其发送到最初加载的javascript函数。该函数应该输出您的新图表。