Movable Type のコメントを Ajax で投稿する２

>>7 shp さん

こんばんわ^^

> tubes テンプレート　設置　しましたが。
> コメントプレビューと投稿結果を
> 他のテンプレートでも試したいのです。

週末で良ければ shp さんのテンプレートを、わたしの方でカスタマイズしましょうか!?
その場合には、テンプレートセット一式を右上のメールフォームから添付して送って頂けますか
prototype と jQuery で対応可能ですがどちらがいいかも明記してください

>>9 mayue さん

こんばんわ^^

mayue さんのサイト拝見させてもらいました。

1. HTML ヘッダ内の script_ajaxcomments.js は必要ですか!? 不要なら削除します。

2. prototype_com.js の内容を以下のコードに差し替えます。

var ajaxComment = {
base  : 'http://studio.verse.jp/cg/sblg/',
loader: 'mt-static/images/indicator.gif',
script: 'mt-comments.cgi',
post  : function(mode) {
var me   = this;
var pars = '';
me.elem = $('comment_results');
me.form = $('commentsForm');
me.open = $('comments-open');
me.elem.innerHTML = ['<img src="', [me.base, me.loader].join(''), '" />'].join('');
me.elem.setStyle({'display':'block'});
if ('post' == mode) {
mtCommentOnSubmit(me.form);
me.form.preview.value = '';
pars = [me.form.serialize(), '&post=post'].join('');
}
else {
me.form.preview.value = '1';
pars = [me.form.serialize(), '&preview=preview'].join('');
}
new Ajax.Request([me.base, me.script].join(''), {
method: 'post',
parameters: pars,
onSuccess: function (req) {
var txt = req.responseText;
if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) {
document.location.reload();
}
else {
$('comments-open').setStyle({'display':'none'});
me.elem.innerHTML = txt;
}
},
onFailure: function(req) {
me.elem.innerHTML = req.responseText;
}
});
return false;
}
};
var ajaxcomment_post = ajaxComment.post;

※行頭の全角スペースを削除してからご利用ください。

3. フォーム内の「Preview」、「Write」ボタンを以下のコードで差し替えます。

   <div id="comments-open-footer" style="padding-left:150px;">
   <input type="submit" class="comf_bot" accesskey="v" name="preview_button" id="comment-preview" value="&nbsp;Preview&nbsp;" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('post');" />
   <input type="submit" class="comf_bot" accesskey="s" name="post" id="comment-submit" value="&nbsp;Write&nbsp;" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('prevew');" />
   </div>
   

   ※行頭の全角スペースを削除してからご利用ください。

4. 最後にブログ記事テンプレートを再構築します。

以上のことを試してみてください

>>11 mayue さん

こんばんわ^^

確認しました。
ajaxComment というのが無いよ･･･と、怒られてるようです。
prototype_com.js 内の 1 行目を以下のように var と ajaxComment の間をスペースで区切ってください。

1 行目
var ajaxComment={

ついでに以下の行においても同様に修正します。

6、7 行目
var me=this;
var pars='';
25 行目
new Ajax.Request([me.base,me.script].join(''),{
29 行目
var txt=req.responseText;

まずは上記修正で確認してみてください

>>13 mayue さん

はぁ～い ご苦労様です。
以下のコードは mayue さんのサイト専用のコードです。
コメントプレビュー／ポストできることを確認しましたので prototype_com.js の内容を差し替えてください。

var ajaxComment = {
base  : 'http://studio.verse.jp/cg/sblg/',
loader: 'mt-static/images/indicator.gif',
script: 'mt-comments.cgi',
post  : function(mode) {
ajaxComment.elem = $(this);
ajaxComment.form = $('commentsForm');
ajaxComment.open = $('comments-open');
ajaxComment.elem.innerHTML = ['<img src="', [ajaxComment.base, ajaxComment.loader].join(''), '" />'].join('');
ajaxComment.elem.setStyle({'display':'block'});
var pars = '';
if ('post' == mode) {
mtCommentOnSubmit(ajaxComment.form);
ajaxComment.form.preview.value = '';
pars = [ajaxComment.form.serialize(), '&post=post'].join('');
}
else {
ajaxComment.form.preview.value = '1';
pars = [ajaxComment.form.serialize(), '&preview=preview'].join('');
}
new Ajax.Request([ajaxComment.base, ajaxComment.script].join(''), {
method: 'post',
parameters: pars,
onSuccess: function (req) {
var txt = req.responseText;
if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) {
document.location.reload();
}
else {
if (!txt.indexOf('Error', 0)) {
ajaxComment.open.setStyle({'display':'none'});
}
ajaxComment.elem.innerHTML = txt;
}
},
onFailure: function(req) {
ajaxComment.elem.innerHTML = req.responseText;
}
});
return false;
}
};
var ajaxcomment_post = ajaxComment.post;

また、コメントフォームですが･･･すいません わたし preview と post のボタンを逆にしてしまってましたので、以下のように訂正してください。

<div id="comments-open-footer" style="padding-left:150px;">
<input type="submit" class="comf_bot" accesskey="v" name="preview_button" id="comment-preview" value="&nbsp;Preview&nbsp;" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('preview');" />
<input type="submit" class="comf_bot" accesskey="s" name="post" id="comment-submit" value="&nbsp;Write&nbsp;" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('post');" />
</div>

以上ご確認ください

>>15 mayue さん

こんばんわ^^

ajaxComment.elem = $('comment_results');

prototype と jQuery がごっちゃになっちゃいました
お手数ですがご確認お願いします

>>17 mayue さん

> MTの「Captcha」を使用するよう設定をしているのですが、今回無事に実装できたAjax化だとどうやらこれが有効になってないようなのです…

あれっ!? 確かに CAPTCHA 表示されないですね
いつからだろ･･･少しお時間いただけますか。
今週末にちょとコード解析してみます

- 追記 -

あ、ごめんなさい。
わたしのサイトではちゃんと CAPTCHA 認証できてました。
CAPTCHA 認証無効から有効にした場合、mt.js を再構築する必要があります。
mayue さんは mt.js を再構築されてますか!?

>>17 mayue さん

こんにちわ^^

先ほど mayue さんとこのテストサイトで CAPTCHA 認証の動作確認してきました。
正しく認証手続きされてるようなのですが、有効になっていない･･･というのはどういった現象なのか分かりますか!?

ちなみに CAPTCHA 認証はサインインしないユーザ用のしくみなのはご存知かと思いますが、サインインしてしまうと CAPTCHA は表示されません。
このことを言われてるわけではないですよね!?
あと、正常にコメント投稿が完了した場合、コメントフォームが隠されてないですね
prototype_com.js 内の 34 行目を以下のように変更してください。

if (0 > txt.indexOf('Error', 0)) {

ただし、上記 34 行目はテンプレートを変更した場合には注意が必要です。
'Error' というキーワードがあるかないかの判断をしてますので、mayue さんがお使いの「コメント完了」システムテンプレート内にある 'Error' というキーワードを消してしまうと、投稿完了したにも関わらずコメントフォームが表示されっぱなしという状態になります。※コメント投稿自体は完了します。

>>20 mayue さん

> せっかくなので、ご教授いただいた34行目について修正をしてみましたところ、プレビューを押下したらコメントフォームが隠されてしまいました（汗）何故でしょう…？

あちゃ
そっかぁ、Ajax によるデータ転送完了後は Preview でも Post でも同じなので、先ほどのコード( >>19 )だとそのような動作しちゃいますね。では、度々で申し訳ないのですが以下のように修正してください。

if ('post' == mode && 0 > txt.indexOf('Error', 0)) {

改めて prototype_com.js の全容を以下に記します。

var ajaxComment = {
base  : 'http://studio.verse.jp/cg/sblg/',
loader: 'mt-static/images/indicator.gif',
script: 'mt-comments.cgi',
post  : function(mode) {
ajaxComment.elem = $(this);
ajaxComment.form = $('commentsForm');
ajaxComment.open = $('comments-open');
ajaxComment.elem.innerHTML = ['<img src="', [ajaxComment.base, ajaxComment.loader].join(''), '" />'].join('');
ajaxComment.elem.setStyle({'display':'block'});
var pars = '';
if ('post' == mode) {
mtCommentOnSubmit(ajaxComment.form);
ajaxComment.form.preview.value = '';
pars = [ajaxComment.form.serialize(), '&post=post'].join('');
}
else {
ajaxComment.form.preview.value = '1';
pars = [ajaxComment.form.serialize(), '&preview=preview'].join('');
}
new Ajax.Request([ajaxComment.base, ajaxComment.script].join(''), {
method: 'post',
parameters: pars,
onSuccess: function (req) {
var txt = req.responseText;
if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) {
document.location.reload();
}
else {
if ('post' == mode && 0 > txt.indexOf('Error', 0)) {
ajaxComment.open.setStyle({'display':'none'});
}
ajaxComment.elem.innerHTML = txt;
}
},
onFailure: function(req) {
ajaxComment.elem.innerHTML = req.responseText;
}
});
return false;
}
};
var ajaxcomment_post = ajaxComment.post;