PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Tag Archive เจคิวรี่

  • Home   /  
  • Posts tagged "เจคิวรี่"

jQuery: Ajax รับข้อมูลแบบ stream

บางงานต้องใช้เวลาในการทำงาน ถ้าปล่อยให้ user รออย่างเดียวก็จะกังวลว่ามันจะทำงานสำเร็จหรือมี error รึเปล่า เคยเขียนวิธี jQuery Ajax แบบอนุกรมตามลำดับ ไว้ แต่อาจจะไม่เหมาะถ้า task บางอย่างมันยาวนานกว่านั้น ถึงลองเขียนแบบ flush stream / streaming ดู

ตัวจำลองเวลาโหลดโดยสุ่มถ่วงเวลาให้เหมือนจริง

<?php

set_time_limit(0);

header('Cache-Control: no-cache');
header('Content-Type: text/event-stream');

function task($ad, $message, $progress = '')
{
    $data = [
        'id' => $ad,
        'message' => $message,
        'progress' => $progress,
    ];

    echo json_encode($data);

    ob_flush();
    flush();
}

/* loop processing  */
for ($a = 1; $a <= 10; $a++) {
    task($a, 'on iteration ' . $a . ' of 10', $a * 10);

    sleep(rand(1, 10));
}

task('CLOSE', 'Process complete');

ตัวอย่างการใช้ jQuery.ajax()

<!DOCTYPE>
<html>

<head>
    <title>Flushed ajax test</title>
    <meta charset="UTF-8" />
    <style>
        #results {
            background: #eee;
            border: 1px solid #c00000;
            height: 250px;
            overflow: auto;
            padding: 10px;
            width: 98%;
        }
    </style>
</head>

<body>
    <div id="results" style=""></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        var last_response_len = false;
        $.ajax('stream.php', {
                xhrFields: {
                    onprogress: function(e) {
                        var this_response, response = e.currentTarget.response;
                        if (last_response_len === false) {
                            this_response = response;
                            last_response_len = response.length;
                        } else {
                            this_response = response.substring(last_response_len);
                            last_response_len = response.length;
                        }
                        console.log(this_response);
                        data = $.parseJSON(this_response);
                        console.log(data);
                        $('#results').append('<br>' + data.message);
                    }
                }
            })
            .done(function(data) {
                console.log('Complete response = ' + data);
                $('#results').append('<br><br>Complete response = ' + data);
            })
            .fail(function(data) {
                console.log('Error: ', data);
            });
        console.log('Request Sent');
    </script>
</body>

</html>

ถ้าดูใน console.log จะเห็นว่าตัวแปร data มันจะโดนเพิ่มขึ้นมาเรื่องๆ ดังนั้นถ้ามี response มาจาก server เยอะๆ ก็ต้องแก้ไข code ด้วย

update วิธีเขียนให้ง่ายขึ้นและทำงานบน nginx ได้ ตามที่เขียนใน NGINX: แสดงผลลัพธ์ทันที

<?php

set_time_limit(0);

header('Cache-Control: no-cache');
header('Content-Type: text/event-stream');
header('X-Accel-Buffering: no');

set_time_limit(0);

ob_implicit_flush(true);
ob_end_flush();

function task($ad, $message, $progress = '')
{
    $data = [
        'id' => $ad,
        'message' => $message,
        'progress' => $progress,
    ];

    echo json_encode($data);
}

/* loop processing  */
for ($a = 1; $a <= 10; $a++) {
    task($a, 'on iteration ' . $a . ' of 10', $a * 10);

    sleep(rand(1, 10));
}

task('CLOSE', 'Process complete');

ส่งค่าตัวแปรในเช็กบ็อกซ์โดย jQuery

เขียนระบบ update ข้อมูลโดยใช้ ajax แต่ปัญหาคือ ใน form นี้มันมี input อยู่หลายตัว และเพราะว่าต้องการแค่ input ที่ชื่อ items[] ตัวเดียวเท่านั้น ถ้าส่ง data ไปโดยใช้ jQuery โดยปกติจะส่งค่าไปโดยใช้ .serialize() หรือ .serializeArray() ก็จะส่งตัวแปรอื่นๆ ที่ไม่จำเป็นติดไปด้วย จนทำให้ url ยาวจนเกิน limit ทำให้ต้องหาวิธีส่งไปเฉพาะตัวที่ใช้จริงๆ เท่านั้น

ตัวอย่างการส่งค่าไปในแบบ array

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>checkbox to array</title>
</head>

<body>
    <ul>
        <li>
            <input name="items[]" type="checkbox" value="c1">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c2">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c3">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c4">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c5">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c6">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c7">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c8">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c9">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c10">
        </li>
    </ul>
    <div id="result"></div>
    <button id="sendBtn" type="submit">Send</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
    $(function() {

        $('#sendBtn').click(function() {
            var checkboxs = $('input[name="items\\[\\]"]:checked');

            alert('checked ' + checkboxs.length + ' items');

            var values = checkboxs.map(function() {
                    return $(this).val();
                })
                .get();

            var params = {
                "id": 24,
                "items": values,
            };
            $.ajax({
                "data": params,
                "success": function(data) {
                    $('#result').html(data);
                },
                "type": "GET",
                "url": "processing.php",
            });

        });

    });
    </script>
</body>

</html>

ตัวอย่างการส่งค่าไปในแบบ string

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>checkbox to string</title>
</head>

<body>
    <ul>
        <li>
            <input name="items[]" type="checkbox" value="c1">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c2">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c3">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c4">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c5">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c6">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c7">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c8">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c9">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c10">
        </li>
    </ul>
    <div id="result"></div>
    <button id="sendBtn" type="submit">Send</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
    $(function() {

        $('#sendBtn').click(function() {
            var checkboxs = $('input[name="items\\[\\]"]:checked');

            alert('checked ' + checkboxs.length + ' items');

            var values = checkboxs.map(function() {
                    return $(this).val();
                })
                .get()
                .join();

            alert('values = ' + values);

            var encoded = encodeURIComponent(values);

            alert('URL encoded = ' + encoded);

            var decoded = decodeURIComponent(encoded);

            alert('URL decoded = ' + decoded);

            $.ajax({
                "data": 'id=24&items=' + encoded,
                "success": function(data) {
                    $('#result').html(data);
                },
                "type": "GET",
                "url": "processing.php",
            });

        });

    });
    </script>
</body>

</html>

ตัวอย่างการนำค่าไปเขียนเป็น sql query

<dl>
  <dt>method="GET"</dt>
  <dd><?=print_r($_GET, true);?></dd>
  <dt>method="POST"</dt>
  <dd><?=print_r($_POST, true);?></dd>
</dl>
<?php
if (is_array($_REQUEST['items'])) {
    echo '<br>send items by array';
    $where = "WHERE id IN('" . implode("', '", $_REQUEST['items']) . "')";
} else {
    echo '<br>send items by string';
    $where = "WHERE id IN('" . str_replace(',', "', '", $_REQUEST['items']) . "')";
}

$query = "SELECT *
FROM table_name
$where;";

echo '<br>example query = ' . $query;

เลือกใช้การส่งแบบสตริงหรืออาร์เรย์ ก็แล้วแต่ความสดวก ที่ต้องนำไป loop อีกหรือแค่ใช้ในการสร้างเอสคิวแอลคิวรีอย่างเดียว

jQuery โหลด Ajax หลายไฟล์พร้อมกัน

ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อมๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ user เดิมทีจะใช้วีธี join ตารางเข้าด้วยกันแล้วส่งออกเป็น json ไฟล์เดียว วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก เพราะต้องดึงข้อมูลทั้งหมดใหม่ทุกครั้งทั้งๆ ที่ ตารางโปรโมชั่นและตารางส่วนลดเป็นข้อมูลเดิมทุกครั้ง

วิธีแก้คือ แบ่งข้อมูลออกเป็น json 2 ไฟล์ ในตัวอย่างนี้จะดึงข้อมูลจาก 2 แหล่ง คือ json เก็บข้อมูลเดือน และ json ที่เก็บข้อมูลวันหยุด

<?php

$datas = [];

$datas[1][0]['date'] = '2016-01-01';
$datas[1][0]['name'] = 'New Year\'s Day';

$datas[1][1]['date'] = '2016-01-09';
$datas[1][1]['name'] = 'National Children\'s Day';

$datas[1][2]['date'] = '2016-01-16';
$datas[1][2]['name'] = 'Teachers\' Day';

$datas[2][0]['date'] = '2016-02-08';
$datas[2][0]['name'] = 'Chinese Lunar New Year\'s Day';

$datas[2][1]['date'] = '2016-02-09';
$datas[2][1]['name'] = 'second day of Chinese Lunar New Year';

$datas[2][2]['date'] = '2016-02-10';
$datas[2][2]['name'] = 'Third day of Chinese Lunar New Year';

$datas[2][3]['date'] = '2016-02-14';
$datas[2][3]['name'] = 'Valentine\'s Day';

$datas[2][4]['date'] = '2016-02-22';
$datas[2][4]['name'] = 'Makha Bucha';

$datas[3][0]['date'] = '2016-03-20';
$datas[3][0]['name'] = 'March equinox';

$datas[4][1]['date'] = '2016-04-06';
$datas[4][1]['name'] = 'Chakri Day';

$datas[4][2]['date'] = '2016-04-13';
$datas[4][2]['name'] = 'songkran';

$datas[4][3]['date'] = '2016-04-14';
$datas[4][3]['name'] = 'songkran';

$datas[4][4]['date'] = '2016-04-15';
$datas[4][4]['name'] = 'songkran';

$datas[5][0]['date'] = '2016-05-01';
$datas[5][0]['name'] = 'Labor Day';

$datas[5][1]['date'] = '2016-05-02';
$datas[5][1]['name'] = 'Labor Day observed';

$datas[5][2]['date'] = '2016-05-05';
$datas[5][2]['name'] = 'Coronation Day';

$datas[5][3]['date'] = '2016-05-06';
$datas[5][3]['name'] = 'Coronation Day';

$datas[5][4]['date'] = '2016-05-09';
$datas[5][4]['name'] = 'Royal Ploughing Ceremony Day';

$datas[5][5]['date'] = '2016-05-20';
$datas[5][5]['name'] = 'Visakha Bucha';

$datas[6][0]['date'] = '2016-06-20';
$datas[6][0]['name'] = 'June Solstice';

$datas[7][0]['date'] = '2016-07-01';
$datas[7][0]['name'] = 'Mid Year Bank Holiday';

$datas[7][1]['date'] = '2016-07-18';
$datas[7][1]['name'] = 'Extra holiday';

$datas[7][2]['date'] = '2016-07-19';
$datas[7][2]['name'] = 'Asalha Bucha';

$datas[8][0]['date'] = '2016-08-12';
$datas[8][0]['name'] = 'The Queen\'s Birthday';

$datas[8][1]['date'] = '2016-08-12';
$datas[8][1]['name'] = 'Mother\'s Day';

$datas[9][0]['date'] = '2016-09-22';
$datas[9][0]['name'] = 'september equinox';

$datas[10][0]['date'] = '2016-10-23';
$datas[10][0]['name'] = 'Chulalongkorn Day';

$datas[10][1]['date'] = '2016-10-24';
$datas[10][1]['name'] = 'Chulalongkorn Day observed';

$datas[12][0]['date'] = '2016-12-05';
$datas[12][0]['name'] = 'The King\'s Birthday';

$datas[12][1]['date'] = '2016-12-05';
$datas[12][1]['name'] = 'Father\'s Day';

$datas[12][2]['date'] = '2016-12-10';
$datas[12][2]['name'] = 'Constitution Day';

$datas[12][3]['date'] = '2016-12-12';
$datas[12][3]['name'] = 'Constitution Day observed';

$datas[12][4]['date'] = '2016-12-21';
$datas[12][4]['name'] = 'December Solstice';

$datas[12][5]['date'] = '2016-12-24';
$datas[12][5]['name'] = 'Christmas Eve';

$datas[12][6]['date'] = '2016-12-25';
$datas[12][6]['name'] = 'Christmas Day';

$datas[12][7]['date'] = '2016-12-31';
$datas[12][7]['name'] = 'New Year\'s Eve';

header('Content-type: application/json; charset=utf-8');
echo json_encode($datas);
<?php

$datas = [];

$datas[1]['name'] = 'January';
$datas[1]['description'] = 'Janus, Roman god of doors, beginnings, sunset and sunrise, had one face looking forward and one backward';

$datas[2]['name'] = 'February';
$datas[2]['description'] = 'On February 15 the Romans celebrated the festival of forgiveness for sins; (februare, Latin to purify)';

$datas[3]['name'] = 'March';
$datas[3]['description'] = 'Mars, the Roman god of war';

$datas[4]['name'] = 'April';
$datas[4]['description'] = 'Roman month Aprilis, perhaps derived from aperire, (Latin to open, as in opening buds and blossoms) or perhaps from Aphrodite, original Greek name of Venus';

$datas[5]['name'] = 'May';
$datas[5]['description'] = 'Maia, Roman goddess, mother of Mercury by Jupiter and daughter of Atlas';

$datas[6]['name'] = 'June';
$datas[6]['description'] = 'Juno, chief Roman goddess';

$datas[7]['name'] = 'July';
$datas[7]['description'] = 'Renamed for Julius Caesar in 44 BC, who was born this month; Quintilis, Latin for fifth month, was the former name (the Roman year began in March rather than January)';

$datas[8]['name'] = 'August';
$datas[8]['description'] = 'Formerly Sextilis (sixth month in the Roman calendar);re-named in 8 BC for Augustus Caesar';

$datas[9]['name'] = 'September';
$datas[9]['description'] = 'September, (septem, Latin for 7) the seventh month in the Julian or Roman calendar, established in the reign of Julius Caesar';

$datas[10]['name'] = 'October';
$datas[10]['description'] = 'Eighth month (octo, Latin for 8) in the Julian (Roman) calendar. The Gregorian calendar instituted by Pope Gregory XIII established January as the first month of the year';

$datas[11]['name'] = 'November';
$datas[11]['description'] = 'Ninth Roman month (novem, Latin for 9). Catholic countries adopted the Gregorian calendar in 1582, skipping 10 days that October, correcting for too many leap years';

$datas[12]['name'] = 'December';
$datas[12]['description'] = 'Julian (Roman) year\'s tenth month (decem, Latin for 10)';

header('Content-type: application/json; charset=utf-8');
echo json_encode($datas);

เราจะใช้ $.when เช็คว่าโหลด json เสร็จรึยัง จริงๆ มันสามารถเช็คไฟล์รูปแบบอื่นๆได้ด้วยเช่น html หรือ javascript จากนั้นก็นำมารวมกันอีกที เพราะว่าดึงข้อมูลโดยใช้คำสั่ง $.getJSON จะ retuen ค่าออกมาเป็น XMLHttpRequest จึงต้องอ้างถึงข้อมูลโดยใช้ index [0]

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>jQuery: Multiple AJAX and JSON Requests, One Callback</title>
	<meta name="author" content="Pitt Phunsanit">
  </head>
  <body>
	<h1>thai public holidays 2016</h1>
	<div id="calendar"></div>
	<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script>
	  $(function(){

		var download1 = $.getJSON('months.php');
		var download2 = $.getJSON('holidays.php');

		$.when(download1, download2).done(function (months, holidays) {

		  console.log(months);
		  console.log(holidays);

		  var html = '';
		  $.each(months[0], function(monthKey, month)
		  {

	  		html += '<h3>'+month.name+'</h3>';
	  		html += '<p>'+month.description+'</p>';

	  		if(holidays[0][monthKey] != undefined)
			{
			  html += '<dl>';
			  $.each(holidays[0][monthKey], function(dateKey, holiday) {
				html += '<dt>'+holiday.date+'</dt>';
				html += '<dd>'+holiday.name+'</dd>';
			  });
			  html += '</dl>';
			}

		  });

		  $('#calendar').append(html);

		});

	  });
	</script>
  </body>
</html>

Yii2 Fixed jQuery version

งานที่ทำใช้ jQuery plugin ที่จำกัดอยู่ที่ไม่เกินเวอร์ชั่น 2.1.3 เท่านั้น แต่ทุกครั้งที่ update yii โดยใช้คำสั่ง composer update มันจะเปลี่ยนเจคิวรี่เป็นตัว 2.1.4 ทุกครั้ง ต้องมาเปลี่ยนทุกครั้งเลย แก้ได้โดยไปสั่งใช้คอมโพสเซอร์โหลดตัวที่ต้องการมา

  1. แก้ composer.json เพิ่ม 
        "require": {
...
        "components/jquery": "2.1.3"
...
    },
  2. ไปใช้ command พิมพ์ composer update มันจะโหลดเจคิวรี่มาเก็บไว้ที่ \vendor\components\jquery
  3. สั่งให้ยีสองโหลด jquery ตัวนี้มาใช้โดยกำหนด 
    ...
    'components'     => [
...
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'baseUrl' => '@web',
                    'js' => [
                        '../../vendor/components/jquery/jquery.min.js',
                    ],
                    'sourcePath' => null
                ],
            ],
        ],
...

yii จะเปลี่ยน link จาก

<script src="/YiiAdvanced/frontend/web/assets/41df07c8/jquery.js"></script>

เป็น

<script src="/YiiAdvanced/frontend/web/../../vendor/components/jquery/jquery.min.js"></script>

หลังจากนี้ถึงจะอัพเดตกี่ครั้ง jquery ก็จะยังเป็นตัวเดิมอยู่

jQuery Ajax แบบอนุกรมตามลำดับ

งานที่ทำอยู่ต้องใช้เจคิวรี่เอแจ็คไปเรียกใช้สร้างตารางในฐานข้อมูลใหม่ แต่ถ้าใช้ ajax หลายๆ ชุดต่อๆ กันแทนที่มันจะทำงานตามลำดับแบบอนุกรม มันดันไปทำงานแบบขนานแทน บางตารางที่ต้องสร้างหลังเพราะกำหนดความสัมพันธ์ไว้กับตารางหลัก แต่ตารางหลักยังสร้างไม่เสร็จ ผลคือ การสร้างตารางทำไม่สำเร็จ

แก้ได้โดยบังคับให้ รอฟังก์ชั่นเดิมเสร็จก่อนแล้วจึงทำงานอื่นๆ ต่อไป

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Ajax Synchronous By Pitt Phunsanit</title>
</head>
<body>
<div id="logs"></div>
<script src="../jQuery/jquery-2.1.3.min.js"></script>
<script>
$(function(){

	logs = $('#logs');

	/* task order */
	var tasks = new Array();
	tasks.push('one');
	tasks.push('two');
	tasks.push('three');



	/* process each step */
	function step(tasks, a)
	{
		$.ajax({
			"cache" : false,
			"data" : 'task='+tasks[a],
			"dataTyp" : "html",
			"method" : "post",
			"success" : function(datas)
			{

				logs.append(datas);

				/* call next step */
				a++;
				if(typeof tasks[a] != 'undefined')
				{
					step(tasks, a);
				}

			},
			"url" : 'task.php'
		});
	}

	/* call first time */
	step(tasks, 0);
});
</script>
</body>
</html>

<?php
switch($_POST['task'])
{
	case 'one' :
	{
		echo '<h1>One</h1>';
	}break;
	case 'two' :
	{
		echo '<h1>Two</h1>';
	}break;
	case 'three' :
	{
		echo '<h1>three</h1>';
	}break;
}

ทีนี้มันจะทำงานตามลำดับ 1,2,3… อย่างถูกต้อง

ถ้าต้องการหยุดการทำงาน เช่น มี error ให้เปลี่ยนค่า a เป็นค่าที่ไม่มีอยู่จริง เช่น 9999 (คงไม่มี process กลุ่มไหนถึง) คำสั่ง typeof tasks[a] จะ return ‘undefined’ code ก็จะหยุดการทำงาน

อ่านเพิ่มเติม jQuery: Ajax รับข้อมูลแบบ stream

ใส่ฟิลเตอร์ให้ select box

select box (drop down/ dropdown / ดรอปดาวน์ / list / ลิสต์ หลายชื่อเหลือกเกิน) นิยมใช้เวลาต้องการให้ user เลือกจากตัวเลือกที่กำหนดให้เท่านั้น แต่ถ้ามันมีเยอะมาก อย่าง 77 จังหวัด ถ้าต้องเลือกบ่อยๆ ก็ไม่สดวกที่จะต้องไล่หา แก้ได้โดยใช้ jQuery ใส่ filter ให้

ดูตัวอย่างการทำงานได้ที่

ตัวอย่าง Demo -> =>

  1. download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์
  2. ใส่ code ง่ายๆ ตามตัวอย่าง 
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Chosen Demo By Pitt Phunsanit</title>
<link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<select id="province" style="width:200px;">
	<option value="64">กระบี่</option>
	<option value="1">กรุงเทพมหานคร</option>
	<option value="56">กาญจนบุรี</option>
	<option value="34">กาฬสินธุ์</option>
	<option value="49">กำแพงเพชร</option>
	<option value="28">ขอนแก่น</option>
	<option value="13">จันทบุรี</option>
	<option value="15">ฉะเชิงเทรา</option>
	<option value="11">ชลบุรี</option>
	<option value="9">ชัยนาท</option>
	<option value="25">ชัยภูมิ</option>
	<option value="69">ชุมพร</option>
	<option value="45">เชียงราย</option>
	<option value="38">เชียงใหม่</option>
	<option value="72">ตรัง</option>
	<option value="14">ตราด</option>
	<option value="50">ตาก</option>
	<option value="17">นครนายก</option>
	<option value="58">นครปฐม</option>
	<option value="36">นครพนม</option>
	<option value="19">นครราชสีมา</option>
	<option value="63">นครศรีธรรมราช</option>
	<option value="47">นครสวรรค์</option>
	<option value="3">นนทบุรี</option>
	<option value="76">นราธิวาส</option>
	<option value="43">น่าน</option>
	<option value="77">บึงกาฬ</option>
	<option value="20">บุรีรัมย์</option>
	<option value="4">ปทุมธานี</option>
	<option value="62">ประจวบคีรีขันธ์</option>
	<option value="16">ปราจีนบุรี</option>
	<option value="74">ปัตตานี</option>
	<option value="5">พระนครศรีอยุธยา</option>
	<option value="44">พะเยา</option>
	<option value="65">พังงา</option>
	<option value="73">พัทลุง</option>
	<option value="53">พิจิตร</option>
	<option value="52">พิษณุโลก</option>
	<option value="61">เพชรบุรี</option>
	<option value="54">เพชรบูรณ์</option>
	<option value="42">แพร่</option>
	<option value="66">ภูเก็ต</option>
	<option value="32">มหาสารคาม</option>
	<option value="37">มุกดาหาร</option>
	<option value="46">แม่ฮ่องสอน</option>
	<option value="24">ยโสธร</option>
	<option value="75">ยะลา</option>
	<option value="33">ร้อยเอ็ด</option>
	<option value="68">ระนอง</option>
	<option value="12">ระยอง</option>
	<option value="55">ราชบุรี</option>
	<option value="7">ลพบุรี</option>
	<option value="40">ลำปาง</option>
	<option value="39">ลำพูน</option>
	<option value="30">เลย</option>
	<option value="22">ศรีสะเกษ</option>
	<option value="35">สกลนคร</option>
	<option value="70">สงขลา</option>
	<option value="71">สตูล</option>
	<option value="2">สมุทรปราการ</option>
	<option value="60">สมุทรสงคราม</option>
	<option value="59">สมุทรสาคร</option>
	<option value="18">สระแก้ว</option>
	<option value="10">สระบุรี</option>
	<option value="8">สิงห์บุรี</option>
	<option value="51">สุโขทัย</option>
	<option value="57">สุพรรณบุรี</option>
	<option value="67">สุราษฎร์ธานี</option>
	<option value="21">สุรินทร์</option>
	<option value="31">หนองคาย</option>
	<option value="27">หนองบัวลำภู</option>
	<option value="6">อ่างทอง</option>
	<option value="26">อำนาจเจริญ</option>
	<option value="29">อุดรธานี</option>
	<option value="41">อุตรดิตถ์</option>
	<option value="48">อุทัยธานี</option>
	<option value="23">อุบลราชธานี</option>
</select>
<script src="../jQuery/jquery-2.1.3.min.js"></script><!-- เรียกใช้ jQuery -->
<script src="chosen/chosen.jquery.min.js"></script><!-- เรียกใช้ jQuery plugin -->
<script>
$(function(){

	$('#province').chosen(); <!-- เรียกใช้ jQuery plugin chosen กับ id province-->

})
</script>
</body>
</html>
  3. ใช้ได้แล้ว

ฟอร์มเดียวหลายหน้าที่ พรีวิวก็ได้ บันทึกก็ดี

ลูกค้าอยากจะให้ คนกรอกข้อมูลสามารถตรวจสอบข้อมูลได้ก่อนกว่า หลังจาก save ไปแล้ว report ที่จะออกมาจะหน้าตาแบบไหน ไม่อยากให้ บันทึกแล้วมาแก้ที่หลัง

ทำได้โดยทำปุ่ม submit มีหลายปุ่ม แล้วมาเช็กดูว่าเค้ากดปุ่มไหน จะได้เลือกการกระทำถูก

google maps จาก jQuery ajax

ใช้เจคิวรี่เอแจ็กซ์ โหลด fragment google map เข้ามาแสดงในเท็ปแล้วไม่ขึ้น ไม่เห็น ทั้งๆที่ก็เขียน code ตามปกติ ดูตรงๆ ไม่ผ่านเอเจ็กซ์ ก็ทำงานปกติ ให้เปลี่ยนมาใช้ HTML fragment code ตามนี้ครับ

<div id="map-canvas" style="width: 100$; height: 400px"></div>
<script type="text/javascript">
function initialize()
{
	var mapOptions = {
		center: {lat: 13.799604, lng: 100.51129},
		zoom: 16
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'),
		mapOptions);
}

$(function()
{
	$.getScript("https://maps.googleapis.com/maps/api/js?key=ใส่ google map API key ตรงนี้&async=2&callback=initialize", function () {});
});
</script>

jQuery plugin แบบมาตราฐาน

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>advance jQuery plugin By Pitt Phunsanit</title>
<body>
<div id="demo">
  <h1>test</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/* jQuery Plugin Template */
(function($){
	/* global data & object */
	var global = new Object
	var methods = {
	/* default methods */
     init : function(options){
		var settings = $.extend({
		id:"instead",
		background:"green"
		}, options);
		this.append('<ul id="'+settings.id+'" style="background:'+settings.background+'"></ul>');
		global.ul = $('#'+settings.id);
		return this;
     },
	/* methods */
     li:function(methodsArguments){
		var arguments = $.extend({
		  id:"liId",
		  color:"blue"
		}, methodsArguments);
		global.ul.append('<li id="'+arguments.id+'" style="color:'+arguments.color+'">set color = '+arguments.color+'</li>');
		return this;
     }
	/* methods ตัวที่ 2 แบบมี internal call */
	 ,link:function(methodsArguments_1){
		var arguments_1 = $.extend({
		  id:"liId",
		  color:"blue",
		  href:"#",
		  label:"link to"
		}, methodsArguments_1);
		/* call methods li */
		methods['li'].apply(this ,arguments)
		$('#'+arguments_1.id ,global.ul).append('<a href="'+arguments_1.href+'">'+arguments_1.label+'</a>');
		return this;
     }
  };

	$.fn.instead = function(method){
		/* method calling logic */
		if ( methods[method] ) {
		  return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
		  return methods.init.apply( this, arguments );
		} else {
		  $.error('Method ' +  method + ' does not exist on jQuery.tooltip' );
		}
	};
})(jQuery);
</script>
<script>
$(function(){
	$('#demo')
	/* default (init) */
	.instead()
	/* methods li แบบ default */
	.instead('li')
	/* methods li แบบ ปรับแต่ง */
	.instead('li', {id:"customID1" ,color:"red"})
	.instead('link', {id:"customID2" ,color:"white" ,href:"http://plusmagic.wordpress.com/" ,label:"plusmagic.wordpress.com"})
	.instead({id:"customID" ,background:"yellow"})
	.instead('li')
	.instead('li', {id:"customID2" ,color:"red"})
	/* test chainability */
	.css('color', 'pink');
});
</script>
</body>
</html>

Proudly powered by WordPress | Theme: Appointment Blue by Webriti