คือผมต้องการคลิ๊ก link แล้วไปเรียกหน้าอื่นมาแสดงใน <div> ครับผมต้องทำอย่างไร

Questions? Answer and Share

เขียนโค๊ดติดปัญหา สอบถาม ระดมสมอง หาหนทางที่ดีที่สุดให้โค๊ดของคุณ ร่วมสร้างสรรค์สังคมนักพัฒนา เขียนโค๊ดติดบั๊ก อยากได้ไอเดีย เจอเรื่องดีๆ โพสถาม โพสแชร์ ได้ที่นี่

beta version

คือผมต้องการคลิ๊ก link แล้วไปเรียกหน้าอื่นมาแสดงใน <div> ครับผมต้องทำอย่างไร


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

 

PHP jquery 3 ม.ค. 2017, 15:08:06
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7
แสดงความคิดเห็น

คำตอบ-คำอธิบาย


<?php

if(!isset($_POST["i"])){                        // ตรวจสอบว่ามีค่าเริ่มต้นหรือยัง ไม่มี ให้เป็น 0
    $i=0;
}
else{
    $i = $_POST["i"];                           // อ่านค่า i จาก form
    if(!empty($_POST["choice"])){        // ตรวจสอบว่ากด ที่ choice หรือไม่ถ้าใช่ทำตาม choice
        $c = $_POST["choice"];
        $i = $i+$c;
    }
    else{                                           //  ถ้าไม่ได้กด choice แสดงว่ากดปุ่ม เพิ่ม/ลด
        if(!empty($_POST["add"])){
            $i++;
        }else{
            $i--;
        }
    }
}

/// ส่วนแสดงผลตามรูป 
echo 'show i = ' . $i;
echo '<form action="test.php" method="post">';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="1">1 (i+1)<br>';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="2">2 (i+2)<br>';
echo '<input type="radio" onChange="this.form.submit();" name="choice" value="3">3 (i+3)<br>';
echo '<input type="hidden" name="i" value="'. $i . '">'; 
echo '<button onClick="this.form.submit();" name="add" value="1">+</button>1
<button onClick="this.form.submit();" name="minus" value="1">-</button> show i =' .$i;
echo '</form>';


?>

 

code ด้านบนเป็นการทำงานฝั่ง server-side โดยใช้ form มาช่วย ถ้าอยากให้เป็น client-side ให้ใช้ javascript ตรวจสอบ onClick หรือ onChange ตรงส่วนแสดงผลแล้วเรียกไปทำงานในฟังก์ชันแทนการ submit  เช่น onClick="increment();" แล้ว ใช้ DOM ช่วยในการแสดงผล ส่วน คลิก link ให้แสดงผล ลองศึกษา ajax แล้วใช้ DOM แสดงผล (ส่ง request แล้วนำ content มาโชว์ใน div)  

3 ม.ค. 2017, 17:10:40
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

ที่ผมต้องการคือ แบบนี้นะครับ

ต้องการกด Menu ทางซ้าย แล้ว ตรงด้าน jumbotron ก็เปลี่ยนไปตาม Menu ที่เรากดอะไรแบบนี้ครับผม ขอบคุณครับ

3 ม.ค. 2017, 21:25:36
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

ใช้ framework หรือเปล่าครับ

3 ม.ค. 2017, 21:32:29
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

อันนี้ผมก็ไม่แน่ใจเหมือนกันนะครับคือผมเพิ่งเรียนรู้อ่าครับ แนะนำหน่อยนะครับ TT ทำตาม youtube มาอีกทีนึงเหมือนกันครับ

3 ม.ค. 2017, 21:38:55
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

สี่เหลี่ยมเทาๆ นี่อยู่ใน .php อีกไฟล์หรือเปล่าครับกับหน้า menu

3 ม.ค. 2017, 22:05:03
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

อยู่คนละไฟล์กันครับผม

3 ม.ค. 2017, 22:06:14
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

ลองมองหน้านั้น แยกออกแบบนี้นะครับ

ที่เป็น menu bar สมมติเป็นไฟล์ menu.php ไฟล์หนึ่ง ที่มีกล่อง div id="show" อยู่

ส่วนอีกไฟล์เป็น data.php ไฟล์ที่มี data ที่ต้องการแสดงผลใน div หน้าที่มี menu bar สมมติในนั้นมีสคริปต์แบบนี้

<?php
echo "<h1>TEST HEADING STYLE</h1><p>This is paragraph in the page that you want to show</p><button class="btn btn-primary">Learn more</button>";
?>

ให้เพิ่ม onclick ลงบน tag a ของลิ้งค์ใน menu.php <a onclick="send();"> แล้วเพิ่ม javascript 

<script>
		function send(){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
				if(this.readyState == 4 && this.status == 200){
					document.getElementById("show").innerHTML = this.responseText;
				}
			};
			xmlhttp.open("GET","http://localhost/test/data.php",true);
			xmlhttp.send();
		}
</script>

ตรง /test/data.php ระบุ path ให้ตรงกับที่เก็บไฟล์นะครับ 

หลังจากนั้นลองรันแล้วคลิกที่ ลิ้ง นั้นดู data ที่อยู่ใน data.php จะไปโชว์อยู่ในกล่อง div id="show" ในไฟล์ menu.php

3 ม.ค. 2017, 22:18:39
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

ได้ผลอย่างไรบอกด้วยนะ

3 ม.ค. 2017, 22:29:34
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

ขอบคุณสำหรับโค้ดนะครับผมคือมันไม่ขึ้นอะไรเลยครับ เว็บนี้มันแบ่งหัวท้ายครับ ส่วนหัวจะรวม menu ไปด้วย

หน้า index.php

<?php
include 'html_head.php';    (ส่วน menu จะอยู่หน้านี้ครับ)
?>



ส่วนเนื้อหา



<?php
include 'html_foot.php';
?>

ผมสามารถก๊อปหน้านี้แล้วไปเปลี่ยนตรงส่วนเนื้อหาทำอีกหน้า แล้วใส่ลิ้งค์ตามปกติเลยจะดีไหมครับ?

3 ม.ค. 2017, 22:36:01
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

ถ้าไม่ขึ้น ลองเปิด console (google chorme กด F12 ) แล้วคลิกลิ้งใหม่ดู ตรง console มันน่าจะมี error แจ้งนะครับ  ถ้ามีคืออะไรเผื่อแก้ไขได้ครับ

3 ม.ค. 2017, 22:39:30
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

แบบนั้นก็ได้ครับ ก็คือเหมือนใส่ code เข้าไปในทุกหน้า .php 

3 ม.ค. 2017, 22:41:32
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

โห้ยยย มาแล้วครับผม ขอบคุณมากๆนะครับผมก็เพิ่งรู้ว่าเปิด console ได้ TT ขอบคุณนะครับผม

3 ม.ค. 2017, 22:46:35
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

มาแล้ว คือ ใช้ code แบบ include หรือ ajax ครับ  console เวลามันมีปัญหามันใช้เช็ค error ได้ ถ้ามี error ตอนทำ ajax อยากรู้ว่ามันขึ้นอะไรครับ เผื่อแก้ได้ 

3 ม.ค. 2017, 22:48:21
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

<script> function send(){ 
var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ 
if(this.readyState == 4 && this.status == 200){ 
document.getElementById("show").innerHTML = this.responseText; 
} 
};
 xmlhttp.open("GET","http://localhost/test/data.php",true); xmlhttp.send(); } 
</script> 

ตามนี้เลยครับผม แต่ตอนนี้ menu ที่อยู่ใน <?php include 'html_head.php'; ?> หาวิธี active มันไม่ได้ครับ

3 ม.ค. 2017, 22:55:04
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

ถ้าให้มันขึ้นสีต่างจากเพื่อนในแถบ menu พวก javascript css ก็ทำได้ครับ 

3 ม.ค. 2017, 23:02:44
Weanich Sanchol
Weanich Sanchol popcon006
ตั้ง:0 ตอบ:12

อ่อครับพอดีผมไม่รู้เรื่องนี้เลยอ่าครับ = ='' นั่งหามาหลายเว็บแล้ว

3 ม.ค. 2017, 23:04:51
North Anuwat
North Anuwat kintoun
ตั้ง:1 ตอบ:7

คำตอบ-คำอธิบายของคุณ



กลับขึ้นบน