PHP Code Mania สร้างเว็บไซต์ด้วยตนเอง

การใช้ jQuery ตรึงคอลัมน์ส่วนหัวข้อของตาราง HTML

โดย SONGCHAI SAETERN •

<!DOCTYPE html>

<head>

<title>Table Header Fixed</title>

<style>

table {

width: 100%;

border-collapse: collapse;

}

th, td {

padding: 8px;

text-align: left;

border: 1px solid #ddd;

}

.fixed-header {

position: fixed;

top: 0;

z-index: 10;

background-color: #ffffff;

display: none;

}

</style>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr>

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr>

<tr>

</tr>

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr>

</tbody>

</table>

$(document).ready(function() {

var $table = $("#myTable");

var $header = $table.find("thead");

var $fixedHeader = $header.clone().addClass("fixed-header").removeClass("thead");

// เพิ่มตารางที่ตรึงหลังจากตารางจริง

$table.after($fixedHeader);

// ตั้งค่าความกว้างของแต่ละคอลัมน์ให้ตรงกัน

function setColumnWidths() {

$fixedHeader.find('th').each(function(index) {

$(this).width($header.find('th').eq(index).width());

});

}

// เรียกใช้เมื่อโหลดหน้า

setColumnWidths();

// ตรึงแนวหัวตารางเมื่อเลื่อน

$(window).scroll(function() {

var offset = $header.offset().top;

var scrollTop = $(window).scrollTop();

if (scrollTop >= offset && !$fixedHeader.is(":visible")) {

$fixedHeader.show();

} else if (scrollTop < offset && $fixedHeader.is(":visible")) {

$fixedHeader.hide();

}

});

// เรียกใช้เมื่อมีการเปลี่ยนแปลงขนาดหน้าจอ

$(window).resize(setColumnWidths);

});

</script>

</body>

</html>

PHP CI MANIA - PHP Code Generator

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"

ราคาสุดคุ้ม
http://www.phpcodemania.com

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

การเปิด Console ของเว็บบราวเซอร์ เพื่ออ่าน Error เมื่อส่งข้อมูลแบบ Ajax

โดย SONGCHAI SAETERN •

กรณีที่เกิด Error แล้วไม่พบข้อความแจ้งเตือน จะมีอยู่ 2 สาเหตุหลักๆ คือ
1. ไม่ได้เปิด error_reporting() สามารถดูวิธีได้ที่นี่
2. เป็นการรับส่งข้อมูลผ่าน AJAX จึงทำให้แสดงอยู่เบื้องหลังต้องเปิดดูจาก console ของเว็บบราวเซอร์

ซึ่งขั้นตอนมีดังต่อไปนี้

1. กด F12 เพื่อเปิด Console ของเว็บบราวเซอร์ขึ้นมา
2. คลิกไปที่แท็ป เครือข่าย (Network)
3. คลิกลิงค์รายการที่ขึ้น Error
4. คลิกดูแท็ป การตอบสนอง (Response)
5. จะปรากฏข้อความแจ้ง Error พื้นที่ด้านล่าง

วิดีโอแนะนำขั้นตอน

กลับสู่หน้า FQA

PHP CI MANIA - PHP Code Generator

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"

http://fastcoding.phpcodemania.com/index.php/#purchase-order

ราคาสุดคุ้ม 1,500 บาท
http://fastcoding.phpcodemania.com

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

jQuery ความแตกต่างระหว่า .data() กับ .attr('data-xxx')

โดย SONGCHAI SAETERN •

"Adding data attribute to DOM"

สำหรับการสร้างแอตทริวต์ในอีเลเมนต์ต่างๆ เพื่อพักข้อมูลไว้นั้น เรานิยมใช้ชื่อ data-xxxxx เช่น ต้องการเก็บ id ไว้ก็สร้างแอตทริบิวต์ data-id="1234"

ซึ่งสามารถใช้คำสั่งได้ 2 แบบ

$('div').data('id', '1234');

และ

$('div').attr('data-id', '1234');

.data('xxxx') กับ .attr('data-xxx') ก็คือ .attr() จะแสดงแอตทริบิวต์ที่เพิ่มเข้าไป หรือเปลี่ยนแปลงไป ในโครงสร้าง HTML ให้เห็นด้วย

สังเกตว่าในรูปแท็ก <p> จะปรากฏแอตทริบิวต์ data-info แสดงออกมาด้วย

ที่มา : https://stackoverflow.com/questions/14935191/adding-data-attribute-to-dom

สนับสนุนค่ากาแฟผู้เขียนได้ที่

PHP CI MANIA - PHP Code Generator

โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

สนใจสั่งซื้อราคาสุดคุ้ม
http://fastcoding.phpcodemania.com/

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

วิธีตรวจสอบ Checbox ที่กำหนดไว้ได้เลือกไว้แล้วหรือไม่ได้เลือก (jQuery checkbox event handling)

โดย SONGCHAI SAETERN •

กำหนดให้ #my_checkbox คือ id ของ input checkbox ที่ต้องการตรวจสอบ

$('#my_checkbox').change(function() {
if (this.checked) {
alert('Checked');
} else {
alert('Not Checked');
}
});

ใช้การตรวจสอบด้วยอีเว้นต์ change แล้วตรวจสอบ this.checked ว่าเกิดขึ้นจริงหรือไม่

นอกจากนี้เรายังสามารถเขียนเป็นฟังก์ชั่นได้อีกด้วย

function isChecked(elem){
if (elem.checked) {
return true;
} else {
return false;
}
}
$(document).on('change', '#my_checkbox', function(){
if(isChecked(this) == true){
alert('Checked');
}else{
alert('Not Checked');
}
});

ตัวอย่างการเอามาใช้งาน เพื่อซ่อนแสดงคอลัมน์ที่ต้องการ

แสดงคอลัมน์ Authen SESSION

ซ่อนเมื่อ uncheck ออกไป

function setDisplayAuthen(elem){
if (elem.checked) {
$('.col_authen').show();
} else {
$('.col_authen').hide();
$('.col_authen input').val('');
}
}
$(document).on('change', '#login_require', function(){
setDisplayAuthen(this);
});

ที่มา

https://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling

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

วิธีนำข้อมูลจาก Form รายละเอียด ไปรวมใน Form หลัก ก่อนจะ Submit ข้อมูลออกไป

โดย SONGCHAI SAETERN •

วิธีนำข้อมูลจาก Form รายละเอียด ไปรวมใน Form หลัก ก่อนจะ Submit ข้อมูลออกไป

ตัวอย่างที่ใช้งานก็คือ
ในแบบฟอร์มหลักเมื่อป้อนข้อมูลเรียบร้อยกดปุ่ม Save
ก็จะแสดงป๊อบอัพ Modal ขึ้นมาเพื่อระบุเหตุผล และเมื่อ Submit ข้อมูลที่แยกกันก็จะไม่สามารถนำไปด้วย และ Modal เป็นป๊อบอัพที่ใช้รวม ไม่ได้แทรกไว้แบบฟอร์มใดแบบฟอร์มหนึ่ง ก็เลยต้องทำการเขียนโค้ดแทรกลงไปในแบบฟอร์มด้วย

jQuery Code

$("#form").submit( function(eventObj) {

  $('<input />').attr('type', 'hidden')

   .attr('name', "something")

   .attr('value', "something")

   .appendTo('#form');

  return true;

});

ที่มา : https://stackoverflow.com/questions/17809056/how-to-add-additional-fields-to-form-before-submit

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

jQuery กับวิธีกำหนด checked ให้กับ checkbox ตามค่าที่บันทึกในฐานข้อมูล

โดย SONGCHAI SAETERN •

jQuery selector by Attrubute matching value

จากภาพด้านบนนั้น คือการเลือกตัวเลือกตามข้อมูลที่อยู่ในฐานข้อมูล เช่น

ฟิลด์ level มีค่า 2

เมื่อนำมาใส่ในแอตทริบิวต์ data-record-value ของตัวเลือกทุกตัวเรียบร้อย เราสามารถตรวจสอบ checkbox ตัวที่มีค่า value ตรงกับในฐานข้อมูลที่ดึงออกมา หรือตรงกับแอตทริบิวต์ที่สร้างขึ้นมาด้วย jQuery ดังนี้

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return $(this).val() == $(this).data('record-value');
});

โค้ดฉบับเต็มสำหรับนำไปทดสอบกันดูครับ ลองเปลี่ยนค่าใน $row['level'] จาก 2 เป็น 1 และ 3 ตามลำดับดูนะครับ

<?php
$row['level'] = 2;
?>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<form action="/action_page.php">
<input type="checkbox" name="my_level" value="1" data-record-value="<?php echo $row['level'];?>"> พนักงานทั่วไป<br>
<input type="checkbox" name="my_level" value="2" data-record-value="<?php echo $row['level'];?>"> ผู้จัดการ<br>
<input type="checkbox" name="my_level" value="3" data-record-value="<?php echo $row['level'];?>"> ผู้ดูแลระบบ<br>
<input type="button" value="Test" id="btnTest">
</form>
<div id="test">
</div>
<script>
$('#btnTest').click(function(){
$('#test').html('');
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
$('#test').append('<br/>' + $(this).val() + ' = ' + $(this).data('record-value'));
return $(this).val() == $(this).data('record-value');
});
});
</script>
</body>
</html>

ทิ้งท้ายกันสักนิดนึง

โดยปกติแล้วเราอาจจะเคยเขียนแบบระบุ id หรือ element เฉพาะตัวกับค่าในฐานข้อมูลเพื่อ checked ยังตัวเลือกที่ต้องการได้เลย โดยไม่ต้องสร้างแอตทริบิวต์เพิ่มไปใน checkbox แต่ละตัว

เช่น

var level = <?php echo $row['level'];?>;
$("input[name=my_level][value=" + value + "]").prop('checked', true);

จะเป็นการสั่ง checked ที่ input ชื่อว่า my_level (ซึ่งมีทั้งหมด 3 ตัว) และเช็คถูกเฉพาะตัวที่มี value = 2 แค่เพียงตัวเดียวเท่านั้น ซึ่งก็สะดวกดี

แต่!! เมื่อผมลองเขียน CodeIgniter แบบใช้ Template Parser Class

การจะแทรกสคริปต์ท้าย View จึงเป็นสิ่งที่ผมหลีกเลี่ยง เพราะจะแยกไฟล์ .js ไปไว้ต่างหาก และสั่ง load เข้าไปในขั้นตอนเดียวกันกับการ load ไฟล์ View คือจะทำใน Controller นั่นเอง ดังนั้นในไฟล์ .js จะไม่มีการ echo ค่าใดๆ หรือไม่มีการแทรกคำสั่ง PHP ได้เลย

ดังนั้น

การสร้างแอตทริบิวต์ data-record-value หรือแอตทริบิวต์ใดๆก้ตามเพื่อระบุค่าจากฐานข้อมูลไว้ และใช้คำสั่งเปรียบเทียบค่า value ของ checkbox, radio button ทุกตัวที่ตรงกัน จะสามารถสร้าง checked พร้อมกันทั้งหมดในครั้งเดียว

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {

return $(this).val() == $(this).data('record-value');

});

ยังไงก็ลองเอาไปเล่นดูนะครับ เผื่อจะใช้แล้วถูกใจ

---------------------------

จากหนึ่งในข้อจำกัดของโปรเจ็กต์ PHP CI MANIA

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

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data

โดย SONGCHAI SAETERN •

วิธีแก้ปัญหา SyntaxError: JSON.parse: unexpected non-whitespace character

ปัญหาที่เกิดขึ้นคือ เมื่อมีการ submit ผ่าน iframe และให้ PHP คืนค่าเป็น JSON

$json = json_encode(array(
"is_successful" => FALSE,
"message" => $message
));
echo $json;

ผลที่ได้คือ หน้าเว็บค้าง ไม่มีอะไรตอบสนองหรือทำงานต่อจากนั้นเลย และเมื่อเปิด console ขึ้นมาดูก็พบข้อความแจ้ง error ดังนี้

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 921 of the JSON data
ทั้งที่ค่าคืนกลับมาใน iframe ก็ปกติดี

โค้ดในส่วนของการดึงข้อมูลใน iframe หลังจาก Submit เรียบร้อยมีดังนี้

var c = 0;
$("#post_iframe").on('load',function() {
c++;
if(c==1){
iframeContents = this.contentWindow.document.body.innerHTML;
var json_string = iframeContents.toString();
if(json_string != ""){
var results = jQuery.parseJSON( json_string ); if(results.is_successful){
//SUCCESS
}else{
//FALSE
} }else{
alert('การดำเนินการล้มเหลว กรุณาลองใหม่อีกครั้ง');
}
}
});

และจุดที่เกิด error ก็คือ

var results = jQuery.parseJSON( json_string );

ก็ลองค้นจนเจอกระทู้หนึ่งแนะนำว่าให้แปลงโค้ดก่อน
var decoded = $("<div/>").html(encodedStr).text();

ก็จะได้โค้ดดังนี้

var c = 0;
$("#post_iframe").on('load',function() {
c++;
if(c==1){
iframeContents = this.contentWindow.document.body.innerHTML;
var json_string = iframeContents.toString();
if(json_string != ""){
var json_string = $("<div/>").html(json_string).text();
var results = jQuery.parseJSON( json_string ); if(results.is_successful){
//SUCCESS
}else{
//FALSE
} }else{
alert('การดำเนินการล้มเหลว กรุณาลองใหม่อีกครั้ง');
}
}
});

เป็นอันเสร็จพิธี!!

แต่เดี๋ยวก่อน ถ้าท่านยังเจอปัญหานี้อยู่
JSON.parse: expected property name or '}'

ปัญหาจะเกี่ยวกับ Double / Single Quotes ให้ลองแก้ตามนี้ดู

Change:JSON.parse("{'wrongQuotes': 5}")

To:

JSON.parse('{"rightQuotes": 5}')

อ้างอิง

How to decode HTML entities using jQuery?
https://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery

JSON.parse: expected property name or '}'
https://stackoverflow.com/questions/8013582/json-parse-expected-property-name-or

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

เรียกฟังก์ชั่น click ใน jQuery หลังโหลด AJAX มาแล้วไม่ทำงาน

โดย SONGCHAI SAETERN •

ลืมตลอด JavaScript พวก onclick onchange ต่างๆ

ถ้าสร้างไว้ก่อนจะไม่มีผลกับ element ที่โหลดมาด้วย AJAX

ถ้าจะให้มันทำงานต้องดักด้วยการเพิ่ม .on()

$(document).on('click', '#target_button', function(){
//Your code here
});

เช่นเดิมทีหน้าหลักมีแค่

<div id="main_content">
<!-- AJAX Content
</div>

แล้วเมื่อโหลดข้อมูล Ajax เรียบร้อย

<div id="main_content">
<button id="target_button">TEST</button>
</div>

<script>
$("#target_button").click(function(){
alert("555+ เงี๊ยบปิ๊ง!!");
});
</script>

ในส่วน Script ต้องใช้ .on เข้าช่วย

<script>
$(document).on('click', '#target_button', function(){
alert('เย้ๆๆๆ ทำงานแล้ว');
});
</script>

ก็เอวัง ด้วยประการฉะนี้แล

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

jQuery Autocomplete ค้นหาจากตัวแปร Array ใน JavaScript ที่สร้างไว้

โดย SONGCHAI SAETERN •

Autocomplete

https://jqueryui.com/autocomplete/#custom-data

แนะนำการใช้งาน Autocomplete โดยการค้นหาจากตัวแปร Array ใน JavaScript ที่สร้างไว้ โดยใช้ jQuery UI ในการแสดงผล

[jQuery Code]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
#project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}
#project-icon {
    float: left;
    height: 32px;
    width: 32px;
}
#project-description {
    margin: 0;
    padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
    var projects = [
      {
        value: ":-)",
        label: "ยิ้ม"
      },
      {
        value: ":- (",
        label: "หน้าบึ้ง เศร้า สงสารหรือเห็นอกเห็นใจ"
      },
      {
        value: " :-/",
        label: "ไม่ค่อยพอใจหรือตัดสินใจไม่ได้"
      },
    {
       value : "(^_^)",
       label : "ยิ้ม"
    }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.value );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.label );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.value + "<br>" + item.label + "</div>" )
        .appendTo( ul );
    };
} );
</script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

</body>
</html>

PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม เขียนโปรแกรมง่ายและสะดวกขึ้น
สนใจสั่งซื้อราคาสุดคุ้ม >> http://fastcoding.phpcodemania.com/

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

JavaScript Template Engine : ลดภาระฝั่งเซิร์ฟเวอร์ โดยการใช้ จาวาสคริปต์แสดงผลแทน

โดย SONGCHAI SAETERN •

หลังจากที่ใช้ CodeIgniter ก็เกิดชื่นชอบใน "Template Parser Class" ก็เลยทดลองใช้งาน แล้วก็พบว่า PHP + Array เป็นอะไรที่เข้ากันจริงๆ และช่วงนั้นก็อยากจะเขียนสคริปต์ที่ลดภาระของเซิร์ฟเวอร์ให้เบาลงบ้าง โดยอาศัยหลักการใช้ JavaScript ช่วยแสดงผลแทนคำสั่งของ PHP

ซึ่งตอนนี้ก็มีจะมี AngularJS ที่ตอบโจทย์ข้อนี้อย่างมาก เพียงแต่ว่าผมไม่ได้ต้องการความสามารถทั้งหมดแค่ต้องการแค่ส่วนของ Template เท่านั้น ก็เลยเขียนมันขึ้นมาเองแบบบ้านๆซะเลย ^O^

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

คีย์เวิร์ดวันละคำวันนี้ jQuery, how do you find only visible

โดย SONGCHAI SAETERN •

คีย์เวิร์ดวันละคำ วันนี้ ขอเสนอคำว่า

"jquery selector visible only"

ถามว่าทำไมถึงต้องค้นหาคำนี้
คำตอบก็คือ เพราะบางครั้งเราก็จะต้อง filter หรือค้นหาแค่รายการที่เราต้องการ ส่วนที่เหลือก็ซ่อนเอาไว้ เมื่อใช้คำสั่งเลือกทั้งหมดให้มีผลกับตัวที่เรา filter ไว้เท่านั้น แต่ดันไปมีผลกับทุกตัวรวมถึงที่ซ่อนไว้

เช่นนั้นแล้วการ filter ของเราจะมีประโยชน์อะไร

#Bug ไม่ต้องการเวลา

https://api.jquery.com/visible-selector

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

jQuery filter Case insensitive : ค้นหาอีลิเมนต์ที่ต้องการด้วย jQuery

โดย SONGCHAI SAETERN •

ก่อนหน้านี้ผมเคยแนะนำวิธีค้นหาข้อมูลด้วย :contains() Selector ใน jQuery แต่ปรากฏว่างานผมถูกตีกลับครับ ทดสอบแล้วไม่เป็นดังที่ต้องการ เพราะ

text: A string of text to look for. It's case sensitive.

ครับ มันสนใจตัวอักษร ระหว่างตัวเล็กกับตัวใหญ่ด้วย

<p>I am Cyberman</p>

ถ้าผมต้องการค้นหา <p> ที่มีคำว่า cyberman การใช้ contains จะค้นไม่เจอครับ ต้องให้เหมือนทุกคำ คือ จะเจอก็ต่อเมื่อค้นคำว่า Cyberman

ดังนั้น ก็ต้องเปลี่ยนตามลิงค์นี้แหละครับ ^^"

http://stackoverflow.com/questions/7853851/jquery-how-can-i-write-a-case-insensitive-attribute-contains-selector

หลังจากที่ใช้โค้ดใหม่ก็เป็นดังนี้

$('tr').hide();//ซ่อนทั้งหมด

var myCode = $('#my_code').val();
var reg = RegExp(myCode ,"i");
$('.select_item').filter(function() {
return reg.test(this.value);
}).parents('tr').show();//แสดงตามรายการที่ตรง my_code

เพียงเท่านี้ ทุกแถวที่มีคำตรงกับ my_code ก็จะแสดงส่วนแถวที่ไม่ตรงก็จะถูกซ่อนไว้ตามเดิม

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

บทความเก่ากว่า »