[AJAX] GET cache problem

避免cache的作法 (利用timestamp傳不同get參數)

 

在url後面加個 '?q=' +new Date().getTime()

 

 

    jQuery(".del").click( function() {
        delPicId = jQuery(this).attr("id").charAt(3);
        jQuery.getJSON("blah/"+delPicId +"?q="+new Date().getTime(),
            function(data){
                jQuery("#pic"+delPicId).attr("src", 'webroot?>img/blah.jpg');
            }
        );
    });

[js] swap image

/*
    img jQuery object of img tag element
    new img suffix
    1/0 suffix or not
*/
function imgSwap(img, suffix, state) {
    //  ext/. -3 -1
    var img_src = img.attr("src");
    var suffix_pos = img_src.length -4 -suffix.length;
    var img_src_suffix = img_src.substr(suffix_pos, suffix.length);
    var img_src_ext = img_src.substr(img_src.length-4);

    if (state == 1 && img_src_suffix != suffix)
    {
        //prefix + suffix + ext
        img.attr("src", img_src.substr(0, img_src.length-4) + suffix + img_src_ext );
    }
    else if (state ==0 && img_src_suffix == suffix)
    {
        //prefix + ext
        img.attr("src", img_src.substr(0, suffix_pos) + img_src_ext );
    }
}
function a_blur() {
    jQuery("a").focus( function() { this.blur(); return false; } );
}


使用，1是over，0是mouse out
    jQuery(".swap").hover(
        function(){ imgSwap(jQuery(this), "-over", 1) },
        function(){ imgSwap(jQuery(this), "-over", 0) }
    );

[網站] js, css參考網址

js
http://krook.org/jsdom/

css
http://meiert.com/en/indices/css-properties/

[jQuery] Accordion

http://jqueryui.com/demos/accordion/

http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

    image( $img_path.'info.png', array('id'=>'info', 'class' =>'swap link') ) ?>
       

    jQuery("#menu_block").accordion({ event: 'mouseover', animated: false, autoHeight: false });

a包主選單，div包選取主選單時展開的內容

[jQuery] disable rightclick

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
        return false;  
    });  
});  

• W3C has added the method preventDefault() to the event. If you call it the default action is prevented.
• Microsoft has added the property returnValue to the event. If you set it to false the default action is prevented.

[jQuery] context

jQuery selector在找東西的時候會限制在context裡面找，不會找整個dom，better performance

var right_block = jQuery('#right_block');

jQuery("#close_fill", right_block).click( function() {
    jQuery("#fill_info", right_block).css('display', '
});

[AJAX] file upload

http://valums.com/ajax-upload/

[AJAX] load page

要讀取一個頁面插入網頁

jQuery可用Ajax.load
Prototype可用Ajax.Updater

用 jQuery，ctp中的js不會執行(好像是firefox會發生...忘了)

用Protoype，IE不會吃寫在ctp的css，一 定要寫在css檔中連結進來才有效
為了避免不同AJAX頁面的css衝突
1) 用js動態讀取/卸載css檔 (jQuery plugin xLazyLoader，1.4版會進jQuery)
2) 在id和class的naming都加入AJAX page的prefix

在ctp中
    定義的function
    連結的js檔
        echo $javascript->link('jquery/jquery-1.3.2.min');
都不會起作用 (因為prototype是用eval來執行AJAX頁面的javascript)

[AJAX] form送出資料

jQuery可以用Ajax/serialize 把form的element都轉成query string再用Ajax
或是jQuery form plugin http://www.malsup.com/jquery/form/

Prototype 直接對form用 request就可以了
參考
    $('submit').observe('click', function(){
        $("info-form").request( {onSuccess: function(r) {
            switch(r.responseJSON.error) {
                case 0:
                    alert(r.responseJSON.result);
                    break;
                }
            } } );
        } );


我是覺得用jQuery比較方便
Prototype需要在php令外送header才能接受json

用jQuery做AJAX post的範例 (補填個人資料)
        jQuery("#send", right_block).click( function() {
            jQuery.post('action_url',jQuery("#form_fill_info", right_block).serialize(),
                function(data){
                    alert(data.msg);
                    if (data.error == 0)
                        jQuery("#fill_info", right_block).css('display', 'none');
                },'json'
            );
        });

[網頁] 點連結後不出現虛線框

原理是在出現後馬上用blur()消除

去除連結 的虛線框
TEXT

 

jQuery("#menu_block a").focus( function() { this.blur(); return false;} );