Tag Archive เอแจ็กซ์

Byphunsanit

joGet: AJAX Subform reload

ตัวอย่างการสร้าง ajax subform ในเรื่อง joGet: AJAX Subform มีโจทย์มาว่า input ที่ผูกกับซับฟอร์มถูกเปลี่ยนค่าจาก javascript ก็คิดว่าค่าใน subform จะเปลี่ยนตามไปด้วย แต่มันกลับไม่เปลี่ยนตาม เพราะ input ค่าเปลี่ยนก็จะทำให้มันโหลดข้อมูลมาใหม่ได้ไม่ยาก แต่มันไม่ทำงาน ลองศึกษาไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js ดูก็พบว่ามันมีการสั่ง .off เอา event เก่าออกไปก่อน ทำให้แค่เปลี่ยนค่าเฉยๆ มันจะไม่ทำงาน

การสั่ง reload / refresh ajax subform โดยใช้ javascript ทำได้โดย

<button class="btn btn-info" id="refreshBtn" type="button">Reload form</button>
<script>
$(document).ready(function() {

$('#refreshBtn').on('click', function() {

let field1 = FormUtil.getField('field1');
field1.val('72817b0c-ac1430db-671b8000-37df4c8d');
field1.trigger('change');

});

});
</script>

แบบนี้เมื่อนเปลี่ยนค่า field1 subform จะถูกเปลี่ยนค่าตามไปด้วยแล้ว ลองดัดแปลงให้เหมาะกับงานดูนะครับ

Byphunsanit

joGet: AJAX Subform

AJAX Subform เป็น Form Element ที่ joget เตรียมไว้ให้สามารถใช้ ajax ดึงข้อมูลฟอร์มที่มีมาแสดงได้แบบไม่จำเป็นต้องโหลดทั้งหน้าใหม่ เหมือนระบบที่เราเขียนด้วยตัวเอง

การใช้งานทำได้ง่ายๆ โดยการ

    1. ในหน้า Form Builder ลาก AJAX Subform มาจากด้านซ้ายมือ
    2. คลิก Edit ไอค่อน
    3. กรอกข้อมูล
      ID
      id ของ ajax subform เช่น ajaxSubform
      Form
      เลือกฟอร์มที่ต้องการนำมาแทรกไว้ในหน้านี้
    4. คลิก Next >
    5. ติ๊ก
      Reload Subform when Parent Field value change?
      ติ๊กเพื่อจะให้ ajax ทำงานโหลด ฟอร์มใหม่เมื่อ input ที่ผูกไว้ เปลี่ยนค่า
    6. ผูกฟอร์มทั้งสองไว้ด้วยกัน
      Parent Field to keep Subform ID
      id input ในฟอร์มหลัก ที่จะใช้ลิงค์ให้ sub form ถูกดึงมาแทนที่โดยใช้ ajax
      Subform Field to keep Parent ID
      เป็น input ที่อยู่ใน subform ถ้าไม่มี การ load subform มาจาก server ก็ยังทำงานได้ตามปกติ

ทีนี้มาศึกษาการทำงานกันดูบ้าง

      1. joGet จะแทรกไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js เพิ่มเข้ามาจากปกติ
      2. จะถูกเรียกใช้โดย javascript ที่เพิ่มเข้ามา เช่น
        <script type="text/javascript">
        $(document).ready(function() {
        $("#ajaxSubform_ajaxsubform_928").ajaxSubForm({
        contextPath: "/jw",
        id: "ajaxSubform",
        label: "",
        formDefId: "sendEmail",
        readOnly: "",
        readOnlyLabel: "",
        noframe: "",
        ajax: "true",
        parentSubFormId: "field1",
        prefix: "",
        hideEmpty: "",
        appId: "prototypes",
        appVersion: "1",
        processId: "",
        nonce: "%EF%BF%BD%00%3B%7D%28%EF%BF%BD%EF%BF%BD%EF%BF%BD",
        collapsible: "",
        collapsibleLabelExpanded: "Hide Details",
        collapsibleLabelCollapsed: "View Details",
        collapsibleExpanded: "true",
        collapsibleNoLoad: ""
        });
        });
        </script>

เมื่อไล่ดู code แล้วมันคือ plugin ที่ extended มาจาก jQuery ajax ตามปกติ ส่ง request ไปยัง /jw/web/json/plugin/org.joget.plugin.enterprise.AjaxSubForm/service โดยส่ง formDefId มีค่าเป็น form id ของ subform, parentSubFormId คือ field ในฟอร์มหลักที่ใช้ผูกกับซับฟอร์ม และจะคืนค่ากลับมาเป็น html ของฟอร์ม ในอนาคตคงได้ใช้เรียก ajax ไปโดยไม่ต้องสร้าง subform ก่อน

อ่านเพิ่มเติม

Byphunsanit

ส่งค่าตัวแปรในเช็กบ็อกซ์โดย 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 อีกหรือแค่ใช้ในการสร้างเอสคิวแอลคิวรีอย่างเดียว

Byphunsanit

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”

    $('.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",
            });
        }
    });

ใช้ได้แล้ว แต่น่าจะเขียนเป็นคู่มือเอาไว้นะ

Byphunsanit

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>