Showing posts with label AJAX. Show all posts
Showing posts with label AJAX. Show all posts
Friday, March 19, 2010
[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)
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'
);
});
或是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'
);
});
Subscribe to:
Posts (Atom)