AJAX

jQueryをペチペチと勉強していますが、ちょっと詰まってしまいました。 以下のような動作をするサンプルプログラムを探しています。 「ラジオボタンを押下すると、それに対応するテーブルのtr要素の背景色を変更する。」 ==========ソースここから========== <table border ="1"> <tr id ="0" class ="table_1"> <td>hoge1</td><td>hoge1</td><td>hoge1</td> </tr> <tr id ="1" class ="table_1"> <td>hoge2</td><td>hoge2</td><td>hoge2</td> </tr> <tr id ="2" class ="table_1"> <td>hoge3</td><td>hoge3</td><td>hoge3</td> </tr> </table> <table border ="1"> <tr> <td><input type ="radio" name ="radio_hoge" value ="100" id ="0" class ="radio_1"></td><td>hoge1</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="200" id ="1" class ="radio_1"></td><td>hoge2</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="300" id ="2" class ="radio_1"></td><td>hoge3</td> </tr> ==========ソースここまで========== HTMLの構成はこんな感じにしてあります。 下側のテーブル内のラジオボタンを押下すると、上側のテーブルのtrの背景色を変更したいのですが、指定の方法が分からず悩んでいます。 （trとradioは、同一「id」値と対応する。ものとしたい。 現状、他に実現してある内容は ・tr行にマウスオーバーすると、trの色を変える ・tr行をクリックすると、trの色を変えて保持する ・tr行をクリックすると、対応するラジオボタンを選択する です。 コレに、 ・ラジオボタンを選択すると、対応するtr行の色を変える を追加したく思っています。 当面の問題は、tr(のid？)に対して「this」以外で指定を行う方法が分からない。 ということかと思っています。 コレ(trに対してthis以外で指定)が分かれば、もう一つやろうとしてる、tr行でクリックした以外のtr行の色を初期色に戻す。 あたりも解決すると思っているので、ご存じの方がいましたら、教えていただけると助かりますm(_ _)m 以下は、現状実現してある内容～の参考にしたサイトです。 >>・tr行にマウスオーバーすると、trの色を変える http://1bit.mobi/20120313111043.html >>・tr行をクリックすると、trの色を変えて保持する http://ponk.jp/jquery/basic/state_save の「４」番目 >>・tr行をクリックすると、対応するラジオボタンを選択する http://www.tohoho-web.com/lng/199912/99120188.htm よろしくお願いします。

いつもお世話になっています。 只今jQueryを勉強中なのですがチェックボックスの制御が上手くできずに困っています。 <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <input type="checkbox" id="list1" name="example" value="">リスト1 <input type="checkbox" id="list2" name="example" value="">リスト2 <input type="checkbox" id="list3" name="example" value="">リスト3 リスト１をクリックした時はチェックボックス１にチェックが入り他のチェックが外れる リスト2をクリックした時はチェックボックス2にチェックが入り他のチェックが外れる この様な処理ができるようにしたいのですが jqueryでこちらを再現することができるのでしょうか？ もしよろしければどなたかご教示ください。

質問します。 ライトボックスのような画像ギャラリーで、一枚の画像をクリックすると、複数の画像が出てきて、そういうグループを複数設置したいのですが、ピッタリのプラグインありますか？ 画面にはA、B画像があり、Aをクリックするとa01.jpg、a02.jpg、a03.jpg……とライトボックスのように表示され、ESCAPEを押して最初の画面に戻り、Bの画像を押すとb01.jpg、b02.jpg、b03.jpg……というふうに表示したいです。

困っているので教えて下さい。 最終的にはiOSとAndroid用にアプリにする予定になっておりますが、 jQueryMobileで作成し、現段階では動作や表示確認のためサーバにアップして確認しています。（aの#リンクがオフラインでは確認できないため） アプリにしたことがないので、わからないのですが、サーバで確認したところ、キャッシュが残ってしまっているようで、更新前のページが表示され、毎回リロードしないと、最新の状況が表示されず困っています。 $.mobile.page.prototype.options.domCache = false と、false設定になっていますが、それでもダメだし、各ページに別途、キャッシュを削除するようなタグを入れたりしても、やはりダメみたいです。 /* clear cache page */ $(document).on('pagehide', function(event, ui) { var page = $(event.target); page.remove(); }); ↑こういったタグです。 あまり難しいことはわからないのですが、いつも最新の状況が表示されるような方法はありませんでしょうか？ また、もしアプリ化した場合、こういったキャッシュ機能っていうのは、アプリの仕様に問題ありますか？もし関係ないようなら、このままアプリ化しようと思いますが・・・。 アプリだけでなく、WEBにも載せておきたいと思っているのですが、完成した状態で公開すれば、見て下さった方は最新の状態でキャッシュされるのでしょうが、更新した時等に最新の状態で見られないというのは問題だと思いまして、困っておりました。 よろしくご指導のほど、お願いいたします。

jQuery Mobileでサイトを構築しようとしています。 jQuery Mobileの場合、ひとつのindex.phpに全てのページを書きいれ、a href=#13　a href=#453などのようにして飛ばす仕組みになっています。 例えば500ページのサイトになると、index.phpがMB単位になってしまい、これでは、重くてトップページの読み込みが鈍重になってしまうと考えます。 このような場合、やはり、 *data-ajax=“false” ,などを使って通常のHTMLのように複数にページ立てするのが適切なのでしょうか? それとも、jQuery Mobileの場合、「読み込みが#ページ単位になっているため、ページ数が500ページあったとしても各ページは軽い」というようなことがあるのでしょうか? 宜しくお願い致します。

http://www.html5.jp/library/cpick.html にあるcpick.jsを使用して $(function(){ function hoge(){ alert('hoge'); } }); 上記のようなhoge()を実行させたいのですが、 やり方が分からず困っております。 http://d.hatena.ne.jp/tohokuaiki/20101122/1290427583 ↑こちらも参考にしたのですが、素のfunctionは動作しましたが、 jquery内のfunctionを呼ぶ方法が分かりませんでした。 どなたかご教授ください。

http://okwave.jp/qa/q7574571.html でもご質問させていただきましたが、ajaxを使用してphpファイルに記述のあるmysql insert文でデータベースの登録はできました。 bbs.php <table class="commentlist"> <!-- bbs.inc.phpファイルという別ファイルでfor文で一覧を出している。 --> </table> <!-- ここからがコメントの入力 --> <form method="post"> <input type="text" name="comment" id="comment" value="" /> <input type="button" name="save" id="save" value="投稿" /> </form> $("#save").click(function(){ var p = $("#comment").val(); $("#comment").val(""); $.post( "bbs.php", { request:p, success: (ここがわからない。)}); }); としたときにフォームでpostしたときにページ全体にリロードではなくclass="commentlist"の一覧のみリロードしたいのですが、どうもできません。 どなたかご教示お願いします。 (bbs.inc.phpはソース内には残したくないです。)

dropkick.jsを利用して セレクトボックスを美しくデザインしたいんですが http://github.com/jamielottering IEでは、プルダウンのスクロールバーを 掴むことができません とても不便です。 どこをイジれば 修正できますでしょうか？？ それと、ダウロードしたフォルダには ライセンスと言ったファイルがあったんですが これはUPロードする必要はありますか？ どう利用すれば？？

jQueryの処理を高速にするため、スクリプトを現在、見直しています。 すみませんが、またまた質問させてください。 HTML側にふられている変数(var page;)の値を取得し その変数によって、bodyに別々のclassを追加したいと思っています。 HTMLは数ページあり、それぞれ異なる値です。 $(function(){ if(page.indexOf("あああ")!=-1){ $("body").addClass("aaa"); }else if(page.indexOf("かかか")!=-1){ $("body").addClass("kkk"); }else if(page.indexOf("さささ")!=-1){ $("body").addClass("sss"); } }); 上記のようにやっているのですが、 if文より、switch文でやったら早いかなぁと思いいろいろ試しています。 ですが、indexOfで取得しているように、var pageで取得したい文字は一部分なのです。 ↓こんな感じです。 var page = "あああいいい"; var page = "かかかききき"; var page = "さささししし"; なので、switch文のcaseに置く定数式に、ぴったり当てはまる文字列ではないのです。 以下の例は3つの条件ですが、 実際は10ページ近くあるので、それをすべてif文で書くのはスマートでない気がします。 そもそも、こういった場合はif文を使うしかないのでしょうか？ switch文でなくても、他のやり方でも、 何か早く処理できる方法がありましたら教えてください。 宜しくお願いいたします。

ASP.NETのフォーカス移動処理は PHPとAjaxでも出来ますか。

ページ上にテキストボックスやセレクトボックスがたくさんあります。 セレクトボックスAで選択した値に基づいて、セレクトボックスBやテキストボックスに一つの値を表示しています（セレクトボックスは選択不可状態になる）。 セレクトボックスAで選択しないときは、セレクトボックスBには予め選択肢が入っています。 セレクトボックスAで選択して、セレクトボックスBにデータを表示した後、 リセットボタンを押したらセレクトボックスBは初期状態の予め選択肢が入っている状態に戻したいです。 そして、セレクトボックスCには、別の選択肢を入れ直したいです。 このようなセレクトボックス、テキストボックスともに何十個もあるので、出来たら一括で初期状態に戻し、その後、セレクトボックスの選択肢の変更などのAjax加工をしたいと思っています。 ページのツールバーのページ更新ボタンを押すと、ページがリロードされて、初期化されるので、 window.location.reload(); と設定した後、さらにAjaxでセレクトボックスなどの変更をするプログラムを組んだのですが、 window.location.reload(); この後の処理が動いてくれません。 ページをリロードすると、その後の処理が無効？になってしまうのでしょうか。 一つずつセレクトボックスやテキストボックスのデータを削除して、さらに値をセットしてというのが効率が悪い気がして、 ページリロードのように、ページを初期化した後、必要なセレクトボックスやテキストボックスだけAjax処理をしたいなあと思うのですが、どのようにするのがいいのでしょうか。 効率のいいやり方をご存じの方がいらっしゃいましたらぜひ教えてください。 分かりづらいと思いますので、分からない点はご質問頂けたらと思います。 よろしくお願いいたします。

HTMLページ内に、Formタグがいくつかあって、その中にテキストボックスが一つずつ配置されています。 ページをロードしたときに、そのテキストボックスのnameを取得してそのnameに基づいた処理をしたいと思っています。 Fromタグはページ内にいくつあるか決まっていません。 nameも取得しないとどういうnameがあるか分からない状態です。 name取得が出来るのかが分からないのですが、ここ数日ずっとネットで検索していたのですが見つからず、取得方法がご存じの方、教えて頂けませんでしょうか。 よろしくお願いいたします。

Ajaxで画像を削除しようといろいろ試行錯誤しているのですが、 最終的なところで詰まっています。 $(function(){ $("input:button").click(function(){ //クリックされた画像のidを取得 var id = $(this).attr("id"); 　　alert(id); //削除ボタンの無効化 $(this).attr("disabled",true); //idをサーバに送信（PHP側で削除処理）して結果を受け取る $.ajax({ url : "/test/delete_image", dataType : "json", data : {id:id}, type : "post", success : function(data){ if(data.id){ alert(data.id); $("#tblh img#image"+data.id).attr("src","/images/noimage.gif"); } }, error : function(){ alert("通信に失敗しました。"); } }); }); }); codeigniterというフレームワークを利用しPHP側では画像をディレクトリから削除しています。(こちらの動作は問題なし) <?php class Delete_image extends CI_Controller { function __construct(){ // Model クラスのコンストラクタを呼び出す parent::__construct(); $this->load->model('array_constant'); $this->load->helper(array('form', 'url')); $this->load->library('form_validation'); $this->load->library('form_ex'); } function index(){ if(!$this->input->post("id")){ return false; }else{ 　　　　　　　　　　　//画像の削除とDBの画像名称を更新 $arr = array('id' => $this->input->post("id")); } echo json_encode($arr); } } としています。 画像の削除とDBの画像名称は更新されてるのでPHP側は問題ないようです。 jsonの値を受け取って画像を置き換えようとしているのですが、エラー側のほうに 判断されてしまいます。「alert("通信に失敗しました。");」となります。 なぜか分からず困っています。 教えてください。

tableで一覧に画像が20個あります。 画像の横に「削除」ボタンがあります。 それぞれにidが振ってあり、そのボタンを押すと該当の画像が削除されて、 noimage.jpgに切り替えたいです。 PHPの部分で画像の削除の処理はできているのですが、 Ajaxの部分がよくわかりません。(パラメータの受け渡し、画像の戻し方) 詳しい方、教えていただけるでしょうか。 よろしくお願いいたします。

Ajaxで使用するXMLHttpRequestをローカルサーバーで構築したいと考えています。 比較的簡単にできメジャーな方法を　教えてください。 下記サイトのサンプルなどを試したいと考えています。 AjaxTower　　Ajax入門 http://www.ajaxtower.jp/ini/ Ajaxを勉強しよう http://www.openspc2.org/JavaScript/Ajax/Ajax_study/

検索エンジンは、ajaxが使われたコンテンツを動的に取得できないためSEOで不利になってしまいます。その対策についてアドバイスをいただきたいです。 http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=174992 では、ajaxが使われたページ限定でそのURLに#!を入れるか、<head>内に<meta name="fragment" content="!">を入れるだけで解決します、と書いてあります。 mein.htmlがあって、メインのコンテンツはcontents.phpにまとまっています。 contents.phpを検索エンジンによくみてもらいたいです。 urlに#!という文字を入れたくないので、後者の方を使おうと思っていますが、 mein.htmlの<head>に<meta name="fragment" content="!">を入れて、 contents.phpには入れない。↓のような感じでいいということですか？ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"　/> <meta http-equiv="Content-Script-Type" content="text/javascript"　/> <meta name="fragment" content="!"　/>←「　/をつける」 <title></title> </head> <body> <p onclick="send()">コンテンツの取得</p> <div id="ajaxcontents"></div> <script type="text/javascript"> function send(){ xmlhttpreq = ～～～; xmlhttpreq.onreadystatechange = function (){ if (change.readyState == 4 && change.status == 200) { var con = xmlhttpreq.responseText; document.getElementById("ajaxcontents").innerHTML = con; } }; xmlhttpreq.open("GET", "contents.php?get=", true); xmlhttpreq.send(null); } </script> </body> </html>

http://itpro.nikkeibp.co.jp/article/COLUMN/20060525/239029/?ST=develop このページではajaxを使ってhtmlファイルにphpファイルを読み込ませるサンプルが紹介されていますが、このサンプルを実際にブラウザで表示した後にctrl+Uで開くソースコードでは↓のようになっています。 <body> <form name="fm"> ISBNコード： <input type="text" name="isbn" size="30" /> <input type="button" value="送信" onclick="send()" /> <div id="result"></div> </form> </body> 読み込み側のphpファイルの内容も↓のようにソースコードに表示させたいです。 <body> <form name="fm"> ISBNコード： <input type="text" name="isbn" size="30" />4-7981-1070-1 <input type="button" value="送信" onclick="send()" /> <div id="result">XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！</div> </form> </body>

http://itpro.nikkeibp.co.jp/article/COLUMN/20060525/239029/?ST=develop こちらの記事のサンプルをコピーして試してみたのですが、画像添付のようにページ全体のコピー？が追加されてしまいます。なぜ記事通りにいかず、このような結果になってしまうのでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>書籍検索</title> <script language="JavaScript"> <!-- // ［送信］ボタンをクリック時の処理を定義 function send() { // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成 try { xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlReq = new XMLHttpRequest(); } // サーバーからの応答時の処理を定義（結果のページへの反映） xmlReq.onreadystatechange = function() { var msg = document.getElementById("result"); if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { msg.innerHTML = xmlReq.responseText; } else { msg.innerHTML = "通信に失敗しました。"; } } else { msg.innerHTML = "通信中…"; } } // サーバーとの通信を開始 xmlReq.open("GET","2.php?isbn=" + encodeURI(document.fm.isbn.value),true); xmlReq.send(null); } //--> </script> </head> <body> <form name="fm"> ISBNコード： <input type="text" name="isbn" size="30" /> <input type="button" value="送信" onclick="send()" /> <div id="result" /> </form> <?php // 出力／内部文字コードをUTF-8に設定 mb_http_output('UTF-8'); mb_internal_encoding('UTF-8'); /* 入力されたISBNコードをキーに対応する書名（$result）を取得。 通常のアプリケーションでは、ここでデータベースへの検索処理などを行う */ switch($_GET['isbn']){ case '4-7981-1070-1' : $result='XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！'; break; case '4-88337-491-2' : $result='書き込み式 SQLのドリル?ドンドン身に付く、スラスラ書ける'; break; case '4-7980-1270-X' : $result='Pocket詳解PHP辞典'; break; default : $result='不明'; } sleep(3); // 3秒休止（待ち時間を体感するためのダミー） print($result); // 取得した結果を出力 ?> </body> </html>

通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。 分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。 下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。 ■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。 　例えば、↓の<div#ajax>～</div>この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。 ■cssは、htmlと同じで、その部分で使われているcssが対象。 ■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。 ■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。 <?php ・includeで外部ファイルを取得 ・様々な処理 ・mysqlに接続して様々な処理 ?> <html> <head> <script type="text/javascript" src="外部ファイルでajaxを記述"></script> <title></title> </head> <body> <?php ・様々な処理 ?> <div id="main"> 　<div id="a"> 　　　<dl>～</dl> 　</div> 　<div id="ajax" onclick="ajaxの処理へ"> 　　　<table>～</table> 　　　<ul>～</ul> 　　　その他様々な処理 　</div> 　<p>～</p> 　<img src=""> </div> <script type="text/javascript"> </script> </body> </html>

今、JAVAとPHPを学習しているのですが最近１つにした方がいいと言われました。 自分としては２つ使えた方が就職に有利と思うのですが、どうした方が良いですか？アドバイス下さい。よろしくお願いします。