Tag Archive เอแจ็กซ์

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

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

ตัวอย่างการส่งค่าไปในแบบ array[code language=”html” title=”checkbox_to_array.html”]
<!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>[/code]

ตัวอย่างการส่งค่าไปในแบบ string[code language=”html” title=”checkbox_to_string.html”]
<!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>[/code]

ตัวอย่างการนำค่าไปเขียนเป็น sql query[code language=”php” title=”processing.php”]
<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;[/code]

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

laravel ajax method delete

เขียน ui laravel 5.1 อยู่ แบบใช้ ajax update ข้อมูล โดยเดิมมันใช้ form ธรรมดาแต่ใช้ method เป็น DELETE ทดลองส่งคำสั่งผ่าน ajax อยู่นานก็ไม่ได้ผล แถมมันวิ่งไปที่อื่นอีกตะหาก ทดลองเขียน php ธรรมดามาลองดูก็ไม่เจออะไร

นั่งงงอยู่นาน ก็ pass ค่าไปถูก เขียน php ธรรมดาไป ก็ได้ค่าไปถูก จน search ไปเจอ Delete request Jquery Ajax doesn’t work ที่แท้ laravel ถ้าจะใช้ method delete ต้องใช้ “method”: “POST” กับตัวแปร “_method”: “delete”[code language=”javascript”]
$(‘.glyphicon-trash’).click(function(e) {
e.preventDefault();

var r = confirm(‘Are you sure?’);
if(r == true) {
$.ajax({
"data": {
"_method":"DELETE",
"_token": "{{ csrf_token() }}",
},
"success": function(result) {
location.reload();
alert(‘success’);
},
"type": "POST",
"url": "/admin/index",
});
}
});
[/code]ใช้ได้แล้ว แต่น่าจะเขียนเป็นคู่มือเอาไว้นะ

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

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

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

[code language=”php” title=”holidays.php”]
<?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);[/code][code language=”php” title=”months.php”]
<?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);[/code]

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

[code language=”php” title=”multipleAJAX.html”]
<!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>[/code]

form ที่อยู่ไทย

จากเรื่องที่แล้ว ฐานข้อมูลระดับจังหวัด อำเภอ ตำบล และ ใส่ฟิลเตอร์ให้ select box มาต่อด้วยการสร้างฟอร์ม ไปใช้ส่งข้อมูล

เป็นธรรมดาที่การกรอกข้อมูลส่วนตัว ประวัติต่างๆ อาจจะต้องการหลายที่อยู่ เช่น ที่อยู่ตามทะเบียนบ้าน ที่อยู่ปัจจุบัน ที่ทำงาน ถ้าต้องมากำหนดตัวกรองให้ select box ที่ละตัวก็เสียเวลา แก้ได้โดยเปลี่ยนไปใช้ class แทน id และใช้ attribute data- แทนแต่ละกลุ่ม และใช้ ajax ดึงข้อมูลมาทำ chained เวลาที่เปลี่ยนตัเลือกในตัวแม่ ให้ใช้เอแจ็กซ์ดึงข้อมูลที่เกี่ยวข้องมาแสดง update แทนตัวเลือก option ตัวลูกที่มีอยู่เดิม

[code language=”php”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX jQuery.chosen By Pitt Phunsanit</title>
<link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<fieldset>
<legend>บ้าน</legend>
<select name="home_province" class="areasProvince chosen-select" data-area="home" 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>
<select name="home_city" class="areasCity chosen-select" data-area="home" style="width:200px;">
</select>
</fieldset>
<fieldset>
<legend>ที่ทำงาน</legend>
<select name="office_province" class="areasProvince chosen-select" data-area="office" 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>
<select name="office_city" class="areasCity chosen-select" data-area="office" style="width:200px;">
</select>
</fieldset>
<script src="../jQuery/jquery-2.1.3.min.js"></script>
<script src="chosen/chosen.jquery.min.js"></script>
<script>
$(function(){

/* select box filter */
$(‘.chosen-select’).chosen();
$(‘.areasProvince’).chosen().change(function(){
child = $(‘.areasCity[data-area="’+$(this).data(‘area’)+’"]’);
html = Array(‘<option value="">–Select–</option>’);
parent_id = $(this).val();
if(parent_id == ”){
child.html(html)
}
else
{
$.ajax({
"cache" : true,
"dataType" : "json",
"success" : function(datas){
$.each(datas, function(key, item){
html.push(‘<option value="’+item.value+’">’+item.text+'</option>’);
});
child.html(html);
child.trigger(‘chosen:updated’);
},
"url" : "thailandJSON.php?subdivisions=amphur&parent_id="+parent_id
});
}
});

})
</script>
</body>
</html>
[/code]

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

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

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

google maps จาก jQuery ajax

ใช้เจคิวรี่เอแจ็กซ์ โหลด fragment google map เข้ามาแสดงในเท็ปแล้วไม่ขึ้น ไม่เห็น ทั้งๆที่ก็เขียน code ตามปกติ ดูตรงๆ ไม่ผ่านเอเจ็กซ์ ก็ทำงานปกติ ให้เปลี่ยนมาใช้ HTML fragment code ตามนี้ครับ
[code language=”html”]
<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>
[/code]

alert message จาก ajax

ส่วนติดต่อกับผู้ใช้ บางครั้งเราต้องตรวจสอบเงื่อนไขในหลายจุด ถ้าเจอแล้วส่ง message เป็น notification ต่างๆ ตาม contextual ต่างๆ ถ้ามีทั้งการแจ้งเตือน ทั้ง แจ้ง error ความผิดพลาด หลายจุด หลายเงื่อนไข ถ้าเราจะ redirect กลับไปกลับมาเพื่อแจ้ง user ก็ไม่สะดวก ทั้งที่ต้องกรอกข้อมูลใหม่ และความรู้สึกที่ว่า ทำไมไม่บอกมาซะให้หมดที่เดียว

ส่วนที่เป็น PHP เราก็เก็บ message ต่างๆ ไว้ใน array แล้วส่ง json กลับมาแล้วให้ function notification ใส่ bar แจ้งเตือน user message แต่ละประเภทอาจจะมีหลายข้อความ เราก็ใช้เป็น multidimensional array

[code language=”php”]
<?php
$output[‘messages’][‘success’][] = ‘Success! Well done its submitted.’;
$output[‘messages’][‘info’][] = ‘Info! take this info 1.’;
$output[‘messages’][‘info’][] = ‘Info! take this info 2.’;
$output[‘messages’][‘warning’][] = ‘Warning ! Dont submit this.’;
$output[‘messages’][‘danger’] = ‘Error ! Change few things.’;

header(‘Content-Type: application/json; charset=utf-8’);
echo json_encode($output);
[/code]

ในฝั่ง ui ผมใช้แถบแจ้งเตือนของ bootsrtapt เป็นตัวอย่าง ถ้าใช้ framework อื่นก็แก้ code ด้วยครับ เวลาใช้จริงอย่าลืมแยกฟังก์ชั่น notification ไปไว้ในไฟล์ javascript ส่วนกลาง จะได้เรียกใช้ได้จากทุกหน้า

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap notification bar</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<h1>alert under here</h1>
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function notifications(notifications)
{
html = ”;
$.each(notifications, function(type, messages)
{
if($.isArray(messages))
{
if(messages.length == 1)
{
html += ‘<div class="alert alert-‘+type+’">’+messages[0]+'</div>’;
}
else
{
html += ‘<div class="alert alert-‘+type+’"><ul>’;
$.each(messages, function(ordered, message)
{
html += ‘<li>’+message+'</li>’;
});
html += ‘</ul></div>’;
}
}
else
{
html += ‘<div class="alert alert-‘+type+’">’+messages+'</div>’;
}
});
$(‘h1:eq(0)’).after(html);
}

$(function(){
$.ajax({
dataType:’json’,
success : function(datas)
{
notifications(datas.messages);
},
url : ‘alert.php’
});
});
</script>
</body>
</html>
[/code]

Ajax Jquery Tinymce Serialize

เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()
[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tinymce & Jquery serialize By Pitt Phunsanit</title>
</head>

<body>
<form id="plus" method="post" action="somepage">
<textarea name="article" id="articleId" style="width:100%"></textarea>
<input type="submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="assets/tinymce/tiny_mce.js"></script>
<script>
$(function(){
$(‘#plus’).submit(function(event){
event.preventDefault();
$(‘#articleId’).val(tinyMCE.get(‘articleId’).getContent());
alert(‘after ‘+$(‘#articleId’).serialize());
});
});

tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
</body>
</html>
[/sourcecode]