อธิบายเป็น step ให้
ตัวอย่างที่จะเขียนผมเอา component contact มาดัดแปลงไปตัวอย่างให้ดู เขียนบน Joomla 2.5 แต่ใช้ได้กับ Joomla 1.6, 17 ด้วย
ไปที่ administrator\components\com_contact\views
สร้าง File และ Folder ให้มีโครงสร้างแบบนี้
ajaxRespons
view.raw.php
เป็นการสร้างส่วนของ Respons
เขียน code ใน view.raw.php ตามนี้
Code: Select all
<?php
defined('_JEXEC') or die;
jimport('joomla.application.component.view');
class ContactViewAjaxRespons extends JView {
public function display($tpl = null) {
$id = JRequest::getCmd('id',null);
$model = JModel::getInstance('contact', 'ContactModel');
if(preg_match('/^\d+$/',$id)){
$contact = $model->getItem($id);
}
if ($contact) {
$data = array('Contact Detail |Name| ' . $contact->name .
' |Address| ' . str_replace(array("\r\n","\n","\r"), '', utf8_decode($contact->address)));
} else {
$data = array('There is noting');
}
$document = & JFactory::getDocument();
$document->setMimeEncoding('application/json');
JResponse::setHeader('Content-Disposition', 'attachment;filename="' . $this->getName() . '.json"');
echo json_encode($data);
}
}
อธิบายคือ JRequest รับค่า id มาถ้าไม่มีให้คืนค่าเป็น null
สร้าง model จาก contact แล้วใช้ getItem ดึงข้อมูลมา โดยส่งค่า $id เป็นค่าของ PK ที่ต้องการดึง โดยดึงข้อมูลจาก
ตาราง xxx_contact_details จากนั้น ส่งออกเป็น json โดยจะแสดงข้อมูลเป็น ชื่อ และที่อยู่ แต่ถ้าไม่มีข้อมูลหรือส่งไปมั่ว ๆ จะแสดง There is noting
ทดลองเปิด administrator/index.php?option=com_contact&view=ajaxRespons&format=raw
จะมีหน้าต่าง ขึ้นมาบอกให้บันทึกข้อมูล ที่มีนามสกุล json
และเมื่อเปิดออกดูจะมีข้อมูลว่า ["There is noting"] แสดงว่าเป็นอันใช้ได้
สาเหตุที่เปลี่นจาก format เป็น raw แทน json เพราะว่าผมใช้ google chrome จะขึ้นมาว่า
ข้อผิดพลาด 349 (net::ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION):
ได้รับส่วนหัวตำแหน่งเนื้อหาผิดพลาดหลายรายการ การทำงานนี้ไม่ได้รับอนุญาตเพื่อป้องกันการโจมตีจากการแยกการตอบสนองของ HTTP
แต่ firefox กลับไม่มีปัญหา เลยเปลี่ยนมาเป็น raw แทน เพื่อจะที่ใช้ได้ทั้ง firefox และ google chrome
ใน joomla 1.6,17 สามารถใช้ format เป็น json ได้ โดยที่ไม่เป็นปัญหากับ google chrome ทั้งที่ใช้ code ชุดเดียวกัน
ต่อไปสร้างส่วนของ Request
ใน View เช่นเดิม
สร้าง File และ Folder ให้มีโครงสร้างแบบนี้
ajaxRequest
view.html.php
tmpl
default.php
เขียน code ใน view.html.php ตามนี้
Code: Select all
<?php
defined('_JEXEC') or die;
jimport('joomla.application.component.view');
class ContactViewAjaxRequest extends JView {
public function display($tpl = null) {
$ajax = <<<EOD
window.addEvent('domready',function() {
$('drop-down').addEvent( 'change', function() {
var selectValue=$('drop-down').value;
$('ajax-container').empty().addClass( 'ajax-loading' );
var myRequest = new Request({
url: 'index.php?option=com_contact&view=ajaxRespons&format=raw&id='+ selectValue,
method: 'get',
onSuccess: function(responseText){
$('ajax-container').removeClass('ajax-loading').set('html',responseText);
},
});
myRequest.send();
});
});
EOD;
$doc = & JFactory::getDocument();
$doc->addScriptDeclaration($ajax);
$model = JModel::getInstance('contacts', 'ContactModel');
foreach ($model->getItems() as $contact) {
$data[$contact->id] = $contact->name;
}
$options = array();
foreach ($data as $key => $value) {
$options[] = JHTML::_('select.option', $key, $value);
}
$options[] = JHTML::_('select.option', 342343, 'Rock Man');
$options[] = JHTML::_('select.option', 'abcd', 'Zero');
$options[] = JHTML::_('select.option', 'Mario', 'Mario');
$this->assign('options', $options);
parent::display($tpl);
}
}
และเปิด default.php เพิ่ม code เข้าไปดังนี้
Code: Select all
<?php
defined('_JEXEC') or die;
JHTML::_( 'behavior.mootools' );
?>
<div>
<?php echo JHTML::_('select.genericlist', $this->options, 'drop-down');?> 
<span id="ajax-container">Show Contact Detail </span>
</div>
อธิบายคือ สร้าง combo box จะตาราง xxx_contact_details โดย value จะเป็นค่า PK
และเพิ่มข้อมูลมั่ว ๆ เข้าไปเพื่อทดสอบ
เมื่อมีการเลือกข้อมูล จะส่งข้อมูลจากค่า value ที่เลือกไปให้กับ ajaxRespons แล้วส่งค่ากลับมา
เพื่อ update ข้อมูลใน <span id="ajax-container"></span>
ส่วนตรง JHTML::_( 'behavior.mootools' ); คือคำสั่งเรียกใช้ งาน mootoos framework