Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > การทำ jquery auto refresh database และ ajax settimeout database มีวิธีทำอย่างไรบ้างครับ



 

การทำ jquery auto refresh database และ ajax settimeout database มีวิธีทำอย่างไรบ้างครับ

 



Topic : 135932



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์




การทำ jquery auto refresh database และ ajax settimeout database มีวิธีทำอย่างไรบ้างครับ



Tag : PHP, MySQL, Ajax, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-02-22 11:44:42 By : chawin1 View : 5237 Reply : 17
 

 

No. 1



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


Code (HTML)
<head>
  <meta http-equiv="refresh" content="30">
</head>


หน่วยเป็นวินาที


ถ้ารับไม่ได้กับการกระพริบของหน้าจอ ศึกษาตามที่ผมลงไว้ใน

https://www.thaicreate.com/php/forum/135861.html

ตรง No.123, 128 ไม่เข้าใจตรงไหนถาม ที่ผมไม่ทำแบบก็อปวางให้เลยเพราะคุณจะไม่ได้อะไรเลย ตัวอย่างที่ให้ไปสำคัญมากกๆ ในการแก้ปัญหาตามที่คุณต้องการ
แต่ถ้าถอดใจไม่สู้ต่อจริงๆ ก็ใช้ html refresh นั่นแหละ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 12:51:58 By : lakornworld
 


 

No. 2



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : lakornworld เมื่อวันที่ 2021-02-22 12:51:58
รายละเอียดของการตอบ ::
ผมแก้ปัญหาโดยตั้งเวลา 33วิครับ ถ้าเป็น setInterval ดูผลลัพธ์แล้วไม่ error เพื่อให้ server ส่งกลับค่าเวลากลับด้วย

แต่สิ่งที่อยู่ใน table ผม loop ไม่ได้ครับ และ error ครับ
ภาพที่ 1
real

code ผมแยกเป็นไฟล์ แล้ว inclube เข้ามาครับ
Code (PHP)
<?php
require_once('connection.php');
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) { //ปรับเปลี่ยนเป็น get/ post และ type
  // echo "Dashboard : Load Time : " . date("Y-m-d H:i:s");
  $d = 'Dashboard : Load Time : ' . date("Y-m-d H:i:s");
  // location cp3
  // sum total pc on
	$totalpcon = 0;
	$sql1 = "SELECT location,sum(total) as totalpcon FROM monitorpc.v_check_pc_daily where location ='cp3' and timestamp = CURRENT_DATE group by location ;";
	$result1 = $mysqli->query($sql1);
	while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
		$totalpcon = $totalpcon + $row['totalpcon'];
	}
	// --------statuspc--------
	$statuspc = 0;
	$sql = "SELECT ip, statuspc, count(ip) as countstatus FROM monitorpc.tbl_new_pc where ip LIKE '10.183%' or ip LIKE '10.184%' and statuspc = '2';";
	$result2 = $mysqli->query($sql);
	while ($row = $result2->fetch_array(MYSQLI_ASSOC)) {
		$statuspc = $statuspc + $row['countstatus'];
  }
  // -------count total pc ------->
  $total = 0;
  $sql1 = "SELECT team,count(no) as countpc FROM monitorpc.master_pc
  where location ='cp3' and (type = 'PC Gosoft' or type = 'Notebook Gosoft' or type = 'All in one')
  group by team ;";

  $result1 = $mysqli->query($sql1);
  while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
    $total = $total + $row['countpc'];
  }  

  // location tara
  $totalpcon1 = 0;
  $sql1 = "SELECT location,sum(total) as totalpcon1 FROM monitorpc.v_check_pc_daily 
  where location ='Tara park' and timestamp = CURRENT_DATE group by location ;";

  $result1 = $mysqli->query($sql1);
  while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
    $totalpcon1 = $totalpcon1 + $row['totalpcon1'];
  }

  $statuspc1 = 0;
  $sql = "SELECT statuspc, count(ip) as countstatus1 FROM monitorpc.tbl_new_pc where ip LIKE '10.150%'
  and statuspc = '2';";
  $result2 = $mysqli->query($sql);
  while ($row = $result2->fetch_array(MYSQLI_ASSOC)) {      
     $statuspc1 = $statuspc1 + $row['countstatus1'];        
  }

  $total1 = 0;
  $sql1 = "SELECT team,count(no) as countpc1 FROM monitorpc.master_pc
  where location ='Tara park' group by team ;";

  $result1 = $mysqli->query($sql1);
  while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
  $total1 = $total1 + $row['countpc1'];       
  }

  // location wfh
  $totalpcon2 = 0;
  $sql1 = "SELECT location,sum(total) as totalpcon2 FROM monitorpc.v_check_pc_daily 
                where location ='wfh' and timestamp = CURRENT_DATE group by location ;";

  $result1 = $mysqli->query($sql1);
  while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
    $totalpcon2 = $totalpcon2 + $row['totalpcon2'];
  } 

  $statuspc2 = 0;
  $sql = "SELECT statuspc, count(ip) as countstatus2 FROM monitorpc.tbl_new_pc where ip LIKE '192.168%'
  and statuspc = '2';";
  $result2 = $mysqli->query($sql);
  while ($row = $result2->fetch_array(MYSQLI_ASSOC)) {
    $statuspc2 = $statuspc2 + $row['countstatus2'];
  } 

  $total2 = 0;
  $sql1 = "SELECT team,count(no) as countpc2 FROM monitorpc.master_pc
  where location ='wfh' group by team ;";

  $result1 = $mysqli->query($sql1);
  while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
    $total2 = $total2 + $row['countpc2'];
  }

  echo json_encode(['d'=>$d,'totalpcon'=>$totalpcon, 'statuspc'=>$statuspc,'total'=>$total,
                            'totalpcon1'=>$totalpcon1 , 'statuspc1'=>$statuspc1 ,'total1'=>$total1,
                            'totalpcon2'=>$totalpcon2 , 'statuspc2'=>$statuspc2 ,'total2'=>$total2
                            ]);
   exit;
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DashBoard</title>

  <link rel="stylesheet" href="bootstrap/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

  <script language="javascript" src="jquery/jquery-3.5.1.min.js"></script>
  
  <script>
var getData;
function actionAjax () {
   //โค้ด ajax
	$.ajax({ 
		type: 'POST',
		data: {
			rev: 1, 
			at: (new Date()).getTime() 
		}, 
		dataType: 'json',
		error: (exception, jqXHR)=>{
		
			var msg = '';
			if (jqXHR.status === 0) { msg = 'Not connect.\n Verify Network.';
			} else if (jqXHR.status === 404) { msg = 'Requested page not found. [404]';
			} else if (jqXHR.status === 500) { msg = 'Internal Server Error [500].';
			} else if (exception === 'parsererror') { msg = 'Requested JSON parse failed.';
			} else if (exception === 'timeout') { msg = 'Time out error.';
			} else if (exception === 'abort') { msg = 'Ajax request aborted.';
			} else { msg = 'Uncaught Error.\n' + jqXHR.responseText; }
			alert(msg);
		},
		success: rs=>{
			getData = rs; 
      $("#showData").html(rs.d);
      $('#totalpcon').html(rs.totalpcon);
      $('#statuspc').html(rs.statuspc);
      $('#total').html(rs.total);

      // tara
      $('#totalpcon1').html(rs.totalpcon1);
      $('#statuspc1').html(rs.statuspc1);
      $('#total1').html(rs.total1);

      // wfh
      $('#totalpcon2').html(rs.totalpcon2);
      $('#statuspc2').html(rs.statuspc2);
      $('#total2').html(rs.total2);
		}
	});
}
$(document).ready(()=>{ 
	actionAjax();
	setInterval( actionAjax, 33000);
});
</script>
</head>

<body>
<?php include ('navbar.php');?>
  <br>
  <br>
  <!-- start header -->
  <!-- <header class="masthead bg-primary"> -->
  <div class="container">
    <div class="row ">
      <div class="col-lg-12">
        <!-- <br><img class="d-block mx-auto mb-4" src="bg/web analysic.png" alt="" width="72" height="72"> -->
        <!-- <br><img class="d-block mx-auto mb-4" src="bg/logo dashboard.png"> -->
        <!-- <h2 class="display text-center text-uppercase">DashBoard Computer Management</h2> -->
        <br>
        <div id="showData"></div>
        
        <hr>
        <div class="row">
          <!-----------------------------------start card cp3---------------------------------->
            <?php include ('cardcp3.php');?>

          <!-----------------------------------start card tara---------------------------------->
          <?php include ('cardtara.php');?>

          <!-----------------------------------start card wfh---------------------------------->
          <?php include ('cardwfh.php');?>


  
      <!-- ---------------------------------------------------------------------------------------------------------------->
      <hr>
      <h5 class="text-left">PC OFF</h5>
      <br>
      <div class="row">
          <!-----------------------------------start card cp3---------------------------------->
            <?php include ('cardcp3off.php');?>

          <!-----------------------------------start card tara---------------------------------->
            <?php include ('cardtaraoff.php');?>

          <!-----------------------------------start card wfh---------------------------------->
            <?php include ('cardwfhoff.php');?>

        <!-- <script src="js/slim.js"></script> -->
        <script src="js/popper.js"></script>
        <script src="js/bootstrap.js"></script>

</body>

</html>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 14:22:48 By : chawin1
 

 

No. 3



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


https://www.thaicreate.com/php/forum/135861.html

No.123, 128 ไม่เข้าใจตรงไหนถามก่อนครับ ไม่งั้นผมอธิบายต่อไม่ได้ว่าทำไม ในตารางย่อยนั้นจึงไม่ realtime...เพราะมันมาจากสาเหตุเดียวกัน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 15:20:34 By : lakornworld
 


 

No. 4



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : lakornworld เมื่อวันที่ 2021-02-22 15:20:34
รายละเอียดของการตอบ ::
No.123 ผมไม่เข้าใจว่าทำไม script settimeout ไปอยู่ใน body ทั้งที่แนะนำให้ผมเอา script ไว้ที่ head
เท่าที่ศึกษา code พอเข้าใจไม่มาก ผมยังไม่รู้ว่าส่วน php ใน php จะเชื่อม code card แต่ละ location ยังไงครับ
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
echo '<span style="color:green;">' . date("Y-m-d H:i:s") . ' second row</span><br>';
exit;
}
?>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 21:18:24 By : chawin1
 


 

No. 5



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : chawin1 เมื่อวันที่ 2021-02-22 21:18:24
รายละเอียดของการตอบ ::
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> // library มาก่อน

// การใช้คำสั่ง library มาทีหลัง
<script>
// เมื่อ DOM โหลดเสร็จแล้ว (DOM คือ html object ที่เห็นใน devtools: inspect element)
// ต้องโหลด jquery ก่อนจึงจะสามารถใช้ $(...) ซึ่งเป็นวิธีการเรียก object ของ jquery ได้
$(document).ready(function(){
//...
});
</script>


script tag จะวางไว้ใน <head></head> หรือ <body></body> ก็ได้
แต่ต้องอ้างอิง library ก่อนเรียกใช้งานเสมอ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 21:39:46 By : lakornworld
 


 

No. 6



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


หรือการวาง code จะเป็นแบบนี้ครับ

Code (PHP)
<?php
date_default_timezone_set('Asia/Bangkok');
if (isset($_POST['rev']) && $_POST['rev'] == 1) {
	echo '<span style="color:green;">' . date("Y-m-d H:i:s") . ' second row</span><br>';
         // ตย. location cp3
         // sum total pc on
	$totalpcon = 0;
	$sql1 = "SELECT location,sum(total) as totalpcon FROM monitorpc.v_check_pc_daily where location ='cp3' and 
        timestamp = CURRENT_DATE group by location ;";
	$result1 = $mysqli->query($sql1);
	while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
		$totalpcon = $totalpcon + $row['totalpcon'];
	}
	// --------statuspc--------
	$statuspc = 0;
	$sql = "SELECT ip, statuspc, count(ip) as countstatus FROM monitorpc.tbl_new_pc where ip LIKE '10.183%' or ip LIKE 
        '10.184%' and statuspc = '2';";
	$result2 = $mysqli->query($sql);
	while ($row = $result2->fetch_array(MYSQLI_ASSOC)) {
		$statuspc = $statuspc + $row['countstatus'];
       }
        // -------count total pc ------->
       $total = 0;
       $sql1 = "SELECT team,count(no) as countpc FROM monitorpc.master_pc
       where location ='cp3' and (type = 'PC Gosoft' or type = 'Notebook Gosoft' or type = 'All in one')
       group by team ;";

      $result1 = $mysqli->query($sql1);
      while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
      $total = $total + $row['countpc'];
  }  

     // loop ในตารางทำไงครับ
	exit;
}
?>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="rt"></div>

<?php
print_r($_POST);
?>

<div class="row">
          //-------start card cp3-------->
            <?php include ('cardcp3.php');?>  // code แสดงผลให้เห็นภาพ เมื่อ include เข้ามา
            <div class="col-md-12 col-xl-4">
            <div class="card card-social">
              <div class="card-block border-bottom">
                <div class="row align-items-center justify-content-center">
                  <div class="col-auto">
                    <i class="fas fa-desktop text-Info f-36"></i>
                  </div>
                  <div class="col text-right">
                    <h3>Location CP3</h3>                    
                    <!-- <h5 class="text-muted ">Total PC <span class="text-c-green mb-0 "> <?php echo $total; ?></span></h5> -->
                    <h5 class="text-muted ">Total PC <span class="text-c-green mb-0 " id="total"></span></h5>
                  </div>
                </div>
              </div>
              <div class="card-block">
                <div class="row align-items-center justify-content-center card-active">
                  <div class="col-6">
                    <!-- <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Total PC New:</span><span class="text-c- 
                        red mb-0 "><a target="_blank" href="pcnew.php"> <?php echo $statuspc; ?></a> </h6> -->
                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Total PC New:</span> <span class="text-c-red 
                       mb-0 "><a target="_blank" href="pcnew.php" id="statuspc"></a></span></h6>
                  </div>
                  <div class="col-6">
                    <!-- <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Total PC ON:</span><span class="text-c- 
                     red mb-0 "> <?php echo  $totalpcon; ?></h6> -->
                    <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Total PC ON:</span> <span class="text-c-red 
                    mb-0 " id="totalpcon"></span></h6>
                  </div>
                </div>
              </div> //นอกตารางถึงตรงนี้

              //loop ในตารางตรงนี้เชื่อม realtime แบบไหนครับ
              <table class="table  table-bordered text-center" style="font-size:8pt;">
                <thead>
                  <tr>
                    <th>Team</th>
                    <th>PC Gosoft</th>
                    <th>PC CPAll</th>
                    <th>AIO</th>
                    <th>NB Gosoft</th>
                    <th>PC ON</th>
                  </tr>
                </thead>

                <tbody>
                 
                  <?php
                  $sql = "SELECT team FROM monitorpc.master_pc where location ='cp3' group by team ;";
                  $result = $mysqli->query($sql);
                  while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $team = $row['team'];

                    // count opt pc gosoft
                    $num2 = 0;
                    $sql2 = "SELECT  team as countpc FROM monitorpc.master_pc where location ='cp3' 
                    and type = 'pc gosoft' and team = '$team' ;";
                    $result2 = $mysqli->query($sql2);
                    while ($row2 = $result2->fetch_array(MYSQLI_ASSOC)) {
                      // $countpc = $row2['countpc'];
                      $num2 += 1;
                    }
                    
                    // count opt pc cpall
                    $num3 = 0;
                    $sql3 = "SELECT  team as countpc FROM monitorpc.master_pc where location ='cp3' 
                    and type = 'pc cpall' and team = '$team' ;";
                    $result3 = $mysqli->query($sql3);
                    while ($row3 = $result3->fetch_array(MYSQLI_ASSOC)) {
                      // $countpc = $row3['countpc'];
                      $num3 += 1;
                    }

                    // all in one
                    $num4 = 0;
                    $sql4 = "SELECT team as countpcaio FROM monitorpc.master_pc where location ='cp3'  
                     and type = 'all in one' and team = '$team' ;";
                    $result4 = $mysqli->query($sql4);
                    while ($row4 = $result4->fetch_array(MYSQLI_ASSOC)) {
                      //  $countpcaio = $row4['countpcaio'];
                      $num4 += 1;
                    }

                    // notebook gosoft
                    $num5 = 0;
                    $sql5 = "SELECT team as countnb FROM monitorpc.master_pc where location ='cp3'  
                     and type = 'notebook gosoft' and team = '$team' ;";
                    $result5 = $mysqli->query($sql5);
                    while ($row5 = $result5->fetch_array(MYSQLI_ASSOC)) {
                      //  $countnb = $row5['countnb'];
                      $num5 += 1;
                    }

                    // <<-------------sum pc on opt1 2 3 support------->>
                    $sql6 = "SELECT team,sum(total) as pcon FROM monitorpc.v_check_pc_daily where location = 'cp3' 
                  and timestamp = CURRENT_DATE and team = '$team'";

                    $result6 = $mysqli->query($sql6);
                    while ($row6 = $result6->fetch_array(MYSQLI_ASSOC)) {
                      $pcon = $row6['pcon'];
                    }

                  ?>
                    <tr>
                      <td><?= $team ?></td>
                      <td><?= $num2 ?></td>
                      <td><?= $num3 ?></td>
                      <td><?= $num4 ?></td>
                      <td><?= $num5 ?></td>
                      <td><span class="text-c-red mb-0 "><?php echo $pcon ?></td>
                      
                    </tr>
                  <?php } ?>
                </tbody>

              </table>

            </div>
          </div>

          //-----------------------------------start card tara---------------------------------->
          <?php include ('cardtara.php');?>
          //-----------------------------------start card wfh---------------------------------->
          <?php include ('cardwfh.php');?>

      <hr>
      <h5 class="text-left">PC OFF</h5>
      <br>
      <div class="row">
          //-----------------------------------start card cp3---------------------------------->
            <?php include ('cardcp3off.php');?>
          //-----------------------------------start card tara---------------------------------->
            <?php include ('cardtaraoff.php');?>
          //-----------------------------------start card wfh---------------------------------->
            <?php include ('cardwfhoff.php');?>

<script>

$(function() {
  function realTime() {
    setTimeout(function(){
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 }     
        }).done(function( data ) {
          $("#rt").html(data);
          $("#totalpcon").html(data);
          $("#statuspc").html(data);
          $("#total").html(data);
        });
	  realTime();
    }, 20000);
  }
  realTime();
});


</script>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 21:47:35 By : chawin1
 


 

No. 7



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ขอยกมากระทู้นี้ จะได้ไม่ต้องเปิดกลับไปมา


AJAX realtime

realtime เฉพาะแถวสอง
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
	echo '<span style="color:green;">' . date("Y-m-d H:i:s") . ' second row</span><br>';
	exit;
}
?>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<?php
echo date("Y-m-d H:i:s") . ' first row<br>';
?>

<div id="rt"></div>

<?php
echo date("Y-m-d H:i:s") . ' last row<br>';
print_r($_POST);
?>

<script>

$(function() {
  function realTime() {
    setTimeout(function(){
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 }     
        }).done(function( data ) {
          $("#rt").html(data);
        });
	  realTime();
    }, 1000);
  }
  realTime();
});


</script>
</body>
</html>


One line


realtime ทุกแถวแบบ full template (แต่จะโหลดช้าถ้า page มีข้อมูลเยอะ)
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
        // ในนี้เป็นเขต  response data แบบ realtime (ขั้นตอน 5) เพื่อส่งกลับไปยัง client แล้วนำไป update html ต่อไป(ขั้นตอน 6)
	echo '<span style="">' . date("Y-m-d H:i:s") . ' first row</span><br>';  //ย้ายมาที่นี่
	echo '<span style="color:green;">' . date("Y-m-d H:i:s") . ' second row</span><br>';
	echo '<span style="">' . date("Y-m-d H:i:s") . ' last row</span><br>';  //ย้ายมาที่นี่
	print_r($_POST);
	exit;
}
?>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<?php
//echo date("Y-m-d H:i:s") . ' first row<br>';
?>

<div id="rt"></div>

<?php
//echo date("Y-m-d H:i:s") . ' last row<br>';
//print_r($_POST);
?>

<script>

$(function() {
  function realTime() {
    setTimeout(function(){
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 }     
        }).done(function( data ) {
          $("#rt").html(data);
        });
	  realTime();
    }, 1000);
  }
  realTime();
});


</script>
</body>
</html>


All lines

...มีต่อ


ประวัติการแก้ไข
2021-02-22 22:23:14
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 22:17:50 By : lakornworld
 


 

No. 8



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


diagram ajax

5, 6 สำคัญเพราะมีผลต่อ ข้อมูล/ตำแหน่ง ในการอัปเดต html ตามเวลาให้เหมือนเป็น realtime

5 - ทำงานอยู่ฝั่ง server เตรียมป้อนข้อมูลให้ client หรือที่เราพูดติดปากว่า response data
6 - ทำงานฝั่ง client เมื่อรับข้อมูลมาจาก 5 ให้ปรับปรุงหรือเขียนข้อมูลใหม่ตามที่เราต้องการ

ในที่นี้คือ $("#rt").html(data);
คำสั่ง jquery นี้ เขียน response data ที่เก็บไว้ในตัวแปรชื่อ data ไปยัง html element ที่มี id="rt"




วันนี้แค่นี้ก่อนครับ ไม่ไหว

เดี๋ยวมาต่อกับการหั่น data ทั้งจาก server/client เมื่อว่าง ...


ประวัติการแก้ไข
2021-02-22 22:49:10
2021-02-22 22:50:42
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-22 22:38:50 By : lakornworld
 


 

No. 9



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 8 เขียนโดย : lakornworld เมื่อวันที่ 2021-02-22 22:38:50
รายละเอียดของการตอบ ::
เข้าใจที่ realtime เฉพาะแถว 2 เพราะ echo date อีก 2 ไม่ได้อยู่ในเงื่อนไข if (isset($_POST['rev']) && $_POST['rev'] == 1) ถ้าอยากให้ทำงาน ย้าย date ทั้ง 2 ขึ้นไปที่ rev

ส่วน #rt ตั้งขึ้นมาเองหรือครับ
และส่วน 3,4 คิวรี่จาก code ที่ใช้คิวรี่ไปก่อนหน้านั้นได้ไหม ลองดู testดู
Code (PHP)
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
        // ในนี้เป็นเขต  response data แบบ realtime (ขั้นตอน 5) เพื่อส่งกลับไปยัง client แล้วนำไป update html ต่อไป(ขั้นตอน 6)
	echo '<span style="color:green;">' . date("Y-m-d H:i:s") . ' second row</span><br>';
        echo $totalpcon;
        echo $statuspc;
        echo $total ;
	
	exit;
}
?>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="rt"></div>

<script>

$(function() {
  function realTime() {
    setTimeout(function(){
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 }     
        }).done(function( data ) {
          $("#rt").html(data);
          $("#totalpcon").html(data);
          $("#statuspc").html(data);
          $("#total").html(data);
        });
	  realTime();
    }, 1000);
  }
  realTime();
});
 
// 3,4 คิวรี่ข้อมูลจาก database
<?php  
        $totalpcon = 0;
	$sql1 = "SELECT location,sum(total) as totalpcon FROM monitorpc.v_check_pc_daily where location ='cp3' and 
        timestamp = CURRENT_DATE group by location ;";
	$result1 = $mysqli->query($sql1);
	while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
		$totalpcon = $totalpcon + $row['totalpcon'];
	}
	// --------statuspc--------
	$statuspc = 0;
	$sql = "SELECT ip, statuspc, count(ip) as countstatus FROM monitorpc.tbl_new_pc where ip LIKE '10.183%' or ip LIKE 
        '10.184%' and statuspc = '2';";
	$result2 = $mysqli->query($sql);
	while ($row = $result2->fetch_array(MYSQLI_ASSOC)) {
		$statuspc = $statuspc + $row['countstatus'];
       }
        // -------count total pc ------->
       $total = 0;
       $sql1 = "SELECT team,count(no) as countpc FROM monitorpc.master_pc
       where location ='cp3' and (type = 'PC Gosoft' or type = 'Notebook Gosoft' or type = 'All in one')
       group by team ;";

      $result1 = $mysqli->query($sql1);
      while ($row = $result1->fetch_array(MYSQLI_ASSOC)) {
      $total = $total + $row['countpc'];
  }  

?>

</script>

<div class="row">
          //-------start card cp3-------->
            <?php include ('cardcp3.php');?>  // code แสดงผลให้เห็นภาพ เมื่อ include เข้ามา
            <div class="col-md-12 col-xl-4">
            <div class="card card-social">
              <div class="card-block border-bottom">
                <div class="row align-items-center justify-content-center">
                  <div class="col-auto">
                    <i class="fas fa-desktop text-Info f-36"></i>
                  </div>
                  <div class="col text-right">
                    <h3>Location CP3</h3>                    
                    <h5 class="text-muted ">Total PC <span class="text-c-green mb-0 " id="total"></span></h5>
                  </div>
                </div>
              </div>
              <div class="card-block">
                <div class="row align-items-center justify-content-center card-active">
                  <div class="col-6">  
                    <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Total PC New:</span> <span class="text-c-red 
                       mb-0 "><a target="_blank" href="pcnew.php" id="statuspc"></a></span></h6>
                  </div>
                  <div class="col-6">
                    <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Total PC ON:</span> <span class="text-c-red 
                    mb-0 " id="totalpcon"></span></h6>
                  </div>
                </div>
              </div> //นอกตารางถึงตรงนี้

              //loop ในตาราง
              <table class="table  table-bordered text-center" style="font-size:8pt;">
                <thead>
                  <tr>
                    <th>Team</th>
                    <th>PC Gosoft</th>
                    <th>PC CPAll</th>
                    <th>AIO</th>
                    <th>NB Gosoft</th>
                    <th>PC ON</th>
                  </tr>
                </thead>

                <tbody>
                 
                  <?php
                  $sql = "SELECT team FROM monitorpc.master_pc where location ='cp3' group by team ;";
                  $result = $mysqli->query($sql);
                  while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $team = $row['team'];

                    // count opt pc gosoft
                    $num2 = 0;
                    $sql2 = "SELECT  team as countpc FROM monitorpc.master_pc where location ='cp3' 
                    and type = 'pc gosoft' and team = '$team' ;";
                    $result2 = $mysqli->query($sql2);
                    while ($row2 = $result2->fetch_array(MYSQLI_ASSOC)) {
                      // $countpc = $row2['countpc'];
                      $num2 += 1;
                    }
                    
                    // count opt pc cpall
                    $num3 = 0;
                    $sql3 = "SELECT  team as countpc FROM monitorpc.master_pc where location ='cp3' 
                    and type = 'pc cpall' and team = '$team' ;";
                    $result3 = $mysqli->query($sql3);
                    while ($row3 = $result3->fetch_array(MYSQLI_ASSOC)) {
                      // $countpc = $row3['countpc'];
                      $num3 += 1;
                    }

                    // all in one
                    $num4 = 0;
                    $sql4 = "SELECT team as countpcaio FROM monitorpc.master_pc where location ='cp3'  
                     and type = 'all in one' and team = '$team' ;";
                    $result4 = $mysqli->query($sql4);
                    while ($row4 = $result4->fetch_array(MYSQLI_ASSOC)) {
                      //  $countpcaio = $row4['countpcaio'];
                      $num4 += 1;
                    }

                    // notebook gosoft
                    $num5 = 0;
                    $sql5 = "SELECT team as countnb FROM monitorpc.master_pc where location ='cp3'  
                     and type = 'notebook gosoft' and team = '$team' ;";
                    $result5 = $mysqli->query($sql5);
                    while ($row5 = $result5->fetch_array(MYSQLI_ASSOC)) {
                      //  $countnb = $row5['countnb'];
                      $num5 += 1;
                    }

                    // <<-------------sum pc on opt1 2 3 support------->>
                    $sql6 = "SELECT team,sum(total) as pcon FROM monitorpc.v_check_pc_daily where location = 'cp3' 
                  and timestamp = CURRENT_DATE and team = '$team'";

                    $result6 = $mysqli->query($sql6);
                    while ($row6 = $result6->fetch_array(MYSQLI_ASSOC)) {
                      $pcon = $row6['pcon'];
                    }

                  ?>
                    <tr>
                      <td><?= $team ?></td>
                      <td><?= $num2 ?></td>
                      <td><?= $num3 ?></td>
                      <td><?= $num4 ?></td>
                      <td><?= $num5 ?></td>
                      <td><span class="text-c-red mb-0 "><?php echo $pcon ?></td>
                      
                    </tr>
                  <?php } ?>
                </tbody>

              </table>

            </div>
          </div>
</body>
</html>




ประวัติการแก้ไข
2021-02-23 00:20:39
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-23 00:19:00 By : chawin1
 


 

No. 10



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ลองทำดูแล้วไม่ถูกครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-23 11:48:26 By : chawin1
 


 

No. 11



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


Quote:
การศึกษาแบบทางลัด ก็จะถูกธาตุไฟเข้าแทรก เป็นเรื่องธรรมดา
คุณต้องใช้ความพยายามและพลังงานมากกว่าคนอื่นหลายเท่า
เพราะศึกษาพื้นฐานไปพร้อมๆ กับการประยุกต์ใช้
ทั้ง client-side (HTML, JS, CSS) และ server-side(PHP, Database)
ดังนั้น ผมจะปูพื้นฐานให้พอสังเขป เนื่องจากเนื้อหามันเยอะมากกกๆ ที่เหลือค่อยไปค้นคว้าเอง
เทคนิคขั้นสูงในการเรียนรู้สิ่งใหม่ คือ อย่าเน้นจำ (เพราะไม่มีทางจำได้หมด)
พยายามทำความเข้าใจก็พอ พวกไวยากรณ์ หรือ คำสั่งต่างๆ ก็เปิดเอกสารอ้างอิงเอา


พื้นฐานที่ควรรู้
1.
id เป็นป้ายประจำตัวที่ไม่ซ้ำกันของ HTML element ถูกกำหนดด้วย id="x"
เวลาจะเรียกจาก jquery เราจะอ้างอิง id ด้วยเครื่องหมาย # นำหน้า
$("#x") ถ้าเป็น class ป้ายประจำตัวแบบกลุ่ม(ซ้ำได้) ของ HTML element
ถูกกำหนดด้วย class="y" เวลาอ้างอิงจาก jquery ใช้ . นำหน้า $(".y")
ส่วน selector ที่ไม่มีอะไรนำหน้าจะเป็นการอ้างอิง element ตาม tag
เช่น <table><tr><td></td></tr></table>
$("table") คือ เลือกทุก element ที่มี tag เป็น table
$("tr") คือ เลือกทุก element ที่มี tag เป็น tr

*** อะไรที่ถูกครอบด้วย $("...") เรียกว่า jquery selector ***

2.
การกำหนดตัวแปรเพื่อใช้ในฝั่ง client สำหรับ response data ทำในเมธอด done(แบบใหม่) หรือ success option(แบบเก่า)
.done(function( ตัวแปร ) { ในตัวอย่างผมตั้งให้เป็น data ===> .done(function( data ) {

3.
alert response

เวลาต้องการตรวจสอบ response data ใช้ alert หรือ console
เวลาศึกษาให้ลองเอา exit(); ออก และ/หรือ วาง if(isset(...)) จาก ajax request ไว้ในตำแหน่งอื่น
ที่ไม่ใช่บนสุด แล้วสังเกต response ที่ได้รับว่าแตกต่างกันอย่างไร ทำไมต้องวางไว้แบบนั้น

*** ถ้าเข้าใจ จะเห็นว่าทุกอย่าง ที่ส่งออกเพื่อแสดงผลด้วยคำสั่ง เช่น echo, print_r ที่ทำใน if(isset(...)) จาก ajax request
จะเป็นพื้นที่สงวนไม่แสดงผลออกทาง html ให้ user เห็น ตราบใดที่ยังไม่สั่งอัปเดตใน done ดังนั้น การ output ส่วนนี้จึงเปรียบเหมือน "จุดกักข้อมูล" ***

*** ระวังก่อนใช้ alert, console ต้องปิด realtime ก่อน ***




ลองดูตัวอย่างนี้

แยก reponse data ไปอัปเดตในตำแหน่งที่ต้องการด้วย DOM element
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
	echo '<span id="first" style="color:blue;">' . date("Y-m-d H:i:s") . ' first</span><br>';
	echo '<span id="second" style="color:green;">' . date("Y-m-d H:i:s") . ' second</span><br>';
	echo '<span id="last" style="color:red;">' . date("Y-m-d H:i:s") . ' last</span><br>';
	print_r($_POST);
	exit;
}
?>


<!DOCTYPE html>
<html>
<head>
<style>
/* ตีเส้นตาราง */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

/* เว้นระยะห่างภายในตาราง เพื่อให้ดูง่าย */
th, td {
  padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div>
  <table>
    <tr>
      <td id=""></td>
	  <td id="c1"></td>
	  <td id=""></td>
    </tr>
	<tr>
      <td id="c3"></td>
	  <td id=""></td>
	  <td id="c2"></td>
    </tr>
  </table>
</div>


<script>

$(function() {
  function realTime() {
    setTimeout(function(){  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 }     
        }).done(function( data ) {
		  //alert(data);
		  dataDOM = new DOMParser().parseFromString(data, 'text/html');  // dataDOM คือ DOM element
		  //alert($(dataDOM).find("#first").prop('outerHTML'));
		  //console.log($(dataDOM).find("#first").prop('outerHTML'));
          $("#c1").html($(dataDOM).find("#first").prop('outerHTML'));
		  $("#c2").html($(dataDOM).find("#second").prop('outerHTML'));
		  $("#c3").html($(dataDOM).find("#last").prop('outerHTML'));
        });
	  realTime();  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
    }, 1000);  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
  }
  realTime();
});

</script>
</body>
</html>



realt_tb

จะเห็นว่าการแสดงผลไม่เนียนตา เนื่องจากก่อน ajax request ตารางใน body ว่างเปล่า
และมันจะรอจนกว่าครบเวลาตามการสั่งการของ setTimeout จึงจะมีการอัปเดตข้อมูล
เหตุนี้ จึงต้องวางโครง html(template) ให้เหมือนกับการแสดงผลแบบ realtime


แก้เฉพาะ body
<div>
  <table>
    <tr>
      <td id=""></td>
	  <td id="c1"><?php echo '<span id="first" style="color:blue;">' . date("Y-m-d H:i:s") . ' first</span>'; ?></td>
	  <td id=""></td>
    </tr>
	<tr>
      <td id="c3"><?php echo '<span id="last" style="color:red;">' . date("Y-m-d H:i:s") . ' last</span>'; ?></td>
	  <td id=""></td>
	  <td id="c2"><?php echo '<span id="second" style="color:green;">' . date("Y-m-d H:i:s") . ' second</span>'; ?></td>
    </tr>
  </table>
</div>




ข้อสังเกต
find("#...") เป็น id ที่สัมพันธ์กับ และมีอยู่ใน if (isset($_POST['rev']) && $_POST['rev'] == 1) {//...}
เพื่อแยกชิ้นของ resposne HTML ไปวางในตำแหน่งต่างๆ เพื่อแสดงผลต่อ user


ต่อไปจะเป็นตัวอย่างสุดท้าย การ realtime เฉพาะ dynamic content(พวกตัวแปร) ไม่รวม template (html,css,js+layout)
ด้วย json object...รอติดตาม


ผมจะยังไม่ยุ่งกับงานจริงของคุณ...ให้คุณได้ใช้เวลาศึกษาพื้นฐานให้พอเข้าใจบ้าง
แต่ตัวอย่างที่ให้สามารถนำไปประยุกต์ใช้ได้จริง


ประวัติการแก้ไข
2021-02-23 12:58:01
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-23 12:54:05 By : lakornworld
 


 

No. 12



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 11 เขียนโดย : lakornworld เมื่อวันที่ 2021-02-23 12:54:05
รายละเอียดของการตอบ ::
เป็นประโยชน์มากครับ ที่คิวรี่จาก database วางcode ยังไง เพราะใน table ผมก็ใส่ id แต่ไม่ได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-23 16:20:22 By : chawin1
 


 

No. 13



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


Quote:
ก่อนอื่นทำความรู้จักกับ JSON Object
JSON คือ การรับส่งข้อมูลในรูปแบบหนึ่ง โดยมีโครงสร้างลักษณะนี้

{ "key1":"value1", "key2":"value2", "key3":"value3" } เช่น
{ "name":"John", "age":30, "car":null }

*** ชื่อ key ต้องอยู่ในเครื่องหมายคำพูด "..." ส่วนค่าของ value มีรูปแบบดังนี้
ถ้าข้อมูลเป็น string(ข้อความ) ต้องอยู่ในเครื่องหมายคำพูด "..."
แต่ถ้าเป็นตัวเลขหรือ null(ค่าว่าง) ไม่ต้องมี "..." ***

เวลาเรียก ใช้ จุด(.) คั่นระหว่างตัวแปรกับคีย์

ตัวแปร.ชื่อคีย์

เช่น

data = { "name":"John", "age":30, "car":null }

data.name ได้ John
data.age ได้ 30
data.car ได้ null หรือ ค่าว่าง


ต่อมา option ที่ต้องเพิ่มในเมธอด ajax() คือ dataType

$.ajax({
method: "...",
//...
dataType: "json"
});


จาก No.11 เราสามารถกำหนด dataType เป็น "html" แทนการใช้ DOMParser()
$.ajax({ 		
          method: "POST",   
          data: { rev: 1 },
          dataType: "html"		  
        }).done(function( data ) {
		  //alert(data);
		  //alert($(data).filter("#first").prop('outerHTML'));	
	  //console.log($(data).filter("#first").prop('outerHTML'));

          // ถ้าระบุ dataType: "html" และเลือก/เรียก element จาก response ที่เป็น top-level ใช้เมธอด filter() แทน find()
          $("#c1").html($(data).filter("#first").prop('outerHTML'));
		  $("#c2").html($(data).filter("#second").prop('outerHTML'));
		  $("#c3").html($(data).filter("#last").prop('outerHTML'));
        });



dataType ที่สามารถกำหนดได้ ได้แก่ "xml", "html", "json", "jsonp", "text" และ "script"
รายละเอียดของแต่ละอัน...ไปศึกษาเองในภายหลัง ในตัวอย่างผมอธิบายให้สามแบบคือ "text" (เมื่อไม่ใส่ dataType), "html", "json"




ตัวอย่างสุดท้าย เป็นวิธีที่ได้รับความนิยมเป็นจำนวนมาก และลดปริมาณการรับส่งข้อมูล response data เพื่อให้การประมวลผลเร็วขึ้น

สมมติมี โครง html ตามนี้
<div>
table1: 
  <table id="table1">
    <tr>
      <td id="t1r1c1">row1 column1</td>
	  <td id="t1r1c2">row1 column2</td>
	  <td id="t1r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t1r2c1">row2 column1</td>
	  <td id="t1r2c2">row2 column2</td>
	  <td id="t1r2c3">row2 column3</td>
    </tr>
  </table>
table2: 
  <table id="table2">
    <tr>
      <td id="t2r1c1">row1 column1</td>
	  <td id="t2r1c2">row1 column2</td>
	  <td id="t2r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t2r2c1">row2 column1</td>
	  <td id="t2r2c2">row2 column2</td>
	  <td id="t2r2c3">row2 column3</td>
    </tr>
  </table>
table3: 
  <table id="table3">
    <tr>
      <td id="t3r1c1">row1 column1</td>
	  <td id="t3r1c2">row1 column2</td>
	  <td id="t3r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t3r2c1">row2 column1</td>
	  <td id="t3r2c2">row2 column2</td>
	  <td id="t3r2c3">row2 column3</td>
    </tr>
  </table>
</div>



และส่วน/ตำแหน่ง ที่ต้องการทำ realtime คือ ในกรอบสีแดง

target of realtime parts


ทำได้โดย


realtime เฉพาะ dynamic content (ไม่รวม template หรือ html) ด้วย JSON Object
<?php
date_default_timezone_set('Asia/Bangkok');

if (isset($_POST['rev']) && $_POST['rev'] == 1) {
    // ขั้นตอน 3, 4 จากแผนผัง - ถ้ามีการคิวรีจากฐานข้อมูลวางไว้ตรงนี้ ก่อนทำ JSON
    // ...

    // สร้าง string ให้อยู่ในรูปแบบของ JSON
	$jsonObj = '{'
	. '"first":"' . date('Y-m-d H:i:s') . ' first"' . ', '
	. '"second":"' . date('Y-m-d H:i:s') . ' second"' . ', '
	. '"last":"' . date('Y-m-d H:i:s') . ' last"'
	. '}' ;
	
	echo $jsonObj;  // ถ้า $jsonObj เป็นอาร์เรย์ สามารถใช้ฟังก์ชัน json_encode() เพื่อส่งกลับข้อมูลแบบ JSON
	exit;
}
?>


<!DOCTYPE html>
<html>
<head>
<style>
/* ตีเส้นตาราง */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

/* เว้นระยะห่างภายในตาราง เพื่อให้ดูง่าย */
th, td {
  padding: 15px;
}

/* เว้นระยะห่างระหว่างตาราง */
table {
	margin: 20px;
}

/* กำหนดสีตัวหนังสือใน table1 ที่ทำงานแบบ realtime */
#table1 .realtime {
	color: blue;
}

/* กำหนดสีตัวหนังสือใน table2 ที่ทำงานแบบ realtime */
#table2 .realtime {
	color: green;
}

/* กำหนดสีตัวหนังสือใน table3 ที่ทำงานแบบ realtime */
#table3 .realtime {
	color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div>
table1: 
  <table id="table1">
    <tr>
      <td id="t1r1c1">row1 column1</td>
	  <td id="t1r1c2">row1 column2</td>
	  <td id="t1r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t1r2c1">row2 column1</td>
	  <td id="t1r2c2">row2 column2</td>
	  <td id="t1r2c3">row2 column3</td>
    </tr>
  </table>
table2: 
  <table id="table2">
    <tr>
      <td id="t2r1c1">row1 column1</td>
	  <td id="t2r1c2">row1 column2</td>
	  <td id="t2r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t2r2c1">row2 column1</td>
	  <td id="t2r2c2">row2 column2</td>
	  <td id="t2r2c3">row2 column3</td>
    </tr>
  </table>
table3: 
  <table id="table3">
    <tr>
      <td id="t3r1c1">row1 column1</td>
	  <td id="t3r1c2">row1 column2</td>
	  <td id="t3r1c3">row1 column3</td>
    </tr>
	<tr>
      <td id="t3r2c1">row2 column1</td>
	  <td id="t3r2c2">row2 column2</td>
	  <td id="t3r2c3">row2 column3</td>
    </tr>
  </table>
</div>


<script>

$(function() {
  function realTime() {
    setTimeout(function(){  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
 	  $.ajax({ 		
          method: "POST",   
          data: { rev: 1 },
          dataType: "json"	// ส่วนที่เพิ่มเข้ามาในตัวอย่างนี้	  
        }).done(function( data ) {
		  //alert(data.first);
		  //console.log(data);
          $("#t1r2c2").html(data.first);  // อัปเดต html สำหรับ date ที่มีคำว่า first
		  $("#t1r2c2").addClass("realtime"); // เพิ่มคลาส realtime เพื่อเปลี่ยนสีตัวหนังสือ
		  $("#t2r1c3").html(data.second);  // อัปเดต html สำหรับ date ที่มีคำว่า second
		  $("#t2r1c3").addClass("realtime"); // เพิ่มคลาส realtime เพื่อเปลี่ยนสีตัวหนังสือ
		  $("#t3r1c1").html(data.last);  // อัปเดต html สำหรับ date ที่มีคำว่า last
		  $("#t3r1c1").addClass("realtime"); // เพิ่มคลาส realtime เพื่อเปลี่ยนสีตัวหนังสือ
        });
	  realTime();  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
    }, 1000);  // ถ้าจะใช้  alert, console ให้คอมเมนต์บรรทัดนี้เพื่อปิด realtime ก่อน
  }
  realTime();
});

</script>
</body>
</html>


ผลลัพธ์

Final Result




ลองฝึกด้วยการเปลี่ยนตำแหน่ง realtime เป็นคอลัมน์อื่น และปรับแต่งส่วนต่างๆ จนคล่องและเข้าใจการทำงานแล้ว
ค่อยลงมือกับงานจริง โดยพยายามมองภาพรวมหรือโครงสร้างของโค้ดให้ออก แล้วลองใช้ความรู้พื้นฐานที่ผมทิ้งไว้ให้ไปแก้ปัญหาดู
แต่ถ้ามีส่วนไหนไม่เข้าใจ(จากตัวอย่าง) ก็ถามได้ทันที

Quote:
ส่วนโค้ดการคิวรีจาก database ให้วางใน if (isset($_POST['rev']) && $_POST['rev'] == 1) {//...} เลยครับ
แต่เฉพาะ realtime ถ้าส่วนไหนไม่ได้ทำ realtime วางไว้นอก if (isset($...


หลักสูตร ajax realtime แบบรวบรัดตัดตอน
...จบ...
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-23 18:26:04 By : lakornworld
 


 

No. 14



โพสกระทู้ ( 245 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 13 เขียนโดย : lakornworld เมื่อวันที่ 2021-02-23 18:26:04
รายละเอียดของการตอบ ::
ข้อมูลที่อยู่ในตารางจะ loop ยังไงครับ

ก่อนหน้าที่ผมเจอ loop มาแค่ team เดียวครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-03-03 15:41:26 By : chawin1
 


 
HTML Tag Table เต็มยศ
Code (PHP)
<body>
    <table id="tblFucker">
        <thead>
            <tr>
                <th>รหัส</th>
                <th>ชื่อ</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>
    <script>
        var arrJS = []; // สมมติว่า เป็นข้อมูลที่ดึงมาจาก DB Server
        var objJS1 = { comCode: '001', comName: 'PC-11' };
        arrJS.push(objJS1);
        var objJS2 = { comCode: '002', comName: 'PC-12' };
        arrJS.push(objJS2);
        var objJS3 = { comCode: '003', comName: 'PC-13' };
        arrJS.push(objJS3);
        var tblFucker = $("#tblFucker");
        for (var i = 1; i < arrJS.length; i++) {
            let tmpLtr = `<tr><td>${arrJS[i-1].comCode}</td><td>${arrJS[i-1].comName}</td></tr>`
            $(tblFucker).find('tbody').append(tmpLtr);
        }
    </script>
</body>



คำว่า Realtime จริงฯ ยกตัวอย่างจริง เช่น
อีแดง ทำงานอยู่ สงขลา ทำงานไปด้วยให้ผัวจับนมไปด้วย เปิดหน้าจอ รับออเดอร์ลูกค้า อีนี่ดูเฉยฯ
อีดำ ทำงานอยู่ เชียงใหม่ ทำงานไปด้วยให้ผัวจับนมไปด้วย เปิดหน้าจอ รับออเดอร์ลูกค้า อีนี่ดูเฉยฯ
อีหนูของป๋า ทำงานอยู่ บนตัก เปิดหน้าจอ นั่งฯยืนฯ ทำการเพิ่มข้อมูลจริงฯเลย

อีทั้งหลายต้องเห็นข้อมูลที่เพิ่มทันทีทันใด โดยปราศจากข้อแม้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-03-04 10:29:06 By : ผ่านมา
 


 
ว่างฯก็เข้า www.youtube.com พิมพ์คำว่า โยเดีย ที่คิด(ไม่)ถึง
มันมีเพลงแรพท่อนหนึ่งมันร้องเพราะมากฯ เลย

เธอจะรู้หรือเปล่า? เธอจะเห็นหรือเปล่า?
อยุธยาเมืองเก่า เธอเห็นหมีหรือเปล่า?
...
...
...

ปล. เราเปิด ติ๊กต๊อก เห็นมันเต้นกันทั้งวัน ถ่างแข้ง ถ่างขา แหก แหวก นมเป็นนม
จนเราอดคิดไม่ได้ว่า วันฯหนึ่ง มันไม่กินข้าวกันเลยนะเนี่ยพวกนี้

อีกสิบยี่สิบสามสิบสี่สิบห้าสิบ ปีข้างหน้า ถ้าลูกหลานตัวเองมาเห็นและถามว่า แม่ฯ นั่นใช่แม่ใช่ไหม?
เราคิดไม่ออกจริงฯเลยจะตอบว่าอย่างไร?
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-03-04 10:55:17 By : ผ่านมา
 


 

No. 17



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 14 เขียนโดย : chawin1 เมื่อวันที่ 2021-03-03 15:41:26
รายละเอียดของการตอบ ::
ทำ dynamic id หรือ ใช้ class แทน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-03-18 21:21:21 By : lakornworld
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : การทำ jquery auto refresh database และ ajax settimeout database มีวิธีทำอย่างไรบ้างครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่