AJAX→PHP -DB(MySQL)- PHP→AJAXのフローについて

質問

Yahoo! User Interface の DataTable Control を使った編集可能なリスト作成を考えています。
しかし、Ajaxでの入力値のPHPへの投げ方、また、DBから受け取った値をAjax（DataTable Control）で表示させる方法とも、やり方が全くわかりません…。
（Jasonという形式に成型して出力させる？？）

YUIを使用して外部テキストファイルを表示してみたりアニメーションを動かしてみたり、Ajax初心者なりに1ヶ月ぐらい試みてみましたが、DataTable Controlについては今のところ全く成果なしで困り果てています…。

どなたか勘所のある方、ご教示頂けませんでしょうか？
宜しくお願いします。
http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html

回答No.3

oka5130

すみません、Inlineで編集できることは知りませんでした。

セルをクリックした時に入力欄が表示されますが、それはinputタグです。
firebugで確認してみると、クリック時にbodyタグの直下にinputタグが生成されています。
なので、データの編集にinputタグを使っていないわけではありません。

サンプルでは、データを編集して「OK」ボタンを押すとテーブルが更新されますが、
この時に非同期通信でPHPにデータを送信してMySQLのデータを更新してやれば良いと思います。

yuiのdatatable-beta.jsを見てみると、「OK」ボタンをクリックした時に
editorSaveEvent というイベントが発生するようになっているので、
次のようにイベントハンドラを追加します。
（ここでは、サンプルのコードで使われている変数名を使います。）

this.myDataTable.subscribe("editorSaveEvent", updateDataSource);

updateDataSource関数は自分で作った関数で、この中に非同期通信の処理を記述します。

function updateDataSource(oArgs) {
// 編集後の値はoArgs.newDataに格納されています
// 編集したセルの列名はoArgs.editor.column.getKey()で取得できます
// 編集したセルのレコードの各値はoArgs.editor.record.getData()で取得できます（MySQLのデータを更新するのに必要になってくると思います）
// POSTで送信するデータをqueryに入れて…
YAHOO.util.Connect.asyncRequest( "POST", url, callback, query );
}

順序が逆になってしまいましたが、PHPからデータを取得して表示させる方法は下記のページを参考にしてみてください。
http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson_clean.html
ご存知かもしれませんが、PHPでJSONを生成するにはjson_encode()関数が便利です。

ここではJavaScriptのコードをあまり書きませんでしたが、
簡単なものだと40行ぐらいで書けたので、オブジェクトの中身を
firebugで根気強くデバッグしながらいろいろ書いて試してみてください。

お礼

お返事遅くなりすいません。
お陰さまで値を取ることができました。
ただ実は一括で値をPOST送信する方法を模索しています。
こちらでだいぶヒントは頂いたので、具体的になりましたらまた質問させていただこうと思います。
有難うございました。

回答No.2

oka5130

inputタグがない、というのがいまいちよくわからないのですが…。
inputタグを使わずに（selectやtextareaも使わず）どのようにデータを編集しようとお考えですか？

connectionを使うと、Ajaxを使わない通常のフォームでデータを送信するのと同じように、
フォームのデータを簡単にPHPに送信することができます。

<form id="form1">
<input type="text" name="text1" />
<input type="button" value="送信" onclick="formSubmit(this.form);" />
</form>
<script type="text/javascript"><!--
function formSubmit( form ) {
YAHOO.util.Connect.setForm( form );
YAHOO.util.Connect.asyncRequest( 'POST', 'http://～', callback );
}
//--></script>

PHPからデータを受け取る処理は、callbackのsuccessに指定した関数で行います。
詳しくはこちらをご覧ください。
http://developer.yahoo.com/yui/connection/#forms

補足

度々すいません。有難うございます。

>inputタグを使わずに（selectやtextareaも使わず）どのようにデータを編集しようとお考えですか？

実際にDataTable:Inline Cell Editingを見ていただくと分かると思うのですが、このパッケージのオブジェクトを使用して編集させているようです。http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html

今回の趣旨は、そのオブジェクト内で編集された値を取得し、phpに渡せるようにしたいということです。
でも、ソースを見るとHTMLタグはdivタグぐらいしか見当たりません。。
表示自体は<div id="cellediting"></div>内に表示させているようですが、それを<form id="cellediting"></form>と変えただけでは上手くいきませんでした。
ちなみに、過去に作ったソースを見直したら、アニメーションさせるBOX内に外部テキストを読み込ませていたので、connectionは使っていました。
しかしここでも高さなどを指定するのにformタグを使用しています。

このオブジェクトテーブル内の値さえ取れれば大丈夫だと思うのですが…。

回答No.1

oka5130

YUIでAjaxでしたらconnectionですね。
いきなりDataTableにAjaxを組み合わせるのは難しいと思うので、
まずはconnectionを使えるようになる必要があります。

HTTP通信や非同期通信の仕組み、JSON（XMLでもいいですが）の構造、
フォームからPHPへのデータ受け渡しなどを勉強して、
connectionが使えるようになってからDataTableと組み合わせてみてはいかがでしょうか。

YUIで外部テキストファイルの表示やアニメーションができただけでは、
まだまだ知識が不十分だと思います。
まずはJavaScript、PHP、通信の基礎からですね。

補足

かれこれ5年やっているのでPHPのHTTP通信で値をやり取りする手法は知っています。
しかし、JavaScriptで記憶してるのはかなり過去の簡単なものです。
私が知っている手法だとinputタグがないのでdocument.form.element.option.valueなどで値を取って任意phpファイルにsubmit()することができません。
ですので、例によってこのパッケージ特有の値をとる関数でもあるのでしょうかという質問でした。
値の読み込みはXMLでもJSONでも、型が定まりさえすればその型になるようPHPでファイル生成したのち、そこから読み込みできるので問題ありませんが、それ以外でパッケージ側で用意した手法があるのでしょうかという意味です。
inputタグがなくても、万事connectionパッケージで値が取れ、submit可能なのでしょうか。
ご存知でしたらお願いします。