Ajax Autocomplete Style MVC ใน Joomla โดยใช้ Jquery UI

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 24243
Joined: 22/09/2008 6:18 pm
Contact:

Ajax Autocomplete Style MVC ใน Joomla โดยใช้ Jquery UI

Post by mindphp »

Ajax Autocomplete Style MVC ใน Joomla โดยใช้ Jquery UI
ทำให้ Joomla ไม่ต้องเปลี่ยนหน้าเพื่อดึงข้อมูลที่ต้องการมาแสดง เช่น List box หรือ text box แบบ Auto complete ตามรูป
MVC-autocomplete.PNG
MVC-autocomplete.PNG (5.1 KiB) Viewed 2523 times
ก่อนอื่นต้อง ดาวน์โหลด Jquery UI มา่ไว้ใน Component ของเราก่อน

เริ่มส่วของโค้ด
Controller

Code: Select all

    function Ajax()
    {
        // Check for request forgeries
//        JRequest::checkToken() or die( 'Invalid Token' );
        JRequest::checkToken( 'get' ) or die( 'Invalid Token' );  //ป้องกัน CSRF Attack
        
        $get = JRequest::get('get');

        $model = $this->getModel('lhc');
        $data = $model->getAjaxData($get);
        echo $data;
        jexit();
    } 
ส่วนของ Model

Code: Select all

    
// method สำหรับดึงข้อมูลจาก database 
function getAjaxData($get)
    {
        $db =& JFactory::getDBO();
        $user_name = $get['term']; // ถูกสร้างมาโดย Jquery autocomplete
        
        $sql    =    "SELECT login AS value FROM member 
                        WHERE 
                            mem_id='".$db->Quote($user_name)."' OR login LIKE '".$db->Quote($user_name)."%' ";
        $db->setQuery( $sql, 0, 10);
        $db->query();
        $rows    =    $db->loadAssocList();
        $json = $rows;
        return $this->array_to_json($rows);    // ส่งค่ากลับออกไปในณุปแบบ Json 
    }    
    
// method สำหรับแปลง array ให้ไปอยู่ในรูปแบบของ Json เอามาจาก Jquery ดัดแปลงนิดหน่อย เพื่อให้เข้ากับ Joomla 
    function array_to_json( $array ){
    
        if( !is_array( $array ) ){
            return false;
        }
    
        $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) ));
        if( $associative ){
    
            $construct = array();
            foreach( $array as $key => $value ){
    
                // We first copy each key/value pair into a staging array,
                // formatting each key and value properly as we go.
    
                // Format the key:
                if( is_numeric($key) ){
                    $key = "key_$key";
                }
                $key = "\"".addslashes($key)."\"";
    
                // Format the value:
                if( is_array( $value )){
                    $value = array_to_json( $value );
                } else if( !is_numeric( $value ) || is_string( $value ) ){
                    $value = "\"".addslashes($value)."\"";
                }
    
                // Add to staging array:
                $construct[] = "$key: $value";
            }
    
            // Then we collapse the staging array into the JSON form:
            $result = "{ " . implode( ", ", $construct ) . " }";
    
        } else { // If the array is a vector (not associative):
    
            $construct = array();
            foreach( $array as $value ){
    
                // Format the value:
                if( is_array( $value )){
                    $value = $this->array_to_json( $value );
                } else if( !is_numeric( $value ) || is_string( $value ) ){
                    $value = "'".addslashes($value)."'";
                }
    
                // Add to staging array:
                $construct[] = $value;
            }
    
            // Then we collapse the staging array into the JSON form:
            $result = "[ " . implode( ", ", $construct ) . " ]";
        }
    
        return $result;
    }     
ส่วนของ View

Code: Select all

    function display($tpl = null)
    {  
        $doc = &JFactory::getDocument();
        $doc->addScript( 'components/com_mindphp/javascript/jquery.js' );    
        $doc->addScript( 'components/com_mindphp/javascript/js/jquery-1.7.1.min.js' );    
        $doc->addScript( 'components/com_mindphp/javascript/js/jquery-ui-1.8.18.custom.min.js' );    
        $doc->addStyleSheet('components/com_mindphp/javascript/css/ui-lightness/jquery-ui-1.8.18.custom.css');
        $js    =    '    $(function() {
        $( "#user_name" ).autocomplete({
            source: "'.  'index.php?option=com_jcrm&c=lhc&task=Ajax&'. JUtility::getToken() .'=1" 
        });
    });';
        $doc->addScriptDeclaration($js);
            
        parent::display($tpl);
    }
 
อ่านเพิ่มเติมบทความเรื่องการเขียน Component Joomla
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests