1
私はユーザーが時間、日、週、月までにグラフをフィルタリングできるようにするWebサイトを作成しています。だから私はいくつかのボタンを置いて、彼らが望むものを選ぶことができると思った。今では、ページを更新する必要はありません。グラフを画面で更新したいだけです。だからここに私はそれが1つのPHPファイルのすべてです。AJAXボタンフィルタ更新コード更新（新しいコードを参照）
1）私のボタンが、この場合には、それは常に関係なく、私がクリックし何時間を返さないように宣言最初のものは何でもボタンのみを返すかを選択します。
私は2つの問題があります。
2）私がボタンを選択すると、更新をレンダリングするためにページのその部分をリロードする必要があると思いますか？私はAJAXや何かを実際に使用していないことは確かではありません。多かれ少なかれストリングを一緒にしようとする。
<?php
include("chartsphp4free/lib/inc/chartphp_dist.php");
$p = new chartphp();
if(strcmp($_POST["filter"],"hour")==0){
//hour
$sql = "select for hour";
$result = $conn->query($sql);
}
if(strcmp($_POST["filter"],"day")==0){
//day
$sql = "select for day";
$result = $conn->query($sql);
}
if(strcmp($_POST["filter"],"week")==0){
//week
$sql = "select for week";
$result = $conn->query($sql);
}
if(strcmp($_POST["filter"],"month")==0){
//month
$sql = "select for month";
$result = $conn->query($sql);
}
if ($result->num_rows > 0) {
$dataStuff = [];
while($row = $result->fetch_assoc()) {
$holder = array($row["time"],$row["clicks"]);
array_push($dataStuff,$holder);
}
$p->data = array($dataStuff);
}
$p->chart_type = "line";
$out = $p->render('c1');
?>
<!DOCTYPE html>
<html>
<head>
<script src="chartsphp4free/lib/js/jquery.min.js"></script>
<script src="chartsphp4free/lib/js/chartphp.js"></script>
<link rel="stylesheet" href="chartsphp4free/lib/js/chartphp.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" action="testGraph.php" title="" method="post">
<div>
<input type="submit" id="submitButton" name="Hour" value="Hour" >
<input type="submit" id="submitButton" name="Day" value="Day" >
<input type="submit" id="submitButton" name="Week" value="Week" >
<input type="submit" id="submitButton" name="Month" value="Month" >
</div>
</form>
<div style="width:40%; min-width:450px;">
<?php echo $out; ?>
</div>
</body>
</html>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $(this),
url = $form.attr('action');
/* Send the data using post with element id name and name2*/
var posting = $.post(url, { filter: $('#submitButton').val() });
alert($('#submitButton').val());
/* Alerts the results */
posting.done(function(data) {
alert('success');
});
});
</script>
コードの更新：ボタンが機能し、正しい値が表示されますが、グラフは更新されません。私は内側のHTMLを更新しようとしましたが、それは私にPHPのエコーでエラーを与えます。これに関する考え。
<?php
include("chartsphp4free/lib/inc/chartphp_dist.php");
$p = new chartphp();
if(isset($_POST["filter"])){
echo $_POST["filter"];
}
if(!isset($_POST["filter"]))
{
$sql = "SELECT COUNT(timeClicked) as clicks, o_ID, EXTRACT(hour from timeClicked) as time FROM adTracker GROUP BY o_ID, time";
$result = $conn->query($sql);
}
//hour
if(strcmp($_POST["filter"],"hour")==0)
{
$sql = "SELECT gour";
$result = $conn->query($sql);
}
//day
if(strcmp($_POST["filter"],"day")==0)
{
$sql = "SELECT day";
$result = $conn->query($sql);
}
//week
if(strcmp($_POST["filter"],"week")==0)
{
$sql = "SELECT week";
$result = $conn->query($sql);
}
//month
if(strcmp($_POST["filter"],"month")==0)
{
$sql = "SELECT month";
$result = $conn->query($sql);
}
if ($result->num_rows > 0) {
$dataStuff = [];
while($row = $result->fetch_assoc()) {
$holder = array($row["time"],$row["clicks"]);
array_push($dataStuff,$holder);
}
$p->data = array($dataStuff);
}
$p->chart_type = "line";
// Common Options
$p->title = "Chris and Wyn Test";
$p->ylabel = "Clicks";
$p->xlabel = "Hour";
$p->options["axes"]["yaxis"]["tickOptions"]["prefix"] = '';
$out = $p->render('c1');
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="chartsphp4free/lib/js/jquery.min.js"></script>
<script src="chartsphp4free/lib/js/chartphp.js"></script>
<link rel="stylesheet" href="chartsphp4free/lib/js/chartphp.css">
</head>
<body>
<form id="formoid" action="testGraph.php" title="" method="post">
<div>
<input type="submit" class="submitButton" name="Hour" value="Hour" >
<input type="submit" class="submitButton" name="Day" value="Day" >
<input type="submit" class="submitButton" name="Week" value="Week" >
<input type="submit" class="submitButton" name="Month" value="Month" >
</div>
</form>
<div id= "graph1" style="width:40%; min-width:450px;">
<?php echo $out; ?>
</div>
</body>
<script type='text/javascript'>
/* attach a submit handler to the form */
$(".submitButton").click(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $('#formoid'),
url = $form.attr('action');
/* Send the data using post with element id name and name2*/
var posting = $.post(url, { filter: $(this).val() });
/* Alerts the results */
alert($(this).val());
posting.done(function(data) {
alert('success');
document.getElementById("graph1").innerHTML = '<?php echo $out; ?>';
});
});
</script>
idは – brk
一意である必要がありますが、4つのボタンを持っているが、 '、ID = "のsubmitButton"' 'ID ="で、すべての定義します？ "は、データベース上のユニークなキーのようにページ上でユニークでなければなりません。 Swordmanが言っているように**ただ1つしかありえない**基本的なHTMLルールそのもの – RiggsFolly
あなたのブラウザのjavascriptデバッガ（コンソール）を見てください。 – RiggsFolly