Yahoo! User Interface の DataTable Control を使った編集可能なリスト作成を考えています。
しかし、Ajaxでの入力値のPHPへの投げ方、また、DBから受け取った値をAjax(DataTable Control)で表示させる方法とも、やり方が全くわかりません…。
(Jasonという形式に成型して出力させる??)
YUIを使用して外部テキストファイルを表示してみたりアニメーションを動かしてみたり、Ajax初心者なりに1ヶ月ぐらい試みてみましたが、DataTable Controlについては今のところ全く成果なしで困り果てています…。
どなたか勘所のある方、ご教示頂けませんでしょうか?
宜しくお願いします。
http://developer.yahoo.com/yui/examples/datatabl …
No.3ベストアンサー
- 回答日時:
すみません、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/datatabl …
ご存知かもしれませんが、PHPでJSONを生成するにはjson_encode()関数が便利です。
ここではJavaScriptのコードをあまり書きませんでしたが、
簡単なものだと40行ぐらいで書けたので、オブジェクトの中身を
firebugで根気強くデバッグしながらいろいろ書いて試してみてください。
お返事遅くなりすいません。
お陰さまで値を取ることができました。
ただ実は一括で値をPOST送信する方法を模索しています。
こちらでだいぶヒントは頂いたので、具体的になりましたらまた質問させていただこうと思います。
有難うございました。
No.2
- 回答日時:
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/datatabl …
今回の趣旨は、そのオブジェクト内で編集された値を取得し、phpに渡せるようにしたいということです。
でも、ソースを見るとHTMLタグはdivタグぐらいしか見当たりません。。
表示自体は<div id="cellediting"></div>内に表示させているようですが、それを<form id="cellediting"></form>と変えただけでは上手くいきませんでした。
ちなみに、過去に作ったソースを見直したら、アニメーションさせるBOX内に外部テキストを読み込ませていたので、connectionは使っていました。
しかしここでも高さなどを指定するのにformタグを使用しています。
このオブジェクトテーブル内の値さえ取れれば大丈夫だと思うのですが…。
No.1
- 回答日時:
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可能なのでしょうか。
ご存知でしたらお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「戻る」ボタン使用時のフォー...
-
フォームバリデーションする際...
-
JavaScriptで ブラウザの閉じる...
-
contenteditableで編集した内容...
-
PDFフォームで条件つき金額を表...
-
csvファイルを読み込み、該当項...
-
GoTo文とかSelect文の処理の仕...
-
ローカルのレジストリを読みたい
-
gas 全角数字を半角数字に変換
-
Excel vba 配列内の最大値を求...
-
「終了していない文字列型の定...
-
javascriptで「オブジェクトを...
-
JSPの処理の途中で、JavaScript...
-
VBScriptでのforms[0]など配列...
-
正整数の半角数字かどうか判定する
-
jQuery ui Datepicker 明日以降...
-
ページ横スクロールでjQuery li...
-
javascriptでsjisの文字列からu...
-
初心者です。gulpでコンパイル...
-
1つのVBAコードをすべてのコア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
「戻る」ボタン使用時のフォー...
-
javascript中の記述でのJSP文<%%>
-
親フォームとサブフォームでの...
-
Onclickイベントでデータをcgi...
-
画面遷移させずにCGIの戻り値を...
-
javascript・JSP関連
-
連動プルダウンについてです。
-
JavaScriptで月に対して日の整...
-
必要時だけ必須記入にする方法
-
助けてください!スパムメール...
-
javascript 選択した値のみを送...
-
PHP処理実行後のページの遷移に...
-
自動計算見積プログラム(javas...
-
Jquery を使った住所情報の自...
-
画面遷移を無くすためajaxでメ...
-
現在日付を初期値にするには
-
javascript外部ファイルから読...
-
javascriptからpythonへ値の受...
-
Ajax以外で、JavaScriptからPHP...
-
毎週決まった曜日から数日間だ...
おすすめ情報