Showing posts with label AJAX. Show all posts
Showing posts with label AJAX. Show all posts

Friday, March 19, 2010

[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'
            );
        });