รบกวนช่วยทีคับ งานด่วนมากคับ ajax+php คับ คืองานผมจะมีสิสบอกซ์ซึ่งดึงจาก db มาน่ะคับ แล้วข้างๆ จะมีลิงค์ เมื่อกด จะมี popup ขึ้นมา
jquery ajax selectbox
Date :
2009-06-19 07:12:29By :
num
พอเข้าใจแบบกว้างๆน่ะคับ แต่คือผมเพิ่งเริ่มเขียน ajax น่ะคับ มันเลยเริ่มไม่ค่อยจะถูก อีกอย่างก้คือ เราจะส่ง ajax จาก popup ให้ list มันรู้ได้ไงอ่ะคับ ว่า db เพิ่มแล้วนะ รีเฟส ได้แล้ว ไรแบบนี้อ่ะคับ
Date :
2009-06-19 10:22:59By :
mumin
ถ้าดูจากโค้ดที่ผมเขียน ภายใน ไฟล์ที่แสดง popup window
Date :
2009-06-19 10:38:06By :
num
ก็รับ ค่าจากการรีเควส โดยใช้ ajax เช่น
Date :
2009-06-19 10:38:40By :
pjgunner
window.opener.refreshData('s1'); แล้ว รีเฟรส แค่ ลิสนั้นๆ แค่อันเดียวมั้ยคับ หรือ รีทั้งหน้าคับ
Date :
2009-06-19 11:23:23By :
mumin
ถ้าเป็นไปได้ ขอรบกวนท่านๆ ช่วยเขียนเป็นตัวอย่างให้ทีคับ แบบ ลิสเดียวในหน้าแม่ และpopup เดียวก้พอคับ ให้ดูว่าเรียก อะไร ส่งอะไร ยังไง เพื่อเป็นแนวทางคับ เพราะผมมือใหม่จิงๆคับ ขอบคุณทุกท่านคับ
Date :
2009-06-19 11:26:58By :
mumin
ความรู้ต้องหามาเองนะครับ จะเรียกแบบไหนก็ได้นะครับ ถ้าทำได้
Date :
2009-06-19 11:55:30By :
pjgunner
ผมรวมโปรแกรมไว้ในหน้าเดียวทำให้อ่านยากหน่อยครับPage3 (Form หลัก) จะโหลด Page2 (tag options [?load]) Page1-1 (หน้าต่าง Popup [?window]) Page1-2 (หน้าต่าง Popup [?window]) ซึ่งรับค่า $_POST จาก Page 1-1 Page2 (tag options [?load]) <?php session_start(); header('Content-type:text/html;charset=tis-620'); ?>
<?php if (isset($_GET['window'])): //[Page1-1]หน้าต่าง popup ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="th" xml:lang="th">
<head>
<title>add to s1</title>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
</head>
<body>
<?php if (!empty($_POST['newname'])): //[Page1-2]รับค่าจาก form มาเพิ่มให้กับ session ?>
<?php
$_SESSION['table']['s1'][] = array(
'id'=>(count($_SESSION['table']['s1'])+1),
'name'=>$_POST['newname']
);
echo 'insert <b>'.$_POST['newname'].'</b> to <b>s1</b> successfully';
?>
<script>
// บอกให้หน้าต่างหลัก refresh selectbox ที่มี id เท่ากับ s1
window.opener.refreshData('s1');
</script>
<?php endif;?>
<br /><br />
<!-- ส่งข้อมูลแบบ post เพื่อเพิ่มข้อมูลใหม่ -->
<form method="post" action="?window">
s1 <input type="text" name="newname" value="" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
<?php exit();endif;?>
<?php if (isset($_GET['load'])): //[Page2]สร้าง tag option ให้กับ selectbox ?>
<?php foreach($_SESSION['table']['s1'] as $r):?>
<option value="<?php echo$r['id'];
?>"><?php echo htmlspecialchars($r['name']);?></option>
<?php endforeach;?>
<?php exit();endif;?>
<?php
//[Page3]form หลัก
//สมมุติว่าข้อมูล session เป็นข้อมูลในตาราง
$data = array(array('id'=>1,'name'=>'one'),array('id'=>2,'name'=>'two'));
$_SESSION['table'] = array();
$_SESSION['table']['s1'] = $data;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="th" xml:lang="th">
<head>
<title>dynamic form</title>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
function openw(){
//เปิด popup window
var w = window.open ("?window","win_add",
"menubar=0,resizable=1,left=150,top=50,width=350,height=250");
w.focus();
}
function refreshData(table){
//โหลด option ทาง ajax ให้กับ selectbox s1
$('#'+table).load('?load',{},function(){
$(this).fadeOut().fadeIn();
});
}
$(function(){
refreshData('s1');
});
/*]]>*/
</script>
</head>
<body>
<form method="post" action="?post">
s1 <select id="s1"><!--options--></select>
<a href="#" onclick="openw('s1');">add</a>
<br />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
Date :
2009-06-19 12:51:32By :
num
ตัวอย่าง
Date :
2009-06-19 13:33:38By :
pjgunner
ขอบคุณทุกท่านจิงๆคับ ผมจะลองทำดูคับ ขอบคุณอีกครั้งคับ ว่าแต่มีหนังสือ ajax และ jquery ดีๆ แนะนำบ้างมั้ยคับ ไทย หรือ eng ก็ได้คับ
Date :
2009-06-19 13:39:40By :
mumin
หนังสือที่อ่าน มีน้ำมากกว่าเนื้อ จนน่าเบื่อ คับ ไม่อยากให้
Date :
2009-06-19 13:53:26By :
pjgunner
พี่เอี่ยวอ่าน หนังสืออะไร อยู่ครับ แนะนำน้องนุ่งหน่อย
Date :
2009-06-19 14:41:50By :
panyapol
คุณ num คับ โค้ดที่ให้มาน่ะคับ ผมลองเล่นดูแล้วคับ สงสัยว่า ตอนที่ submit จาก popup น่ะคับ list หน้าแม่มันรีเฟสแบบเอาค่ามาจาก text ตรง popup แค่นั้น หรือว่ามันรีเฟสตัวเองใหม่เลยคับ เพราะว่า list หน้าแม่ของผมจะต้องมาจาก db น่ะคับ มันจะรีเฟสและเรียกข้อมูลจาก db ใหม่เลยมั้ยคับ ถ้ามีการ connect db อยู่น่ะคับ
Date :
2009-06-19 15:36:43By :
mumin
ตรงหน้า popup จะเรียกคำสั่ง window.opener.refreshData('s1'); ซึ่งเป็นคำสั่งในหน้า main$('#s1').load('?load',{},function(){ //โหลดข้อมูลจาก test.php?load
$(this).fadeOut().fadeIn(); //ตรงนี้สั่งให้กระพริบเฉยๆ
});
<?php if (isset($_GET['load'])): //[Page2]สร้าง tag option ให้กับ selectbox ?>
<?php foreach($_SESSION['table']['s1'] as $r):?>
<option value="<?php echo$r['id'];
?>"><?php echo htmlspecialchars($r['name']);?></option>
<?php endforeach;?>
<?php exit();endif;?>
<?php header('Content-type:text/html;charset=tis-620'); ?>
<?php mysql_connect('localhost','root','12345'); ?>
<?php mysql_select_db('test'); ?>
<?php mysql_query('SET NAMES TIS620'); ?>
<?php $result = mysql_query('SELECT id,name FROM s1 ORDER BY name'); ?>
<?php while($r = mysql_fetch_assoc($result)){ ?>
<option value="<?php echo$r['id'];
?>"><?php echo htmlspecialchars($r['name']);?></option>
<?php } ?>
$('#s1').load('load-option.php',{},function(){
$(this).fadeOut().fadeIn();
});
Date :
2009-06-19 16:05:31By :
num
คุณ num คับ รบกวนอีกทีครับ คือผมเอามาลองทำแล้วอ่ะคับ ผมสับสนเรื่อง page น่ะคับ คือ ของผมมีหน้าหลักซึ่งมีโค้ด ที่ตัดมาเฉพาะลิสนั้นดังนี้คับCode <td class="labelWidth110">ประเภทข่าว<span class="require"> * </span> :</td>
Code <?
Date :
2009-06-21 11:05:26By :
mumin
$intCodTyp ไม่รู้มาจากไหนอะครับ
Date :
2009-06-21 11:49:02By :
num
เป็น id ของ ลิสบอก ที่ต้องการจะรีเฟสน่ะคับ อยู่ในหน้า แม่น่ะคับ แบบเอาไว้คงค่าตอน edit น่ะคับ ไม่เกี่ยวไรเลยคับ คือตอนนี้ในหน้าแม่ผมได้ใส่Code function openw(){
ผมไม่รู้ว่า function refreshData ตรง ?load ต้องแก้ยังไง และผมแก้ s1 เป็น intCodTyp หน้า page ก้เพี้ยนเลยคับ ไม่ทราบว่า function ไหนจะต้องใส่ในหน้าไหนบ้างอ่ะคับ เพราะโค้ดที่คุณ num บอกมา มันรวมในหน้าเดียวอ่ะคับ Code if($submit == "บันทึก"){
Date :
2009-06-21 12:06:18By :
mumin
ไม่ค่อยแน่ใจว่าโค้ดถูกหรือเปล่านะครับเพราะไม่ได้ทดสอบจริงๆ แต่น่าจะใช้เป็นแนวทางได้ครับ<?php
// ไฟล์ intCodTyp.php
include "info.php";
include("./include/function.php");
?>
<option value="" SELECTED> --- กรุณาเลือก --- </option>
<?php
$strQry = "SELECT intCodTyp, chvDes as chvDes01 " ;
$strQry .= "FROM OTHCPNMTB01 " ;
$strQry .= "WHERE chrSta = '1' " ;
$strQry .= "ORDER BY intCodTyp ASC " ;
$rcsRs = pg_exec($strQry) or die(pg_errormessage()) ;
while($rs = pg_fetch_array($rcsRs)){
$arrIntCodTyp[] = $rs["intcodtyp"];
$arrChvDes01[] = $rs["chvdes01"];
}
?>
<? for($i = 0; $i < sizeof($arrIntCodTyp); $i++){ ?>
<option value="<?= $arrIntCodTyp[$i]; ?>"><?= $arrChvDes01[$i]; ?></option>
<? } ?>
<!-- หน้าหลัก -->
<script>
//หน้าเดียวกับ selectbox
function refreshData(box,selectedValue){
var boxId = '#'+box;
//กรณีการ refresh จาก popup ให้เลือกค่าเดิม
if (typeof(selectedValue)=='undefined'){
selectedValue = $(boxId+' option[selected]').val();
}
$(boxId).load(box+'.php'+,{},function(){
$(this).fadeOut().fadeIn();
//กรณี refresh ครั้งแรกตอนโหลดหน้าหลัก
//ให้เลือกค่าจากการ parameter ตัวที่สอง (จากฐานข้อมูล)
if (typeof(selectedValue)!='undefined'){
$(boxId+' option[value='+selectedValue+']').attr('selected','selected');
}
});
}
$(function(){
//เลือกค่าจาก intCodType ซึ่งเป็นค่าในฐานข้อมูล
refreshData('intCodTyp','<?php echo$intCodType;?>');
});
</script>
....
<select name="intCodTyp" id="intCodTyp"></select>
<!-- หน้าต่าง popup -->
<script>
if($submit == "บันทึก"){
$strQry = "INSERT INTO OTHCPNMTB01 (intCodTyp, chvDes, chrSta, chvIns, dtmIns, chvUpd, dtmUpd) ";
$strQry .= "VALUES('$maxID', '$chvDes', '$chrSta', '$user', now(), '$user', now()) ";
$rcsRs = pg_query($strQry);
$vars = "?page=".$page."&show=".$bShow."&showFlg=".$showFlg."&lOrder=".$lOrder."&nOrder=".$nOrder;
//สังเกตว่าไม่ได้ส่ง parameter ตัวที่สอง หมายถึงให้เลือกค่าเดิม
echo "<script language=\"JavaScript\"> window.opener.refreshData('intCodTyp'); </script>";
}
</script>
Date :
2009-06-21 12:38:08By :
num
ขอบคุณคับ แต่ว่าตอนนี้ผมลองทำดูแล้ว ปัญหา มันอยู่ที่ ตัวนี้อ่ะคับ Code <select name="intCodTyp" id="intCodTyp"><a href="#" onclick="openw('intCodTyp');">เพิ่ม</a>
Date :
2009-06-21 13:13:18By :
mumin
ไม่แน่ใจนะครับว่าเกี่ยวป่าว แต่ผมพิมพ์ชื่อตัวแปร $intCodType ผิดน่ะครับ $intCodTyp
Date :
2009-06-21 13:16:53By :
num
คุณ num คับ ลิสบอก ที่โชวในหน้าแม่นี่ ตอนเปิดหน้าแม่มา มันดึง db มาจากหน้า intCodTyp.php หรอคับ ไม่ได้ดึงมาจาก select ตรงหน้าแม่หรอคับ ถ้ายังไง รบกวนคุณ num แอด msn ผมนิดได้มั้ยคับ เพราะงานนี่ด่วนและสำคัญจิงๆคับ [email protected]
Date :
2009-06-21 13:29:16By :
mumin
Server 05
Load balance : Server 05
เขียนจนหิวข้าวเลยครับ ต้องเลี้ยงข้าวผมมื้อนึงด้วย อิๆ
