У меня есть 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"> By Sex </div>
<div class="criteria" name="loc" id="patient_location" style="float:left"> By Location </div>
<div class="criteria" name="type" id="patient_type" style="float:left"> In/Out Patient </div><br />
<br />
</div>
<div id="constraints" align="left">
<br />
Age Range :  
<input type="text" value="0" style="width:30px" name="ageLow" />
to 
<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>
Спасибо!