AJAX มีปัญหาเรื่องการเรียกข้อมูลมาแล้วไม่ขึ้นครับ มัน Refresh page ครับ แก้ไขยังไงครับ
Code (PHP)
ผมอยากกดปุ่ม แล้วดึงข้อมูลจากหน้า get_data1.php มาโชว์อะครับ
โค๊ด หน้า Mat_history.php ครับ
<?php
require_once("connect.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css">
<script type="text/javascript" src="css/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<title>Tokyo Seisakusho(Asia)</title>
<!-- Font Awesome Icons -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="css/creative.min.css" rel="stylesheet">
<style>
.header {
padding: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#form2").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: "get_data1.php",
data: form.serialize(),
success: function(response){
$("#txtHint").html(response);
}
});
});
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<?php
include_once("navbar.php")
?>
<header class="masthead">
<div class="container h-50">
<form name="form2" method="POST" id="about" class="center_div container">
<div class="form-row">
<div class="form-group col-md-12">
<br>
<label for="mat_name">Material Name</label>
<select id="mat_name" name="mat_name" class="form-control">
<option value="">เลือกวัตถุดิบ</option>
<?php
$strSQL = "SELECT id_mat,mat_name FROM mat_data";
$objQuery = mysqli_query($con, $strSQL);
while ($objResult = mysqli_fetch_array($objQuery)) {
?>
<option value="<?php echo $objResult["id_mat"]; ?>"><?php echo $objResult["mat_name"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-9">
<label for="mat_type">Material Type</label>
<select id="mat_type" name="mat_type" class="form-control">
<option value="">เลือกประเภท</option>
<?php
$strSQL = "SELECT id_type,type_name FROM mat_type ";
$objQuery = mysqli_query($con, $strSQL);
while ($objResult = mysqli_fetch_array($objQuery)) {
?>
<option value="<?php echo $objResult["id_type"]; ?>"><?php echo $objResult["type_name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="form-group col-md-3 gg">
<label for="gg">Status</label><br>
<input name="rdoSex" type="radio" value="2">IN
<input name="rdoSex" type="radio" value="1">OUT
<input name="rdoSex" type="radio" value="3" checked>BOTH
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="startdate">Activity Date </label>
<input type="text" name="startdate" value="<?php echo date("Y/m/d"); ?>" id="startdate" class="startdate"/> To
<script type="text/javascript">
jQuery('#startdate').datepicker({
dateFormat: 'yy/mm/dd'
});
</script>
<input type="text" name="enddate" value="<?php echo date("Y/m/d"); ?>" id="enddate" class="enddate"/><br>
<script type="text/javascript">
jQuery('#enddate').datepicker({
dateFormat: 'yy/mm/dd'
});
</script>
</div>
</div>
<button type="submit" class="btn btn-primary" id="fr" name="fr" value="1">Search</button>
</form><br>
</div><br><br>
<div class="container">
<br>
<div id="txtHint"><b></b></div>
</div>
</header>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
</body>
</html>
โค๊ดหน้า get_data1.php ครับ
Code (PHP)
<?php
if (!empty($_POST["mat_name"])) {
$q = "AND mat_data.id_mat = " . $_POST["mat_name"] . "";
} else {
$q = "";
}
if (!empty($_POST["startdate"])) {
if (!empty($_POST["enddate"])) {
$l = "AND DATE(mat_tranfer.tranfer_date) BETWEEN '". $_POST["startdate"] . "' AND '". $_POST["enddate"] . "'";
} else {
$l = "AND DATE(mat_tranfer.tranfer_date) = '". $_POST["startdate"] . "'";
}
} else {
$l = "";
}
if (!empty($_POST["mat_type"])) {
$j = "AND mat_data.id_type = " . $_POST["mat_type"] . "";
} else {
$j = "";
}
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 3) {
$k = "";
} else {
$k = "AND mat_tranfer.tranfer_flg = " . $_POST["rdoSex"] . "";
}
} else {
$k = "";
}
$strSQL = "SELECT mat_name,
SUM(tranfer_out) as total_out,SUM(tranfer_in) as total_in
FROM mat_tranfer
JOIN mat_data
ON mat_tranfer.id_mat = mat_data.id_mat
WHERE del_tr_flg = 0 ".$j." ".$l." ".$q." " . $k . "
GROUP BY mat_name";
$dataPoints = array();
$dataPoints1 = array();
$objQuery = mysqli_query($con, $strSQL) or die("Error Query [" . $strSQL . "]");
while ($objResult = mysqli_fetch_array($objQuery)) {
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 1) {
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_out"] );
} elseif ($i == 2) {
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_in"] );
} elseif ($i == 3){
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_in"] );
$dataPoints1[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_out"] );
}
} else {
}
}
?>
<script>
window.onload = function () {
var gg = "";
var i = document.querySelector('input[name="rdoSex"]:checked').value ;
if (i == 1){
gg = "Material Out";
}else if (i == 2){
gg = "Material In";
}else if (i == 3){
gg = "Material In-Out";
}
if (i == 3) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: gg
},
axisY: {
title: "UNIT",
includeZero: false
},
axisY2: {
title: "OUT",
includeZero: false
},
toolTip: {
shared: true
},
data: [{
type: "column",
name: "In",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
},
{
type: "column",
name: "Out",
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
}
]
});
chart.render();
}else{
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: gg
},
axisY: {
title: "Number of Unit Picking",
includeZero: false
},
data: [{
type: "column",
name: "In",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
}
</script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<?php
if (!empty($_POST["fr"])) {
if ($_POST["fr"] == 1) {
$q = "";
$j = "";
$k = "";
if (!empty($_POST["mat_name"])) {
$q = "AND mat_data.id_mat = " . $_POST["mat_name"] . "";
} else {
$q = "";
}
if (!empty($_POST["mat_type"])) {
$j = "AND mat_data.id_type = " . $_POST["mat_type"] . "";
} else {
$j = "";
}
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 3) {
$k = "";
} else {
$k = "AND mat_tranfer.tranfer_flg = " . $_POST["rdoSex"] . "";
}
} else {
$k = "";
}
if (!empty($_POST["startdate"])) {
if (!empty($_POST["enddate"])) {
$l = "AND DATE(mat_tranfer.tranfer_date) BETWEEN '". $_POST["startdate"] . "' AND '". $_POST["enddate"] . "'";
} else {
$l = "AND DATE(mat_tranfer.tranfer_date) = '". $_POST["startdate"] . "'";
}
} else {
$l = "";
}
$strSQL = "SELECT (SELECT mat_name FROM mat_data WHERE mat_tranfer.id_mat = mat_data.id_mat)as mat,
bfbalance,
tranfer_in,
tranfer_out,
balance,
(SELECT concat(fname,' ',lname) FROM pic_data WHERE mat_tranfer.id_pic_need = pic_data.id_pic) as pic,
tranfer_date,
(SELECT FORMAT(SUM((tranfer_in*inv_price)),'N2') FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv) as price_in,
(SELECT FORMAT(SUM((tranfer_out*inv_price)),'N2') FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv) as price_out,
(SELECT invoice FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv)as invoice,
(SELECT inv_price FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv)as inv_price
FROM mat_tranfer
JOIN mat_data
ON mat_tranfer.id_mat = mat_data.id_mat
WHERE del_tr_flg = 0 " . $q . " " . $j . " " . $k . " ".$l."";
$objQuery = mysqli_query($con, $strSQL) or die("Error Query [" . $strSQL . "]");
?>
<form name="form2" action="exportcsvHis.php" method="post" id="about" class="center_div container">
<input type="text" name="sql" class="sql" id="sql" hidden value="<?php echo $strSQL; ?>">
<button type="submit" class="btn btn-primary" value="">Export Excel</button>
</form><br>
<?php
echo "<table class='table table-bordered table-striped table-hover'><tr class='thead-dark'><th>Material Name</th><th>B/F Balance</th><th>IN</th><th>Price_In</th><th>OUT</th><th>Price_Out</th><th>BALANCE</th><th>PICK PIC</th><th>invoice</th><th>Date</th></tr>";
while ($objResult = mysqli_fetch_array($objQuery)) {
echo "<tr >
<td>" . $objResult["mat"] . "</td>
<td>" . $objResult["bfbalance"] . "</td>
<td>" . $objResult["tranfer_in"] . "</td>
<td>" . $objResult["price_in"] . "</td>
<td>" . $objResult["tranfer_out"] . "</td>
<td>" . $objResult["price_out"] . "</td>
<td>" . $objResult["balance"] . "</td>
<td>" . $objResult["pic"] . "</td>
<td>" . $objResult["invoice"] . "</td>
<td>" . $objResult["tranfer_date"] . "</td>
</tr>";
}
echo "</table>";
}
}
?>
Tag : PHP, MySQL, Ajax, jQuery, XAMPP, Windows
ประวัติการแก้ไข 2019-06-14 14:28:48 2019-06-14 14:35:23
Date :
2019-06-14 14:18:59
By :
realizejoke
View :
1336
Reply :
10
$("#form2").submit(function(e) {
.....
.....
.....
return false; เพิ่มตรงนี้เข้าไป
});
คือ event submit มันทำงาน โดยการเปลี่ยนหน้าเพจครับ ถ้าไม่อยากให้มันเปลี่ยนหน้าเพจ
เมื่อทำงานเสร็จแล้ว คุณต้อง ส่งค่า cancel ด้วยการส่งค่า false กลับไปด้วย
แต่ที่นิยมกันจริงๆ ก็คือการใช้ type button แทน type submit ลองอ่าน document ดูความแตกต่าง ของมันดูครับ
ปล. มันมีรายละเอียดของการ ประกาศ form ด้วยนะครับ
Date :
2019-06-14 14:39:24
By :
Chaidhanan
ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2019-06-14 14:39:24
รายละเอียดของการตอบ ::
เปลี่ยนมาใช้ Button onlclick แล้วครับ แต่มีปัญหาใหม่คือ
เหมือน ข้อมูลจาก PHP ไม่เข้า ไปใน script อ่ะครับต้องแก้ยังไงหรอครับ
Code (PHP)
<?php
require_once("connect.php");
$rdo = $_POST["rdoSex"];
if (!empty($_POST["mat_name"])) {
$q = "AND mat_data.id_mat = " . $_POST["mat_name"] . "";
} else {
$q = "";
}
if (!empty($_POST["startdate"])) {
if (!empty($_POST["enddate"])) {
$l = "AND DATE(mat_tranfer.tranfer_date) BETWEEN '". $_POST["startdate"] . "' AND '". $_POST["enddate"] . "'";
} else {
$l = "AND DATE(mat_tranfer.tranfer_date) = '". $_POST["startdate"] . "'";
}
} else {
$l = "";
}
if (!empty($_POST["mat_type"])) {
$j = "AND mat_data.id_type = " . $_POST["mat_type"] . "";
} else {
$j = "";
}
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 3) {
$k = "";
} else {
$k = "AND mat_tranfer.tranfer_flg = " . $_POST["rdoSex"] . "";
}
} else {
$k = "";
}
$strSQL = "SELECT mat_name,
SUM(tranfer_out) as total_out,SUM(tranfer_in) as total_in
FROM mat_tranfer
JOIN mat_data
ON mat_tranfer.id_mat = mat_data.id_mat
WHERE del_tr_flg = 0 ".$j." ".$l." ".$q." " . $k . "
GROUP BY mat_name";
$dataPoints = array();
$dataPoints1 = array();
$objQuery = mysqli_query($con, $strSQL) or die("Error Query [" . $strSQL . "]");
while ($objResult = mysqli_fetch_array($objQuery)) {
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 1) {
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_out"] );
} elseif ($i == 2) {
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_in"] );
} elseif ($i == 3){
$dataPoints[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_in"] );
$dataPoints1[] = array("label"=>$objResult["mat_name"],"y"=>$objResult["total_out"] );
}
} else {
}
}
?>
<script>
function cht () {
var gg = "";
var i = <?php echo json_encode($rdo,JSON_NUMERIC_CHECK) ?>;
if (i == 1){
gg = "Material Out";
}else if (i == 2){
gg = "Material In";
}else if (i == 3){
gg = "Material In-Out";
}
if (i == 3) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: gg
},
axisY: {
title: "UNIT",
includeZero: false
},
axisY2: {
title: "OUT",
includeZero: false
},
toolTip: {
shared: true
},
data: [{
type: "column",
name: "In",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
},
{
type: "column",
name: "Out",
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
}
]
});
chart.render();
}else{
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: gg
},
axisY: {
title: "Number of Unit Picking",
includeZero: false
},
data: [{
type: "column",
name: "In",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
}
cht();
</script>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<?php
if (!empty($_POST["fr"])) {
if ($_POST["fr"] == 1) {
$q = "";
$j = "";
$k = "";
if (!empty($_POST["mat_name"])) {
$q = "AND mat_data.id_mat = " . $_POST["mat_name"] . "";
} else {
$q = "";
}
if (!empty($_POST["mat_type"])) {
$j = "AND mat_data.id_type = " . $_POST["mat_type"] . "";
} else {
$j = "";
}
if (!empty($_POST["rdoSex"])) {
$i = $_POST["rdoSex"];
if ($i == 3) {
$k = "";
} else {
$k = "AND mat_tranfer.tranfer_flg = " . $_POST["rdoSex"] . "";
}
} else {
$k = "";
}
if (!empty($_POST["startdate"])) {
if (!empty($_POST["enddate"])) {
$l = "AND DATE(mat_tranfer.tranfer_date) BETWEEN '". $_POST["startdate"] . "' AND '". $_POST["enddate"] . "'";
} else {
$l = "AND DATE(mat_tranfer.tranfer_date) = '". $_POST["startdate"] . "'";
}
} else {
$l = "";
}
$strSQL = "SELECT (SELECT mat_name FROM mat_data WHERE mat_tranfer.id_mat = mat_data.id_mat)as mat,
bfbalance,
tranfer_in,
tranfer_out,
balance,
(SELECT concat(fname,' ',lname) FROM pic_data WHERE mat_tranfer.id_pic_need = pic_data.id_pic) as pic,
tranfer_date,
(SELECT FORMAT(SUM((tranfer_in*inv_price)),'N2') FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv) as price_in,
(SELECT FORMAT(SUM((tranfer_out*inv_price)),'N2') FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv) as price_out,
(SELECT invoice FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv)as invoice,
(SELECT inv_price FROM inv_data WHERE inv_data.id_inv = mat_tranfer.id_inv)as inv_price
FROM mat_tranfer
JOIN mat_data
ON mat_tranfer.id_mat = mat_data.id_mat
WHERE del_tr_flg = 0 " . $q . " " . $j . " " . $k . " ".$l."";
$objQuery = mysqli_query($con, $strSQL) or die("Error Query [" . $strSQL . "]");
?>
<form name="form2" action="exportcsvHis.php" method="post" id="about" class="center_div container">
<input type="text" name="sql" class="sql" id="sql" hidden value="<?php echo $strSQL; ?>">
<button type="submit" class="btn btn-primary" value="">Export Excel</button>
</form><br>
<?php
echo "<table class='table table-bordered table-striped table-hover'><tr class='thead-dark'><th>Material Name</th><th>B/F Balance</th><th>IN</th><th>Price_In</th><th>OUT</th><th>Price_Out</th><th>BALANCE</th><th>PICK PIC</th><th>invoice</th><th>Date</th></tr>";
while ($objResult = mysqli_fetch_array($objQuery)) {
echo "<tr >
<td>" . $objResult["mat"] . "</td>
<td>" . $objResult["bfbalance"] . "</td>
<td>" . $objResult["tranfer_in"] . "</td>
<td>" . $objResult["price_in"] . "</td>
<td>" . $objResult["tranfer_out"] . "</td>
<td>" . $objResult["price_out"] . "</td>
<td>" . $objResult["balance"] . "</td>
<td>" . $objResult["pic"] . "</td>
<td>" . $objResult["invoice"] . "</td>
<td>" . $objResult["tranfer_date"] . "</td>
</tr>";
}
echo "</table>";
}
}
?>
Date :
2019-06-14 15:50:13
By :
realizejoke
วิวซอร์ส บันทัดนี้จาก browser มาดูก่อนไหมครับ เน้นนะครับ จาก browser
จะได้รู้ว่ามันได้ค่าอะไรมา และจะได้เขียน if else ได้ถูกต้อง
var i = <?php echo json_encode($rdo,JSON_NUMERIC_CHECK) ?>;
if (i == 1){
Date :
2019-06-14 16:19:48
By :
Chaidhanan
onclick ตรงไหนผมหาไม่เห็นมี?
Date :
2019-06-14 16:20:45
By :
mr.v
ใช่เหรอ ครับ มัน มี $dataPoints ตรงไหน
var i = <?php echo json_encode($rdo,JSON_NUMERIC_CHECK) ?>;
if (i == 1){
Undefined variable: dataPoints
แต่ก็ต้องแก้ไขเหมือนกัน เพราะมันหา ตัวแปร $dataPoint ไม่เจอ สรุปคือผิดหลายแห่งเรื่องการใช้ ตัวแปร
Date :
2019-06-14 16:26:43
By :
Chaidhanan
แก้ได้แล้วครับ ตรง <input id="rdoSex" name="rdoSex" type="radio" value="2">IN ผมลืมใส่ Tag ID เพราะตรงเรียกตัวแปรมันดึงค่าแบบ ID
Date :
2019-06-14 16:58:45
By :
realizejoke
รอง เขียนตรวจสอบแบบนี้ดู
Code (PHP)
$rdo = isset($_POST["rdoSex"]) ? trim($_POST["rdoSex"]) : '';
if($rdo==''){
echo 'not found rdoSex'; exit; // หรืออะไรก็ว่าไป แค่เขียน algorithm ให้มันครอบคลุมมากยิ่งขึ้น โค๊ดยาวช่างมันไปก่อน
}
Date :
2019-06-14 17:04:22
By :
Chaidhanan
ที่ submit แล้วเปลี่ยนหน้า เพราะคุณเขียนว่า $("form2") หมายถึง คุณอ้างอิงถึง form ที่มี id เป็น form2
แต่ form คุณ มี id เป็น about ก็เลยไม่เข้า function submit นะครับ
พอไม่เข้า function ทำให้ในส่วน e.preventDefault() ไม่ทำงาน
Date :
2019-06-15 22:35:21
By :
...
Load balance : Server 01