web programming bookmark: jquery

แสดงบทความที่มีป้ายกำกับ jquery แสดงบทความทั้งหมด

วันพฤหัสบดีที่ 11 สิงหาคม พ.ศ. 2554

jquery plugin and ajax request

โดยปกติ page ที่ถูกเรียกด้วยวิธี ajax รูปแบบ html ไม่ควรมีโค้ด javascript ปนในนั้นครับ

ตัวอย่างที่ไม่ดีนะครับ ผิดเนื่องจากมี javascript ใน page1.php
และที่ผิดอย่างเห็นได้ชัดเลยคือมีการเรียก jquery.js สองครั้งประกาศตัวแปรฯลฯ function สองครั้ง
และ request ซ้ำอีกก็จะประกาศซ้ำเป็นหลายครั้งจะทำให้เกิดปัญหาครับ

// page1.php
<script src="jquery.js"></script>
<script src="jquery.datepicker.js"></script>
<script>
$(function(){
$('#d').datepicker();
});
</script>
<input id="d" type="text"/>

// index.php
<script src="jquery.js"></script>
<script>
$(function(){
$('#test').load('page1.php');
});
</script>
<div id="test"></div>

===================================================

ถ้าต้องการให้ทำงานไม่มีปัญหานะครับจะต้องใช้วิธี request page1.php ซึ่งมีแค่ html
และให้ไฟล์ผู้เรียก (index.php) ใช้คำสั่งควบคุมแทน

// page1.php

<input id="d" type="text">

// index.php
<script src="jquery.js"></script>
<script src="jquery.datepicker.js"></script>
<script>

$('#test').load('page1.php',function(){
$('#d').datepicker(); //หลังจากใส่ html page1.php ใน index.php แล้วเรียกคำสั่ง plugin อีกครั้ง
});
</script>
<div id="test"></div>

วันพฤหัสบดีที่ 17 กุมภาพันธ์ พ.ศ. 2554

jquery Stop Propagation

ลำดับการเกิด event จาก element หนึ่งๆ จะเริ่มต้นจาก elment ด้านใน หรือด้านนอก ในแต่ละ browser จะต่างกัน
แต่ jquery จะกำหนดให้ลำดับการเกิดแบบ Event bubbling นั่นคือเริ่มจากด้านในก่อน
(โดยทั่วไปนะแต่อาจมีเทคนิคพิเศษที่ทำให้ลำดับการเกิด event เปลี่ยน)
http://www.quirksmode.org/js/events_order.html
http://api.jquery.com/bind/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(function(){
        $('#xxx').click(function(event){
   alert('div event');
  });
  $('#xxx button').click(function(event){
   alert('button event');
   if (confirm('stop next event?'))
    return false;
  });
    });
    //]]>
</script>
</head>
<body>

<div id="xxx">
 ###<button>button in div</button>###
</div>

</body>
</html>

selector จะใช้สำหรับการเลือก element ครับ
แต่ถ้าจะจัดการกับ event ที่มี element ที่คาบเกี่ยวกัน (ซ้อนทับกัน)
แค่ selector ยังไม่พอครับ เพราะ event handler
ของตัวที่คลุมอยู่ก็กระทบกับตัวที่อยู่ข้างในมันด้วย จึงต้องใช้คำสั่ง stop propagation ควบคุมอีกทีหนึ่ง

การใช้คำสั่ง return false; ข้างบนี้จะเทียบได้กับ preventDefault(); และ stopPropagation(); พร้อมๆ กันครับ

stopPropagation()
preventDefault()

วันอังคารที่ 1 กุมภาพันธ์ พ.ศ. 2554

jQuery ช่วยส่งข้อมูลแบบ Cross Domain ง่ายนิดเดียว

การส่งค่า AJAX ไปยัง server side script ที่อยู่คนละโดเมนกับไฟล์ที่รีเควสท์ browser ต่างๆ จะไม่อนุญาติให้ทำเนื่องจากเหตุผลทางด้าน security
โดยทั่วไปจะแก้ปัญหาใช้วิธีรีเควสท์ AJAX ผ่านทาง Proxy แต่วิธีนี้ต้องใช้คำสั่งจำพวก
open remote file ถ้าใช้เว็บโฮสฟรีก็หมดสิทธิใช้คำสั่งพวกนี้เพราะมักจะถูกกันเอาไว้ไม่ให้ใช้

แต่มีอีกทางเลือกหนึ่งเป็นเทคนิคในการแทรก script tag ลงไปพร้อมกับตั้ง src ให้เป็น url ของไฟล์ที่มีฟอร์แมท JSONP
ทำให้เราสามารถเอาข้อมูลมาใช้งานได้เลย
ฟอร์แมทของ JSONP สรุปง่ายๆ เลยก็คือเป็น statement ของการ call function ธรรมดาๆ นี่เอง
โดยมี agument อยู่ในรูปแบบ JSON
เช่น callbackfunction({"name":"hello world"}); เป็นการส่ง argument
ไปให้กับ function ที่ชื่อว่า callbackfunction ดังนั้นเมื่อเราสร้าง function ที่ชื่อว่า callbackfunction อยู่ก่อนแล้ว
function callbackfunction(e){
alert(e.name); //แสดง hello world (จะทำงานทันทีหลังจากโหลด JSONP เรียบร้อย)
}
เราก็สามารถดึงเอา argument ที่ได้ server ส่งมาให้ได้โดยง่าย

เมื่อเราเรียกคำสั่ง $.ajax และกำหนด dataType เป็น jsonp
jQuery จะเปลี่ยนจากการรีเควสท์ AJAX เป็นการแทรก tag script ดังกล่าวข้างต้นให้โดยอัตโนมัติ
ทำให้เราสามารถรีเควสข้อมูลแบบ GET ผ่านทาง script tag ได้ราวกับการรีเควส AJAX ตามปกติ

test.php

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620" />
<title>JSONP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(function(){
 $("#jsonp-request").click(function(e){
   $.ajax({
     url:'http://goldxp.thport.com/jquery/jsonpdata.php',
   type:'GET',
   dataType:'jsonp', //ตรงนี้ทำให้สามารถ cross domain ได้
   dataCharset:'jsonp',
     success:function(e){
    alert("jsonp data="+e[0].name);
   }
   });
   e.preventDefault();
 });
});

</script>

</head>
<body>
    <a href="#" id="jsonp-request">JSONP-Request</a>
</body>
</html>

jsondata.php

<?php echo $_GET['callback']?>([{"name" : <?php echo rand(1,1000);?>}]);

เนื่องจากเป็นการเรียกข้ามโดเมนจึงมีเรื่องต้องระวังเรื่องความปลอดภัยเพิ่มขึ้นดังนี้ครับ
1) ฝั่ง server ถ้าจะรับข้อมูลจาก client เอาไปบันทึก แม้ว่าจะเชื่อถือ http referer ไม่ค่อยได้
แต่อย่างน้อยก็ควรจะตรวจสอบ http referer เพื่อกันการยิ่งข้อมูลมั่วๆ เข้ามา
2) ฝั่ง client ถ้าไม่ได้ตรวจสอบ json ให้ละเอียดว่าเป็นข้อมูลอย่างเดียวไม่มีคำสั่งปนเข้ามา
จะต้องรับข้อมูล json, jsonp หรือ javascript จาก server ที่น่าเชื่อถือเท่านั้น
เพราะอาจจะมีการแทรกคำสั่ง javascript เข้ามาใน json ได้เหมือนกันยกตัวอย่างเช่น
callbackfunction(function(){alert('test');}());
สำหรับ json ยังพอที่จะตรวจสอบข้อมูลได้ก่อนจะเรียกคำสั่ง eval(response_text)
แต่ jsonp ที่เรียกผ่านทาง tag script เป็นคำสั่งโดยตรงเลย
ดังนั้นควรจะรับข้อมูล jsonp ก็เฉพาะเว็บไซท์ที่น่าเชื่อถือเท่านั้นครับ

วันจันทร์ที่ 17 มกราคม พ.ศ. 2554

inline update by num


<?php
 if ($_SERVER['REQUEST_METHOD'] == 'POST' && $_GET['action'] == 'approve'){
   $id = intval(@$_GET['id']);
   echo 'update tb1 set APPROVE=1 where id='.$id;
   //you will do real update yourself.
   die;
 }
 if ($_SERVER['REQUEST_METHOD'] == 'POST' && $_GET['action'] == 'unapprove'){
   $id = intval(@$_GET['id']);
   echo 'update tb1 set APPROVE=0 where id='.$id;
   //you will do real update yourself.
   die;
 }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>inline update by num</title>
<style type="text/css">
* {margin:0;padding:0}
tr.checked {background-color:#ccc;}
#tb tr.orange {background-color:#F90;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
 $('.approve:checked').parents('tr').addClass('checked');
    $('.approve').click(function(e){
  var tr = $(this).parents('.tr');        
  var record_id = $(this).val();  
  tr.addClass('orange');
  
  //set to valid
  if ($(this).is(':checked')){
   if (confirm('set to valid?')){
    $.ajax({  //ajax update
     url:'?action=approve&id='+record_id,
     type:'POST',
     dataType:'html',
     success:function(data){
       alert(data);
             tr.removeClass('orange').addClass('checked');
     }
    }); //end ajax update
   }else{
          e.preventDefault();
    tr.removeClass('orange').removeClass('checked');
   }
  }
  
  //set to invalid
  if (!$(this).is(':checked')){
   if (confirm('set to invalid?')){
    $.ajax({  //ajax update
     url:'?action=unapprove&id='+record_id,
     type:'POST',
     dataType:'html',
     success:function(data){
       alert(data);
             tr.removeClass('orange').removeClass('checked');
     }
    }); //end ajax update
   }else{
          e.preventDefault();
    tr.removeClass('orange').addClass('checked');
   }
  }
  
    });
});
//]]>
</script>
</head>
 
<body>
 
    <table border="1">
        <tbody id="tb">
        <tr class="tr"><td>###### 1</td><td><input type="checkbox" value="1" class="approve" /></td></tr>
        <tr class="tr"><td>###### 2</td><td><input type="checkbox" value="2" class="approve" /></td></tr>
        <tr class="tr"><td>###### 3</td><td><input type="checkbox" value="3" class="approve" checked="checked" /></td></tr>
        </tbody>
    </table>
 
</body>
</html>

วันเสาร์ที่ 15 มกราคม พ.ศ. 2554

delete record confirmation by num


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>delete record confirmation by num</title>
<style type="text/css">
* {margin:0;padding:0}
tr.selected {background-color:#ccc;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
    $('.del').click(function(e){
        e.preventDefault();
        $(this).parents('.tr').addClass('selected');
        if (confirm('delete?')){            
            //ajax delete
            //var id = $(this).attr('rel');
            //$.post('delete-action.php?id='+id);
            $(this).parents('.tr').remove();
        }else{
            $(this).parents('.tr').removeClass('selected');
        }
    });
});
//]]>
</script>
</head>

<body>

    <table border="1">
        <tbody id="tb">
        <tr class="tr"><td>###### 1</td><td><a href="#" class="del" rel="1">del</a></td></tr>
        <tr class="tr"><td>###### 2</td><td><a href="#" class="del" rel="2">del</a></td></tr>
        </tbody>
    </table>

</body>
</html>

วันพุธที่ 29 ธันวาคม พ.ศ. 2553

jquery selector

tag_name เช่น a หมายถึง <a></a> ทั้งหมดใน html document

id_name เช่น #link1 ตรงกับ <tag id="link1"></tag>

class_name เช่น .class_name ตรงกับ <tag class="class_name"></tag>

[attribute_name] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" ตัวอย่างเช่น [name] คือทุกแทกที่มี attribute href เช่น <a href="test"></a>

[attribute_name="test"] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" มีค่าเท่ากับ test ตัวอย่างเช่น [href] คือทุกแทกที่มี attribute href="test" เช่น <a href="test"></a>

[attribute_name^="test"] ตรงกับ tag ใดๆ ที่มี attribute "attribute_name" มีค่าเริ่มต้นเท่ากับ test ตัวอย่างเช่น [href] คือทุกแทกที่มี attribute href เริ่มต้นด้วยคำว่า test เช่น <a href="test_12345"></a>

parent descendant ตัวอย่างเช่น #x1 a
คือ tag a ทั้งหมดที่อยู่ใน tag ที่มี id="x1" เช่น <div id="x1"><b>test</b><a>ss</a><a>ss2</a><span><a>ss3</a></span></div> จะหมายถึง <a>ss</a><a>ss2</a> และ <a>ss3</a>

parent > children ตัวอย่างเช่น #x1 > a
คือ tag a ทั้งหมดที่อยู่ใน tag ที่มี id="x1" เช่น <div id="x1"><b>test</b><a>ss</a><a>ss2</a><span><a>ss3</a></span></div> จะหมายถึง <a>ss</a><a>ss2</a>

เราสามารถรวมเอาหลายๆ selector มารวมกันเพื่อ tag ที่เฉพาะเจาะจงมากขึ้นเช่น
.example[href^="http://"][target="_blank"] span
เป็นการเลือกทุก tag span ทั้งหมด
ที่อยู่ภายใน tag ซึ่งมี class เท่ากับ example และ tag นั้นยังมีมี attribute href เริ่มต้นด้วย http:// และ attribute target เท่ากับ blank

ไว้จะมาเขียนเพิ่มอีกครับ ..

jquery selector

วันเสาร์ที่ 25 ธันวาคม พ.ศ. 2553

jquery enlarge image by num


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />

<title>enlarge image by num</title>

<style type="text/css">

* {margin:0;padding:0}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>

//<![CDATA[

$(function(){

 $('.imgx').hover(function(){

  var w = 200;

  var h = 220;

  var d = 600;//duration

  var imgx = $(this);

  $('.imgy').remove();

  var imgy = $('<img class="imgy" src="'+$(this).attr('src')+'"/>').appendTo('body');

  imgy.css({

   position: 'absolute',

   left: imgx.offset().left,

   top: imgx.offset().top,

   width: imgx.width(),

   height: imgx.height()

   }).mouseout(function(){

    $('.imgy').remove();

   }).click(function(){

    $('.imgy').remove();

   });

  imgy.animate({

   left: imgx.offset().left - (w/2),

   top: imgx.offset().top - (h/2),

   width: w+'px',

   height: h+'px'

  },d);

 },function(){});

});

//]]>

</script>

</head>

 

<body>



<div style="width:500px;height:350px;padding:100px;border:solid green 1px;">

<?php foreach(range(1,117) as $i):?>

<img src="http://www.google.com/friendconnect/scs/images/NoPictureDark32.jpg" class="imgx" />

<?php endforeach;?>

 </div>

 

</body>

</html>

วันจันทร์ที่ 29 พฤศจิกายน พ.ศ. 2553

jquery ซ่อนแสดง show/hide column โดยใช้ checkbox


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery show hide column</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $(function(){
   var tb = $('#column_hidable');
   var cbp = $('#checkbox_panel');
   tb.find('tr:first > td').each(function(){
     var cb = $('<input type="checkbox" checked="checked" />').click(function(){
      var cbidx = cbp.find(':checkbox').index($(this));
      tb.find('tr').each(function(){
       $(this).find('td').eq(cbidx).toggle();
      });
     });
     cb.appendTo(cbp).after($(this).text()+'<br'+'/>');
   });
 });
</script>
</head>

<body>

 <?php
     $cols = array("Field 1","Field 2","Field 3","Field 4","Field 5");
 ?>
    <div id="checkbox_panel"></div>
    <table border="1" cellspacing="0" cellpadding="5" id="column_hidable">
      <tr bgcolor="#CC99FF">
        <?php foreach($cols as $col_name):?>
            <td><?php echo $col_name;?></td>
        <?php endforeach;?>
      </tr>
      <?php $i=0; while($i++<5):?>
      <tr>
        <?php foreach($cols as $col_name):?>
            <td><?php echo $col_name;?></td>
        <?php endforeach;?>
      </tr>
      <?php endwhile;?>
    </table>

</body>
</html>

วันพุธที่ 24 พฤศจิกายน พ.ศ. 2553

jquery graph

http://www.1stwebdesigner.com/resources/top-jquery-chart-libraries-interactive-charts/

วันเสาร์ที่ 6 พฤศจิกายน พ.ศ. 2553

jquery row highlight


<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>d</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
 .silver {color:silver;background-color:#990000;}
 .green {color:#009999;}
 .red {color:#FF0000;}
</style>
<script type="text/javascript">
$(function(){
 $('.green').click(function(e){
  e.preventDefault();
  $(this).parents('.row').find('td').removeClass('silver');
 });
 $('.red').click(function(e){
  e.preventDefault();
  $(this).parents('.row').find('td').addClass('silver');
 });
});
 
</script>
 
</head>
<body>
 

 <table border="1" width="70%">
    <?php foreach(range(1,5) as $i):?>
    <tr class="row"><td><?php echo "TEST$i";?></td><td><a href="#" class="red">red</a></td><td><a href="#" class="green">green</a></td></tr>
    <?php endforeach;?>
    </table>

 
</body>
</html>

วันจันทร์ที่ 25 ตุลาคม พ.ศ. 2553

jquery auto province

แสดงรายชื่อ อำเภอ จังหวัด และรหัสไปรษณีย์ จากการพิมพ์ชื่อตำบล
Demo
การทำงานจะช้าหน่อยครับเพราะใช้โฮสฟรีเป็นตัวทดสอบ
Download

=== เกี่ยวกับ jquery auto-province ===
ใช้ jquery + ajax + dhtml เพื่อเลือกชื่อ ตำบล อำเภอ และจังหวัดโดยอัตโนมัติ
โดยใช้เทคนิค ajax suggest หรือ autocomplete
โดยคุณ memee ผู้นำเสนอไอเดียนี้

=== การติดตั้ง ===
1) นำไฟล์ auto-province.sql ไป run ใน database ที่ต้องการใช้งาน
2) เปิดไฟล์ connect.php เพื่อปรับค่า config ที่ใช้ในการต่อ database
3) เปิดไฟล์ example.php เพื่อทดสอบผ่านทาง webserver อย่างเช่น http://localhost/auto-province/example.php

=== วิธีใช้งาน ===
1) ลองพิมพ์ชื่อตำบลในช่องตำบล
2) เลือก ตำบล อำเภอ จังหวัด รหัสไปรษณีย์โดยการคลิ้ก หรือการกด enter
3) เพิ่มรหัสไปรษณีย์ใหม่โดยการเลือกรายการ ตำบล อำเภอ จังหวัด ที่ไม่มีรหัสไปรษณีย์ หรือกด ctrl+insert
4) ลบรหัสไปรษณีย์โดยการเลือกรายการ ตำบล อำเภอ จังหวัด ที่มีรหัสไปรษณีย์และกด ctrl+delete

=== คุณสมบัติ ===
- พิมพ์ข้อความที่ช่องตำบลแล้วจะมี อำเภอ จังหวัด และรหัสไปรษณีย์ขึ้นให้เลือก
- หากไม่พบรหัสไปรษณีย์ให้เลือกสามารถเพิ่ม รหัสไปรษณีย์ได้
- สามารถลบรหัสไปรษณีย์ได้โดยกด ctrl+delete
- สามารถเพิ่มรหัสไปรษณีย์ได้โดยกด ctrl+insert

=== CHANGE LOG ===
v1.0a5 : แก้ไขปัญหาความสูงของลิงค์รายชื่อตำบล ให้มีขนาดพอดีกับการเลื่อนหน้าในหน้าต่างลิงค์รายชื่อตำบล
ใน firefox ในระบบปฎิบัติการ ubuntu-linux
v1.0a4 : เพิ่ม option add_postcode, delete_postcode
เพื่อใช้ในการยกเลิกการเพิ่มรหัสไปรษณีย์ใหม่และการลบรหัสไปรษณีย์
เพิ่ม option new_postcode_list_item ซึ่งเมื่อกำหนดค่าเป็น false
จะไม่แสดง list item ที่ใช้เป็นปุ่มเพิ่มรหัสไปรษณีย์
จะทำให้ไม่เกิดเหตุการณ์บังเอิญกดปุ่มเพิ่มรหัสไปรษณีย์โดยไม่ได้ตั้งใจ
สำหรับการเพิ่มรหัสไปรษณีย์จะสามารถใช้การกดปุ่ม ctrl+insert เพื่อเปิดหน้าต่างเพิ่มรหัสไปรษณีย์แทนครับ
v1.0a3 : แก้ไข function setTumbolList ให้ทำงานเร็วขึ้น
v1.0a2 : ปรับปรุง title bar และ stylesheet ของหน้าต่างรหัสไปรษณีย์
- แก้ไขปัญหาการกด enter ขณะเลือกรายชื่อกลายเป็นการ submit ใน opera
v1.0a1 : ปรับปรุงโปรแกรมเป็น jquery plugin
- จำกัดจำนวนการดึงข้อมูลเพียงแค่ 20 รายการแรกที่ข้อความสั้นที่สุดเท่านั้น เพื่อเพิ่มความเร็ว
- เพิ่ม ajax loader เพื่อให้ผู้ใช้รู้สึกว่าโปรแกรมกำลังทำงานอยู่ไม่ได้หยุดชะงักไปเฉยๆ
- แก้ปัญหาช่องโหว่การเพิ่มรหัสไปรษณีย์ที่ไม่ถูกต้องลงในฐานข้อมูล
v0.9a1 : เผยแพร่ไฟล์ครั้งแรก

=== การพัฒนาในอนาคต ===
ใน version 1.0a2 ได้พัฒนาให้ jquery auto-province เป็น jquery plugin แล้ว
ในอนาคตอาจจะเพิ่มให้สามารถปรับแต่งคุณสมับติต่างๆ และเพิ่มคำสั่ง
เพื่อให้สามารถทำงานได้หลากหลายมากขึ้น และปรับปรุงให้ใช้งานได้สะดวกมากขึ้นครับ

=== Reference ===

ดาตาเบสได้จาก
http://www.thaicreate.com/free-web-script/thailand-province-database.html
ของคุณ Mr.WIN

ดัดแปลงข้อมูลจากดาตาเบสโดยเพิ่มรหัสไปรษณีย์โดยอ้างอิงข้อมูลจาก
http://php.deeserver.net/download/get/106/postcode.rar
ของคุณ deawx
และเว็บไซท์
http://th.wikipedia.org/wiki/%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B9%84%E0%B8%9B%E0%B8%A3%E0%B8%A9%E0%B8%93%E0%B8%B5%E0%B8%A2%E0%B9%8C%E0%B9%84%E0%B8%97%E0%B8%A2%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%87%E0%B8%95%E0%B8%B2%E0%B8%A1%E0%B8%88%E0%B8%B1%E0%B8%87%E0%B8%AB%E0%B8%A7%E0%B8%B1%E0%B8%94

วันศุกร์ที่ 15 ตุลาคม พ.ศ. 2553

ความรู้เกี่ยวกับ json

json เอาไว้ใช้แปลงข้อมูลไปมาระหว่างภาษาน่ะ
มันเป็นข้อมูลที่อยู่ในรูปแบบ javascript object notation ซึ่งในภาษาต่างๆ สร้างคำสั่งสำหรับแปลง json
ให้อยู่ในรูปแบบโครงสร้างข้อมูลในภาษานั้นๆได้โดยตรง เลยอย่างเช่น array, object, string ฯลฯ
แต่ถ้า xml จะเป็น tag ธรรมดาๆ ซึ่งไม่มีความเกี่ยวข้องกับโครงสร้างข้อมูลในภาษาต่างๆ อย่าง array หรือ object เลย
เวลาใช้ก็เลยต้องไล่ parse tag xml จากนั้นค่อยนำมาแปลงกลับเป็น array หรือ object
ซึ่งถ้าไม่นับรวมการใช้ xml มาใช้ในการจัดเก็บข้อมูลซึ่ง xml มีโครงสร้างเหมือนฐานข้อมูลมากกว่าทำให้ง่ายในการ search
ในการแลกเปลี่ยนข้อมูลระหว่างภาษา อย่างเช่น javascript และ php, xml จะใช้ยากกว่า json ครับ
เรื่องนิยามและรายละเอียดต่างๆ อ่านที่ เว็บไซท์ json.org ละกันครับ :)

เนื่องจากมันเป็น string ธรรมดาๆ ทำให้สามารถนำตัวแปร แปลงเป็น json แล้วเก็บใน text file ได้เลยง่ายต่อการใช้อย่างมากเช่น
```
file_put_contents('test.txt',json_encode(array('test','test2')));
```
เวลาจะเอาตัวแปรมาใช้ก็
```
$array = json_decode(file_get_contents('test.txt'));
```
ซึ่งจะดีกว่า serailize() ของ php ตรงที่ test.txt นี่เป็นข้อมูลที่สามารถแปลงเป็นโครงสร้างข้อมูลในภาษาอื่นๆ ได้เกือบทุกภาษา :D

ใน json ถึงแม้ว่าพอจะทำให้เป็น ansi หรือ tis620 ได้แต่ก็ไม่นิยมทำกันจะทำให้เป็น utf8 มากกว่าครับ
ดังนั้นในการแปลงข้อมูลภาษาไทยจะต้องแปลงให้เป็น utf8 ก่อนครับ
แง่บๆ พูดถึงในการแปลงข้อมูลใน php เป็น json นะแต่ใน javascript รูปแบบการจัดเก็บไม่รู้เป็นเป็น utf8 utf16 หรืออะไรก็ไม่รู้
```
echo json_encode(array('ภาษาไทย','test2'));
```
เวลา save ไฟล์โค้ด php นี้จะต้องเซฟเป็น utf8 ครับ
แต่ถ้าเซฟไฟล์ php นี้เป็น ansi ก็จะต้องแปลงข้อมูลก่อนเช่น
```
echo json_encode(array(iconv('TIS-620','UTF-8','ภาษาไทย'),'test2'));
```

ในการใช้กับ ajax ก็ควรจะระบุ header เป็น utf8 ด้วยครับ :D
```
<?php
header('Content-type:application/json;charset=utf-8');
echo json_encode(array('ภาษาไทย','test2'));
```
สำหรับฝั่ง javascript สมมุติได้รับข้อมูลมาจากการ request ajax แล้วก็ให้ทำการ eval ตัวแปรครับ
```
eval('var data = '+responseText+';');
```
ก็จะได้ข้อมูลมาใช้งานครับ alert(data[0]+','+data[1]);
พอดี javascript , json เป็นโครงสร้างข้อมูลของภาษาโดยตรงเลยใช้ eval ได้เลยครับ
ถ้าเป็นภาษาอื่นๆ จะมี function decode json string อีกทีหนึ่งครับ

ถึงแม้ว่าตอนเริ่มต้นข้อมูลของเราจะเป็น utf8 แต่เราสามารถใช้ข้อมูลที่ได้รับจาก php
ในไฟล์ html ที่เป็น tis620 หรือ windows874 ได้ครับ เนื่องจากการข้อมูลที่ได้รับเมื่อมาอยู่ในรูป javascript
จะถูก browser แปลง encoding ให้ตาม encoding ของหน้านั้นโดยอัตโนมัติครับ
ตัวอย่างเช่นหน้าที่ระบุ charset โดยใช้
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
ก็ใช้ข้อมูลจาก
```
<?php
header('Content-type:application/json;charset=utf-8');
echo json_encode(array('ภาษาไทย','test2'));
```
ได้เลย โดยไม่ต้องแปลง encoding ครับ

serialize() ใน jquery จะดึงเอาข้อมูลใน form ให้อยู่ในรูปแบบ input1=1&input2=2&input3=3 ครับ
```
$.ajax({
  type: 'get',
  url: 'test.php',
  data: $('#formid').serialize()
});
//$('#formid').serialize() ก็คือข้อมูล input1=1&input2=2&input3=3 ครับ
```
ใน key data ของคำสั่งยังสามารถส่งค่าเป็น object ได้ด้วยครับ
```
$.ajax({
  type: 'get',
  url: 'test.php',
  data: {input1:1,input2:2,input3:3}
});
```
data: ซึ่งตรงนี้ {input1:1,input2:2,input3:3} ซึ่งเป็นผลลัพธ์ก็จะถูกแปลงเป็น input1=1&input2=2&input3=3 อีกทีหนึ่งครับ

สำหรับ jquery จะมีคำสั่งในการแปลง json string จาก server มาเป็นโครงสร้างข้อมูล javascript ครับ (รู้สึกจะใช้ eval)
```
$.ajax({
  url:'test.php',
  type:'GET',
  dataType:'json',
  success:function(e){
    alert(e[0]+','+e[1]); //ข้อมูล json ถูกแปลงเป็นโครงสร้างข้อมูลใน javascript แล้ว
  }
});
```
แต่ในการแปลงข้อมูลให้อยู่ในรูปแบบ json เพื่อส่งไปยัง server ตรง jquery ยังไม่มีคำสั่งนี้ครับ
แต่ก็มีคนสร้าง jquery plugin สำหรับแปลงโครงสร้างข้อมูล javascript ไปเป็น json string ไว้แล้วครับ

อ่านเพิ่มเติมได้ที่
http://www.thaicreate.com/php/forum/032712.html

วันพุธที่ 13 ตุลาคม พ.ศ. 2553

jquery plugin ที่น่าสนใจ

improve-jquery-tips
lightbox
alert
create slide show
curvycorner
fancy thumbnail hover
sifr
uploadify
jcrop
auto-province
image-color
impromptu
cycle
image-dropdown
multi-level-menu
fisheye menu
gps

http://www.thaicreate.com/outling.aspx?l=http://dhtmlx.com/docs/products/dhtmlxGrid/
http://www.learningjquery.com/2009/07/setting-up-visual-studio-intellisense-for-jquery
http://www.javascripttoolbox.com/jquery/cheatsheet/
http://www.demoncodez.com/component/tag/ajax.html
http://www.longtailvideo.com
http://code.google.com/p/flot/
http://www.ryancooper.com/resources/keycode.asp
http://www.tareeinternet.com/scripts/comparison-tool/
http://htmlpurifier.org/
http://www.ziddu.com/download/7770677/jquery-form-validation-01.zip.html

หน้าเว็บ