ปัญหาการใช้ datepicker ใน jqueryui กรณี clone input แล้ว
datepicker ใช้งานไม่ได้ เนื่องจาก มีการ gen ค่า id ของ input ซ้ำกัน
ตั้งแต่มีการเรียกใช้ วิธีการแก้ปัญหา
- กำหนด id เป็นค่าว่าง
- ยกเลิก css hasDatepicker ที่ได้จากการ clone
- ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone
- เรียกใช้ datepicker() ใหม่อีกครั้ง
ตัวอย่าง
โค้ด คำอธิบายแสดงในโค้ด
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
"0"=>"base",
"1"=>"black-tie",
"2"=>"blitzer",
"3"=>"cupertino",
"4"=>"dark-hive",
"5"=>"dot-luv",
"6"=>"eggplant",
"7"=>"excite-bike",
"8"=>"flick",
"9"=>"hot-sneaks",
"10"=>"humanity",
"11"=>"le-frog",
"12"=>"mint-choc",
"13"=>"overcast",
"14"=>"pepper-grinder",
"15"=>"redmond",
"16"=>"smoothness",
"17"=>"south-street",
"18"=>"start",
"19"=>"sunny",
"20"=>"swanky-purse",
"21"=>"trontastic",
"22"=>"ui-darkness",
"23"=>"ui-lightness",
"24"=>"vader"
);
$jquery_ui_theme=$theme[14];
?>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/jquery-ui.min.js"></script>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
}
body{
font-size:12px;
}
div.test_demo_main{
margin:auto;
width:75%;
}
.ui-datepicker{
/* width:150px; */
font-family:tahoma;
font-size:11px;
text-align:center;
}
</style>
</head>
<body>
<div class="test_demo_main">
<br />
<br />
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<tr class="firstTr">
<td width="119">
<select name="data1[]" id="data1[]">
<option value="">Please select</option>
<option value="1">data1</option>
<option value="2">data2</option>
</select></td>
<td width="519">
<input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
<input type="text" class="text_data datepicker" name="data2[]" value="" />
</td>
</tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<button id="addRow" type="button">+</button>
<button id="removeRow" type="button">-</button>
<input name="h_all_id_data" type="hidden" id="h_all_id_data" value="" />
<input type="submit" name="Submit" id="Submit" value="Submit" /></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(function(){
$(".datepicker").datepicker();
$(document.body).on("click","#addRow",function(){
// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
$(".firstTr:eq(0)").clone(true)
.find("input").attr("value","").end()
.find("select").attr("value","").end() //
.appendTo($("#myTbl"));
var lastIndex=$(".datepicker").size()-1; // หา index ของตัว input ล่าสุด
$(".datepicker:eq("+lastIndex+")")
.attr("id", "") // - กำหนด id เป็นค่าว่าง
.removeClass('hasDatepicker') // - ยกเลิก css hasDatepicker ที่ได้จากการ clone
.unbind() // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone
.datepicker(); // - เรียกใช้ datepicker() ใหม่อีกครั้ง
});
$("#removeRow").click(function(){
// // ส่วนสำหรับการลบ
if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
$("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
}else{
// เหลือ 1 รายการลบไม่ได้
alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
}
});
});
</script>
</body>
</html>
เนื้อหาที่เกี่ยวข้อง