prototype.jsを使ってAjaxを呼び出すプログラムやっていていつも問題になっていたことが今日やっと解決できた。
きっかけはここ。
ひげぽん OSとか作っちゃうかMona- - 実践 prototype.js [2]
http://d.hatena.ne.jp/higepon/20050901/1125555797
問題だったのは何かというと、Ajaxでサーバーのプログラムをコールし、その結果を画面に反映させるようなJavaScriptのコードをクラスに実装し、そのインスタンスを使って動作させる時にAjax RequestのonCompleteハンドラに渡す関数でthisが使えないことだった。
この原因は良くはわからないがprototype.jsで実装されているクラスとそのインスタンスがプロトタイプというオブジェクト指向の実装の一種（？）の作法によるらしい。
なにはともかくハンドラに渡された関数でthisが使えないと、Ajax呼び出し後の処理をクラスやインスタンスに閉じ込められないので非常に困っていた。
上記の記事ではイベントハンドラに渡す関数でthisを使う方法として紹介されており、問題としていることは同じなので試しにやってみたところうまくいったというお話。
一応コードはっておくけどこれだけじゃ何がなんだかって人もいるかもね。書いているコードは少しずつ公開していこうと思ってます。今日はとりあえずメモ。
var CalcFundedInvestment = Class.create();
Object.extend( CalcFundedInvestment.prototype, {
initialize: function( id ) {
this.id = id;
this.URL = './main.php';
this.debugc = 0;
this.dPtitle = '';
this.dPversion = '';
this.dPinputParameterInfomation = '';
this.dPoutputPropertyInformation = '';
this.pMgetInfo();
},
pMgetInfo: function() {
var pars = $H( { command : 'version' }).toQueryString();
var myAjax = new Ajax.Request(
this.URL,
{
method: 'post',
parameters: pars,
onLoading: this.pMloadingInfo.bind( this ),
onLoaded: this.pMloadedInfo.bind( this ),
onInteractive: this.pMinteractiveInfo.bind( this ),
onFailure: this.pMfaildInfo.bind( this ),
onSuccess: this.pMgotInfo.bind( this )
});
},
pMloadingInfo: function( request ) {
var statbar = $( 'MyCfi_header_title' );
statbar.innerHTML = 'Loading....';
},
pMloadedInfo: function( request ) {
var statbar = $( 'MyCfi_header_title' );
statbar.innerHTML = 'Loaded!';
},
pMinteractiveInfo: function( request ) {
var statbar = $( 'MyCfi_header_title' );
statbar.innerHTML = 'Interactive';
},
pMfaildInfo: function( request ) {
var statbar = $( 'MyCfi_header_title' );
statbar.innerHTML = 'Ajax call error has occured!';
},
pMgotInfo: function( request ) {
var statbar = $( 'MyCfi_header_title' );
statbar.innerHTML = 'Ajax call succeeded';
req = request.responseXML;
var title = $A(req.getElementsByTagName( 'title' ))[0].getAttribute( 'value' );
var version = $A(req.getElementsByTagName( 'version' ))[0].getAttribute( 'value' );
var inparamsinfos = $A(req.getElementsByTagName( 'input_parameter' ));
var otpropinfos = $A(req.getElementsByTagName( 'output_property' ));
this.dPtitle = title;
this.dPversion = version;
this.dPinputParameterInfomation = new Array();
this.dPoutputPropertyInformation = new Array();
var ui_title = $( 'MyCfi_header_title' );
ui_title.innerHTML = title;
var ui_version = $( 'MyCfi_header_version' );
ui_version.innerHTML = version;
inparamsinfos.each( function( param ) {
var pname = param.getAttribute( 'name' );
var plabel = param.getAttribute( 'label' );
var dvalue = param.getAttribute( 'default_value' );
var vunit = param.getAttribute( 'value_unit' );
var ui_label = $( 'MyCfi_input_' + pname + '_label');
ui_label.innerHTML = plabel;
var ui_value = $( 'MyCfi_input_' + pname + '_value');
ui_value.value = dvalue;
var ui_unit = $( 'MyCfi_input_' + pname + '_unit');
ui_unit.innerHTML = vunit;
});
var dPopi = this.dPoutputPropertyInformation;
otpropinfos.each( function( prop ) {
var idx = dPopi.length;
dPopi[idx] = {
name : prop.getAttribute( 'name' ),
label : prop.getAttribute( 'label' ),
value_unit : prop.getAttribute( 'value_unit' )
};
});
this.dPoutputPropertyInformation = dPopi;
},
dMexec: function() {
var fc = $F( 'MyCfi_input_funding_cash_value' );
var ir = $F( 'MyCfi_input_interest_rate_value' );
var nt = $F( 'MyCfi_input_number_of_time_value' );
var pars = $H( { command : 'request',
funding_cash : fc,
interest_rate : ir,
number_of_time : nt
}).toQueryString();
var myAjax = new Ajax.Request(
this.URL,
{
method: 'post',
parameters: pars,
onLoading: this.pMloadingResult.bind(this),
onLoaded: this.pMloadedResult.bind(this),
onInteractive: this.pMinteractiveResult.bind(this),
onFailure: this.pMfaildResult.bind(this),
onSuccess: this.pMgotResult.bind(this)
});
},
pMloadingResult: function( request ) {
var statbar = $( 'MyCfi_result_label' );
statbar.innerHTML = 'Loading....';
},
pMloadedResult: function( request ) {
var statbar = $( 'MyCfi_result_label' );
statbar.innerHTML = 'Loaded!';
},
pMinteractiveResult: function( request ) {
var statbar = $( 'MyCfi_result_label' );
statbar.innerHTML = 'Interactive';
},
pMfaildResult: function( request ) {
var statbar = $( 'MyCfi_result_label' );
statbar.innerHTML = 'Ajax call error has occured!';
},
pMgotResult: function( request ) {
var statbar = $( 'MyCfi_result_label' );
statbar.innerHTML = 'Request Ajax call succeeded';
req = request.responseXML;
//alert( req );
var op = this.dPoutputPropertyInformation[0];
//alert( this.dPoutputPropertyInformation );
var ab = $A(req.getElementsByTagName( op.name ))[0];
//alert( ab );
var name = $( 'MyCfi_result_label' );
name.innerHTML = op.label;
var label = $( 'MyCfi_result_value' );
label.innerHTML = ab.getAttribute( 'value' );
var unit = $( 'MyCfi_result_unit' );
unit.innerHTML = op.value_unit;
}
} );
|
