IBM : Master Ajax Programming ( year 2006 )

IBM : Master Ajax Programming Part 6 ( since Year 2006 )
http://www.ibm.com/developerworks/web/library/wa-ajaxintro6/index.html?cmp=dw&cpb=dwwdv&ct=dwgra&cr=twitter&ccy=zz&csr=81mstrajaxprt6


Other..
Path 1 http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html

treeview in YUI3

I found it on google
http://yuilibrary.com/gallery/show/treeview

ิBut , I found  jQuery Plugin easier
http://docs.jquery.com/Plugins/Treeview/treeview

Just , copy and paste to  *.php / *.html file  in web browser ,
and then run  with IE , Chrome .


-------------------------------------------------
And  TreeView from jQuery plugin again ,
with document .

http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm

-------------------------------------------------
menu in jQuery Plugin
http://plugins.jquery.com/project/jme
http://sawanna.org/jquery/jmenu/#
http://www.msconcept.fr/jMenu

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

More Javascript ... here ...
http://www.dynamicdrive.com/

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

Code Sample :: Show Tooltip ( Cross Browser IE , Chrome , FireFox )

  /* Function Show Tooltip form URL

     Browser IE7 ,Google Chrom ,Mozilla FireFox

     By      Thitipong Samranvanit.

     Date    21-10-2010

     JS         Native JavaScript  ,  jQuery     
     Parameter : topic_id , object (DOM) , event (DOM)        

  */

  function showtooltip(tid,obj,event){

             /* <<<<--- Change To Your URL */

            var url = "index.php/getview/admin_show_detail/" +  tid ;

            var tt = $("#tooltip");

            var difx = 15 ;

            var dify = 15 ;

           

            var xx , yy ;

            var e = window.event  /* IE TYPE */ ;

            if( e ){  /* IE TYPE */

               xx = e.clientX + difx ;

               yy = e.clientY + dify ;

            }else{   /* FIREFOX and  Chrome */

               xx = event.pageX + difx ;

               yy = event.pageY + dify ;

            }

            tt.html("OOO1" + e + "]");  

            tt.html("OOOP2");  

            //tt.html ( xx + " : " + yy )  ;

            tt.css('z-order',99).css("position","absolute").css("top" ,yy ).css("left" , xx );

            tt.css("border","1px solid #000000").css("background-color","lightyellow");

           

            tt.load(url);

            tt.css("opacity","0.95").show();

  }

  function hidetooltip(){

        $("#tooltip").hide();

  }

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

Usage 

HTML/PHP File  

<img src=”…”

Onclick=”…”

…

onMouseOver="javascript: showtooltip(<?=$entry['id'] ?> ,this ,event)"

onMouseOut="javascript: hidetooltip( )" 

…

> 

In this php file  

I pass parameter  (  topic_id,  this , event ) 

this = image tag object in DOM 

event =  MouseEvent  in DOM

แก้ปัญหา IE จำ Catch ของ jQueryUI ครับ เมื่อใช้ Dialog

แก้ปัญหา IE จำ Catch ของ jQueryUI  ครับ  เมื่อใช้ Dialog
เป็นปัญหาเวลาจะแสดง  Dialog

กรณีใช้ Chrome และ FireFox จะไม่จำ Cache
แต่ถ้า IE จะจำ Cache จึงมักมีปํญหากับ  Ajax และ Dialog , load
ครับ


แก้ไขตามโค้ดแนวๆนี้ครับ

ลองดูโค้ด ครับ

  $(document).ready(function(){
//$.ajaxSetup({cache: false}});
$.ajaxSetup({cache: false});       // &lt;------- ใส่ตรงนี้เข้าไป  :)
     $("#dialog").dialog({ autoOpen: false });
$("#dialog").dialog( "option", "closeOnEscape", true );
$("#dialog").dialog({ modal: true });
$("button[tag=bt1]").click( function(obj, data){

//alert("ok this is tag=bt1 : " + $(this).attr("rowid")    );
var rowid ;
rowid=  $(this).attr("rowid");
//$("#iframe1").attr("src","edit.php?id=" + rowid  );
$("#dialog").load("edit.php?id=" + rowid );

$("#dialog").dialog({title:"Title Test",width:600,height:450});
$("#dialog").dialog('open');
//location.reload(true); // refresh page
});
  });

สรุปว่า ให้ใส่
$.ajaxSetup({cache: false});
เพื่อ เคลียร์แคช ไว้ข้างหน้าโค้ดอื่นๆ
ไม่งั้นจะแสดง Dialog เดิมๆ ข้อมูลเก่าๆ แม้จะแก้ข้อมูล ใน database แล้วก็ตาม


ในโค้ดนี้แสดง วิธี ผ่านค่า ไปยัง page ถัดไปที่ไว้แสดงการแก้ไขข้อมูลด้วยครับ
และมีการใช้ $(this) แต่ไม่ขอกล่าวรายละเอียดครับ ..

=================================
สำหรับ  แถวต่างๆที่แสดง
จะมี ปุ่มกดอยู่ ที่ปุ่มกดจะมี attribute เพิ่มเข้ามา
เพื่อใช้อ้างอิง ต่อไป จาก jQuery ครับ

นี่คือตัวอย่าง  ในโค้ดนี้ ดึงข้อมูล จาก joomla มาแสดง
โดยแสดงแบบง่ายๆ ไม่สนใจความสวยงามครับ
แล้ว จับ id ใส่ไว้ในปุ่มกดเลย
ส่วน $(this) นั้น ก็ คือ  object (DOM) ปุ่มกด นั้่นๆ  นั้นเ่อง


$rs = mysql_query("SELECT * from jos_content");
while ($row = mysql_fetch_object($rs)){
echo "<hR>";
//print_r($row);
echo "<BR>ID: " . $row->id ;
echo " " ;
echo "<BR>TITLE: <font color=blue>" . $row->title . "</font>" ;
echo " " ;
echo "<BR>INTRO: " .$row->introtext ;
echo "<BR><button tag=\"bt1\" rowid=\"$row->id\" >edit</BUTTON>";
}

ลองใช้ jQuery

แล้วก็ ลองโค้ดดู
มา โพส ที่ blogspot
โค้ดมัน ก็มั่วๆๆ
เลยหาทาง ลองโพสที่ myspace แทนครับ

นี่ link ครับ ... รอ มาแก้ link อีกททีน่ะ ..

คงต้อง ใช้ function http://th2.php.net/manual/en/function.highlight-file.php
hilight_file ของ php เพื่อที่จะปรับให้ code สามารถ post บน Blogger ได้
ตัวอย่าง นี้ครับ

ใช้ $s = hightlight_file("file1.php",true); echo $s ;
โดยให้ ครอบ tag code ไว้ด้วย tag PRE อีกชั้นหนึ่ง
จะได้ผลดังนี้ ครับ

<?

$db = mysql_connect( "localhost" , "aa" 

,"123a" ) ; 


mysql_select_db("db1" ) ; 

$rs =  mysql_query( "select * from table1  ") ; 

$num =  mysql_num_rows($rs) ; 

echo  "<BR>row  num  =  $num " ;

mysql_close($db ) ;

for ($i = 0 ; $i < 10 ; $i ++) {

        echo "Test $i " ; 

} 

?>

<script  language=javascript >

function test(){

    alert( "abc") ;

}

</script> 

หรือหากไม่อยาก hilight อาจใช้วิธีนี้

<?
$s = file_get_contents( "hili2.php") ;
$s = htmlentities($s )  ; 
echo "<PRE>$s</PRE>" ;
?>

ซึ่งก็จะได้ผล เป็น plain Text ซึ่งแสดง ข้อมูล
แบบที่เป็น TextFile ธรรมดา แต่มีการ ย่อหน้าได้ ด้วย
แต่ปัญหา ที่พบคือ คนที่มา copy code จะได้ ข้อความติดกัน เป็นพืดๆ ไม่มีการย่อหน้าเว้นบรรทัดอยู่ดี ตรงนี้คือ
จะอ่านได้อย่างเดียวแต่ยังก้อบปี้ยังไม่ได้ง่ายๆ ยังหาวิธีที่ดีกว่านี้ไม่ได้ ครับ

-------------------------------------------------------------------------------
แล้วในที่สุด ก็หาตัวอย่างง่ายๆ ของ jQuery มาได้
ว่าจะทำไง ให้โพสบนเว็ป
พอดีที่เครื่องไม่ได้ลง php / apache ไว้
ก็เลย ใช้โปรแกรมที่เขียนเอง แหละชื่อ Form Basic HTML version 1.03
โพสโค้ดที่ หน้าต่างซ้าย แล้ว ก็ เลือกเมนู Edit --> Convert To String in Language --> HTML
แล้วก็ก้อบโค้ดมา ง่ายๆ
เพียงแต่ ช่องว่างมันจะแสดงเป็น nbsp เท่านั้นเอง
แล้วต้องมา replace
ออก ด้วย notepad แล้ว เติม PRE ครอบไว้

<html>
  <head>
    <script type="text/javascript"
 src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
      // Your code goes here
      $(document).ready(function(){
       alert("a");
       $("#sp1").addClass("red");
       
        $("#list1 li").hover(function(){
  $(this).addClass("green");
     },function(){
  $(this).removeClass("green");
   });     
      
      });


      </script>
 <style >
 .red     {background-color:red;}
 .green     {background-color:lightgreen;}
 </style>
   
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <button id=bt1 >aa</button>
    <span id=sp1 >aa</span>
    <ol id=list1>
     <li>aaa1</li>
     <li>aaa2</li>
     <li>aaa3s</li>
    </ol>
  </body>
  </html>