CodeIgniter Generator การส่งค่าไปประมวลผลที่ Controller ด้วย AJAX เพื่อคำนวณอายุตามวันเกิดที่เลือก

ตัวอย่างการเพิ่มอีเวนต์ On Change ให้กับ DatePicker เพื่อส่งค่าวันที่ไปประมวลผลใน Controller ผ่าน AJAX เพื่อหาอายุตามวันที่เลือก

เพิ่มฟังก์ชั่นที่ไฟล์ application/helpers/ci_utilities_helper.php

function ci_date_diff($start_date, $end_date = ''){
if($end_date == ''){
$end_date = date('Y-m-d');
}
$datetime1 = new DateTime($start_date);
$datetime2 = new DateTime($end_date);
$interval = $datetime1->diff($datetime2);
$diff = array();
$diff['year'] = $interval->format('%y');
$diff['month'] = $interval->format('%m');
$diff['day'] = $interval->format('%d');
$diff['hour'] = $interval->format('%h');
$diff['min'] = $interval->format('%i');
$diff['second'] = $interval->format('%s');
return $diff;
}

เพิ่มฟังก์ชั่นใน Controller ของโมดูลที่เราสร้างขึ้นมา เช่น
application/modules/test/controllers/Product.php 

public function get_age()
{
$thai_date = $this->input->post('select_date', TRUE);
$start_date = setDateToStandard($thai_date);
$end_date = date('Y-m-d');
$arr = ci_date_diff($start_date, $end_date);
echo "$arr[year] ปี $arr[month] เดือน $arr[day] วัน";
}

ที่ไฟล์ JavaScript ของโมดูลที่เราสร้างมา ให้เพิ่มโค้ดนี้ไว้ก่อน setDatePicker() ที่เป็นค่าเริ่มต้น
#order_date  คือ ไอดีของ INPUT ที่เป็นวันที่
#display_age คือ ไอดีของ Element ที่เราจะนำค่าอายุไปแสดง

// คำนวณอายุผ่าน AJAX (ต้องเอาไว้ก่อน setDatePicker() ทั่วไป )
setDatePicker('#order_date', {
yearRange : "-100:+0",
onSelect : Product.getAge('#order_date', '#display_age')
});

เพิ่มอีกคำสั่งเพื่อให้มีการคำนวณใหม่ เมื่อเปลี่ยนแปลงค่า
// Event On Change
$(document).on('change','#order_date', function(){
Product.getAge('#order_date', '#display_age') // <-- มีผลเมื่อมีการเปลี่ยนแปลง
});


ส่วนของฟังก์ชั่น Product.getAge()
Product คือชื่อเดียวกับ Controller จะเปลี่ยนไปตามการตั้งค่า Generate ในหน้า MVC

getAge: function(elem_date, elem_loading){
var obj_loading = $(elem_loading);
loading_on(obj_loading);
var frm_action = site_url('test/product/get_age');
var frm_data = 'select_date=' + $(elem_date).val();
frm_data += '&' + csrf_token_name + '=' + $.cookie(csrf_cookie_name);
$.ajax({
method: 'POST',
url: frm_action,
data : frm_data,
success: function (results) {
$(obj_loading).html(results);
},
error : function(jqXHR, exception){
loading_on_remove(obj_loading);
ajaxErrorMessage(jqXHR, exception);
}
});
}

ส่วนที่จะต้องแก้ไขก็คือ

var frm_action = site_url('test/product/get_age');


test/product/get_age  เป็นเพียงตัวอย่าง ต้องแก้ไขให้ตรงกับ URL ของหน้าเว็บที่เราสร้าง และฟังก์ชั่นที่เพิ่มเติมใน Controller








สรุปตำแหน่งของฟังก์ชั่น

การสร้างอีเวนต์ On Change ให้กับ Datepicker (จะต้องวางไว้ก่อนบรรทัด setDatePicker('.datepicker');)

ส่วนของชื่อ Class จะเปลี่ยนไปตาม Controller ของเรา (เช่นโมดูล Product หรือโมดูล Employee)

ส่วนของฟังก์ชั่น getAge (หรือฟังก์ชั่นใดๆที่เพิ่มขึ้น) ต้องอยู่ในคลาสที่สร้าง และต้องไม่ลืมเติม , (คอมม่า) ถ้าฟังก์ชั่นก่อนหน้านั้น ยังไม่มี (เครื่องหมายต่อฟังก์ชั่น)

ย้ายไปก่อนบรรทัด $(document).ready(function() {

อย่าลืมเปลี่ยน URL ให้ตรงกับ Controller ของเราด้วย

ส่วนของ Controller สร้างฟังก์ชั่น get_age() เพื่อคำนวณอายุ

PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"

ราคาสุดคุ้ม  4,500  บาท
http://fastcoding.phpcodemania.com