Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > การส่งค่า ID ของคอลัม ไปยัง Modal เพื่อโชว์ข้อมูลจาก Database เฉพาะตัวที่เลือก

การส่งค่า ID ของคอลัม ไปยัง Modal เพื่อโชว์ข้อมูลจาก Database เฉพาะตัวที่เลือก

เริ่มหัวข้อใหม่

ซันจิคุง

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

Code (PHP)

<!doctype html>
<html lang="en">
<head>
<title>calculate number</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<?php
  include_once('php/connect.php');  
  $sql = "SELECT *
  FROM [status]";
  $query = sqlsrv_query($conn, $sql);
  while($result = sqlsrv_fetch_array($query)){
?>
  <table>
    <tr>
      <td style=" vertical-align: middle;"><div align="center"><?=$result["name_status"];?></div></td>
      <td style=" vertical-align: middle;">
        <a data-toggle="modal"  href="#detail_req"><?=$result["id_status"];?></a>
      </td>
        <!-- Modal -->
        <div class="modal fade"  id="detail_req">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title"><?=$result["name_status"];?></h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-6" align="right">รหัส Status : </div>
                  <div class="col-lg-6" ><?=$result["id_status"];?></div>
                </div>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-6" align="right">ชื่อ Status : </div>
                  <div class="col-lg-6" ><?=$result["name_status"];?></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Modal -->
    </tr>
  <?php
  }
  ?>
  </table>
 </body>
</html>

จาก Code พอผมรันแล้วจะได้แบบนี้
Modal1

ปัญหาคือไม่ว่าผมจะ Click เลขอะไรมันก็จะขึ้นแค่ข้อมูล อันแรกเ่ทานั้น ตามภาพล่าง
modal2

ผมต้องเพิ่มอะไรเข้าไปเพื่อให้มัน โชว์เฉพาะข้อมูลที่ผมคลิกเท่านั้น ขอบพระคุณครับ

Tag : PHP

Date : 2019-08-17 15:05:35

By : yutthanagorn

View : 2336

Reply : 6

No. 1

Mongkon.k

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

ผมว่าคำถามนี้ เป็น hit of the year เลยนะ
js มัน duplicate id กันไม่ได้ครับ อันนี้คำทำเว็บควรจะรู้หรือรับทราบเอาไว้ครับ
Code (PHP)

$key=0;
while(xx){
?>
<div class="modal fade"  id="detail_req_<?=$key?>">
........
<?php
$key++;
}

ประวัติการแก้ไข
2019-08-17 20:38:12

Date : 2019-08-17 20:35:06

By : mongkon.k

No. 2

ซันจิคุง

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

ตอบความคิดเห็นที่ : 1 เขียนโดย : mongkon.k เมื่อวันที่ 2019-08-17 20:35:06

รายละเอียดของการตอบ ::

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

Date : 2019-08-18 19:20:21

By : yutthanagorn

No. 3

Chaidhanan

โพสกระทู้ ( 9,590 )
บทความ ( 2 )

เอา javascript ที่ทำงานกับ event click มาด้วยสิครับ มันอ้างอิงตรงนั้นผิด
ผิดยังไงจะได้บอก แต่ถ้าจะเอาตัวอย่าง มันก็คืออันที่คุณเอามาประยุกต์แบบผิดๆ นั่นแหล่ะ

ส่วนการใช้ id ถ้าอยู่บนระนาบเดียวกัน มันก็จะ ได้ เฉพาะ อันแรก เท่านั้น
มันต้องใชัประกอบกันส่วนอื่นๆ อีกต้องอ่านเยอะๆ ทำความเข้าใจกับ id class tag ให้มากกว่านี้

id มันเป็นอะไรที่ใช้เฉพาะที่ แต่มันก็น สามารถใช้ id เดียวกัน แต่ต้องอยู่คนละระดับได้ เวลาเรียกใช้ต้องมี parent ครอบอีกที
Code (PHP)

<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		crossorigin="anonymous"></script>
</head>
<body>
<div class="abc" data-test="1">
   <div id="xyz">1111</div>
</div>
<div class="abc" data-test="2">
   <div id="xyz">2222</div>
</div>
<div class="abc" data-test="3">
   <div id="xyz">3333</div>
</div>
</body>
<script>
$(document).ready(()=>{
	$('.abc').click(function(){
		alert($(this).find('#xyz').html());
	});
});
</script>
</html>

Date : 2019-08-18 20:13:31

By : Chaidhanan

No. 4

mr.v

โพสกระทู้ ( 4,762 )
บทความ ( 8 )

ตอบความคิดเห็นที่ : 3 เขียนโดย : Chaidhanan เมื่อวันที่ 2019-08-18 20:13:31

รายละเอียดของการตอบ ::

id เป็นเอกลักษณ์ ได้เฉพาะอันเดียวจากทั้งหน้าครับ ซ้ำกันไม่ได้
https://validator.w3.org/nu/#textarea ตัวอย่างส่งตรวจจะขึ้น id duplicate error

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Quote:
The id global attribute defines an identifier (ID) which must be unique in the whole document.

ถ้าจะใช้ซ้ำๆ ใช้ class ดีกว่า แล้วถ้าจะ class ซ้ำแต่จะเจาะจง จึงค่อยเรียกไล่ลำดับ เช่น .parent1 .class, .parent2 .class

ประวัติการแก้ไข
2019-08-19 03:21:05

Date : 2019-08-19 03:20:12

By : mr.v

No. 5

Chaidhanan

โพสกระทู้ ( 9,590 )
บทความ ( 2 )

ตอบความคิดเห็นที่ : 4 เขียนโดย : mr.v เมื่อวันที่ 2019-08-19 03:20:12

รายละเอียดของการตอบ ::

ถ้าใช้ DOM ก็ตามนั้นน่ะครับ

ผมบอกว่า แค่สามารถ ใช้ id เหมือนกันได้ แต่ต้องมี parent คุม
ถ้าใช้ jquery ซ้ำได้แต่ต้อง มี parent คุม เป็นการเล่นแร่แปรธาตุเอาอ่ะครับ

เน้นครับ เฉพาะ jquery บังเอิญไม่ได้เน้นเอาไว้
ก็ให้เขาทำความเข้าใจ กับ id class tag เพิ่มขึ้น

ประวัติการแก้ไข
2019-08-20 07:49:51

Date : 2019-08-19 08:23:47

By : Chaidhanan

No. 6

Mongkon.k

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

ตอบความคิดเห็นที่ : 2 เขียนโดย : yutthanagorn เมื่อวันที่ 2019-08-18 19:20:21

รายละเอียดของการตอบ ::

วิธีที่ถามหา ก็วิธีนี้หล่ะครับ ถ้าแนะนำอีกแบบจะ advance เลย จะงงไปกันใหญ่
บรรทัดที่ 23 ไม่ได้แก้ตามครับมันเลยไม่ขึ้น

Code (PHP)

<!doctype html>
<html lang="en">
<head>
<title>calculate number</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<?php
  include_once('php/connect.php');  
  $sql = "SELECT *
  FROM [status]";
  $query = sqlsrv_query($conn, $sql);
  $key=0;
  while($result = sqlsrv_fetch_array($query)){
?>
  <table>
    <tr>
      <td style=" vertical-align: middle;"><div align="center"><?=$result["name_status"];?></div></td>
      <td style=" vertical-align: middle;">
        <a data-toggle="modal" data-target="#detail_req_<?=$key?>" href="#"><?=$result["id_status"];?></a>
      </td>
        <!-- Modal -->
        <div class="modal fade"  id="detail_req_<?=$key?>">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title"><?=$result["name_status"];?></h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-6" align="right">รหัส Status : </div>
                  <div class="col-lg-6" ><?=$result["id_status"];?></div>
                </div>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-6" align="right">ชื่อ Status : </div>
                  <div class="col-lg-6" ><?=$result["name_status"];?></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Modal -->
    </tr>
  <?php
  $key++;
  }
  ?>
  </table>
 </body>
</html>

ฃ

หวังว่าจะเข้าใจนะครับ มันเป็นเรื่องเบสิกที่ต้องรู้จริงๆ

ประวัติการแก้ไข
2019-08-20 10:08:38

Date : 2019-08-20 10:07:33

By : mongkon.k

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การส่งค่า ID ของคอลัม ไปยัง Modal เพื่อโชว์ข้อมูลจาก Database เฉพาะตัวที่เลือก

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 05

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); การส่งค่า ID ของคอลัม ไปยัง Modal เพื่อโชว์ข้อมูลจาก Database เฉพาะตัวที่เลือก

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

ค้นหาข้อมูล

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

Notice

การส่งค่า ID ของคอลัม ไปยัง Modal เพื่อโชว์ข้อมูลจาก Database เฉพาะตัวที่เลือก