AJAX
- javascriptでJSONデータの生成方法
現在PerlのフレームワークであるMojoliciousとJavascriptのjQueryを使ってAjaxを利用したアプリケーションを作ろうとしているのですが、クライアント側で、サーバに送信するためのJSON形式のデータがうまく作れません。 例えば、ブラウザ上の表のセルをダブルクリックしたときにそのデータを書き換えられるようにし、その更新データをJSONでサーバ側に送りたいのですが、 <table> <tr><th>name</th><th>email</th></tr> <tr><td class="name">山田</td><td class="email">yamada**@gmail.com</td></tr> </table> とある表のセルの山田のアドレスをyamada**@gmail.com -> yamada**@yahoo.co.jpと変更した場合、javascript(jQuery)で次のようなJSONデータを作りたいです。 { "email" : "yamada**@yahoo.co.jp"} 左側のemailは動的にセルのclass属性から取得したいのですが、方法が分かりません。 実際にはemail以外にも多数の列がありますので、なるべく動的にclass属性を取得したいのですが、良いJSONの生成方法やJSONを用いた他のデータ構造があれば教えていただきたいです。
- 締切済み
- bicycle1885
- AJAX
- 回答数4
- 【PHP＋lightbox2】 キャプション自動化
WEBサイトの仕組みにあまり強くない方のWEBサイト制作を依頼されており、できるだけ更新を楽にできるようなサイトを制作しています。 作品展示のためのサイトなので、更新内容は作品画像とそれに伴うちょっとした説明文のみということで、 http://potapota.akinetworks.com/?eid=426167 ↑こちらのサイトの 『アップローダーで上げた画像をフォルダ指定してlightboxでまとめてギャラリー化する』 という仕組みを使おうと考えているのですが、 拡大画像が表示された時に画像の下部に出るキャプション（上のサイトでは画像ファイルの名前が表示されています）を画像と同じように、 ひとつのフォルダにテキストデータなどの形式で保存し、 PHPでそのフォルダを指定して、画像一つ一つにテキストを設定すること無く画像キャプションとして表示するには上のサイトのソースをどのように編集すれば良いでしょうか？ テキストデータをアップロードする際は上のサイトのようなアップローダーを使用できなくても構いません。 どなたかご助言頂けたら幸いです。
- 締切済み
- nyancoropon
- AJAX
- 回答数2
- カンマ&日本語を含むCSVを配列に読み込む方法
こんばんは。 このカテゴリでよいのかわかりませんが、質問させてください。 "item","price" "バッグ","30,000" "シューズ","12,800" こんな感じでカンマ入りの金額データや日本語を含むCSVを２次元の配列に読み込んで、CSSなどを付与してホームページを作りたいと考えています。 検索してサンプルやライブラリを探しているのですが、文字コードをいろいろ変えても日本語だと文字化けしてしまうものや、見つけてもコンマ付きデータに対応していなかったりします。近いものを見つけて改良しようにも、Javascriptやajax初心者なので、どこをいじるのが適切なのか判断がつかず四苦八苦しております。 一応、Flash ActionscriptやVBでのプログラミングは一通りできるのでJavascriptも本腰をいれればできるはずなのですが、時間が限られておりまして基礎が曖昧なままリファレンス本を片手に挑戦している次第です。 すみませんが、僕の希望に合うサンプルや紹介しているURLまたはライブラリをご存知でしたら教えて頂けないでしょうか。全く同じでなくても、多少は自分で工夫するつもりです。 何卒よろしくお願い致します。
- アコーディオンメニューについて
jQueryを使ったアコーディオンメニューを作成しているのですが、 <dt>をクリックすると<dd>部分に外部のテキストファイルを表示させる方法がわかりません。 以下の記述に何を付け足せば良いのですか？ $(function(){ $("dd:not(:first)").css("display","none") $("dt:first").addClass("selected"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); $("dt").removeClass("selected"); $(this).addClass("selected"); } }).mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) }) <dl> <dt>Step.1</dt> <dd><p>Lorem ...（中略）... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...（中略）... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...（中略）... imperdiet. </p></dd> </dl>
- 締切済み
- not-at-all-97
- AJAX
- 回答数1
- アコーディオンメニューの最初に開く場所について
こちらのサイト http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-simple-accordion.html で紹介されているアコーディオンメニューを使用しているのですが アクセス時に自動で開く場所の変更を行う場合 どの様に変更をしていいのかわかりません。 //Set default open/close settings $('.acc_container').hide(); //Hide/close all containers $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container おそらくこの部分ではと思うのですがどうにもうまくいきません。 ご教授お願いいたします。
- ランダムなフェードインを作りたいです。
jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>
- ベストアンサー
- tekkenman7
- AJAX
- 回答数1
- AjaxZip3.zip2addr IE8でエラー
AjaxZip3の郵便番号からの住所検索を行うために 『株式会社人気組』(http://code.google.com/p/ajaxzip3/)を利用していますが、 複数の設定を行うとIE8で1つ目は問題ないのですが２つ目から 下記の様なエラーが出て困っています。 Safari、Firefox、Google Chromeは、大丈夫です。 何がいけないのでしょう？ ツールーインターネットオプションー詳細設定ースクリプトのデバッグを使用しないのチェックを外す IE8のスクリプトエラーの通知の表示結果 ---- Web ページ エラーの詳細 ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; YTB730; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 1.1.4322; .NET4.0C; .NET CLR 3.0.30729; .NET4.0E) タイムスタンプ: Thu, 17 Mar 2011 02:02:45 UTC メッセージ: ']' がありません。 ライン: 1 文字: 57 コード: 0 URI: https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata/zip-150.js ---- ソースコードの例 zip2addr.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <head><title>〒－住所</title></head><body> <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script> <form> 郵便番号：<input type="text" name="zip11" size="4" maxlength="3"> － <input type="text" name="zip12" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip11','zip12','pref11','addr11','strt11');"><br /> 都道府県：<input type="text" name="pref11" size="40"><br /> 市町村区：<input type="text" name="addr11" size="40"><br /> 以降の住所：<input type="text" name="strt11" size="40"><br /> </form> <form> 郵便番号：<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');"><br /> 都道府県：<input type="text" name="pref21" size="40"><br /> 市町村区：<input type="text" name="addr21" size="40"><br /> 以降の住所：<input type="text" name="strt21" size="40"><br /> </form></body></html> 本当は、4つまであるのですが、入りませんでした。 この2つでも２つ目でエラー出ます。
- jQuery 並列load処理
jQueryで、ページを構成する要素を並列で取得しようと考えています。 「/samples/heavy_function_parts1」 「/samples/heavy_function_parts2」 「/samples/heavy_function_parts3」 「/samples/heavy_function_parts4」 「/samples/heavy_function_parts5」 はそれぞれ、sleepして5秒後に現在時刻を返す処理となります。 下記のようなコードを書くと、div「Info5」が更新されるのが、ページ表示後 25秒後となります。 5秒後にすべての情報の更新が完了することを期待しているのですが、 どのように修正すべきでしょうか？ ※FirefoxのLive HTTP headersを使ってログを取得してみると、リクエストは 同時に一つしか行われていない（リクエストが完了してから次のリクエストが 行われている）ようです。もしかしてWebブラウザの仕様だったりしますでしょうか？ <script type="text/javascript"> $(function(){ $("#Info1").load("/samples/heavy_function_parts1"); $("#Info2").load("/samples/heavy_function_parts2"); $("#Info3").load("/samples/heavy_function_parts3"); $("#Info4").load("/samples/heavy_function_parts4"); $("#Info5").load("/samples/heavy_function_parts5"); }); </script> <div id="Info1">情報1</div> <div id="Info2">情報2</div> <div id="Info3">情報3</div> <div id="Info4">情報4</div> <div id="Info5">情報5</div>
- ベストアンサー
- noname#129301
- AJAX
- 回答数3
- jQuery 並列load処理
jQueryで、ページを構成する要素を並列で取得しようと考えています。 「/samples/heavy_function_parts」は5秒後に現在時刻を返す処理です。 下記のようなコードを書くと、div「Info5」が更新されるのが、ページ表示後 25秒後となります。 5秒後にすべての情報の更新が完了することを期待しているのですが、 どのように修正すべきでしょうか？ <script type="text/javascript"> $(function(){ $("#Info1").load("/samples/heavy_function_parts"); $("#Info2").load("/samples/heavy_function_parts"); $("#Info3").load("/samples/heavy_function_parts"); $("#Info4").load("/samples/heavy_function_parts"); $("#Info5").load("/samples/heavy_function_parts"); }); </script> <div id="Info1">情報1</div> <div id="Info2">情報2</div> <div id="Info3">情報3</div> <div id="Info4">情報4</div> <div id="Info5">情報5</div>
- ベストアンサー
- noname#129301
- AJAX
- 回答数2
- 画面移遷なしで画像アップロード＆サムネイル表示
画像をアップロードするフォームで、 アップロードする画像を選択→画面移遷なしでアップロード→サムネイルを動的表示 というようにしたいのですが、うまくいきません。 以下のjQueryプラグインが希望の動作に近そうなのですが、詳しい設置方法がわかりません。 http://www.ideaxidea.com/archives/2010/03/ajax_upload.html とりあえず、サンプルにならって、jQueryとajaxupload.jsを読み込んで、以下のように設置してみましたがサムネイルが表示されません。 アドバイスをいただけると助かります。 ヘッダーに↓ <script type="text/javascript"> $(document).ready(function(){ var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('action'), name: 'image', onSubmit: function(file, extension) { $('div.preview').addClass('loading'); }, onComplete: function(file, response) { thumb.load(function(){ $('div.preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src', response); } }); }); </script> bodyに↓ <h2>New Hotness</h2> <div class="column-row"> <div class="seven columns"> <div class="preview"> <img id="thumb" width="100px" height="100px" src="/img/hoge.png" /> </div> <span class="wrap hotness"> <form id="newHotnessForm" action="/post.php"> <label>Upload a Picture of Yourself</label> <input type="file" id="imageUpload" size="20" /> <button type="submit" class="button">Save</button> </form> </span> </div> </div>
- jQuery.getの引数dataで動的にするには
お世話になります。 jQuery.get()の第二引数dataによって、動的にJSONを取得したいです。 第一引数urlがhttp://test.com 第二引数が{id:1,name:tanaka}としてgetした場合 http://text.com?id=1&name=tanaka とリクエストしてると考えてよいのでしょうか。 ある大手サイトでget()時、dataによって取得できるJSONが違うのですが、 そのURLの最後に拡張子がありません。 JSONは拡張子が無くても良いというのを知りましたが これはJSONの形式でそのように動的に発行しているのでしょうか。 もしくはサーブレットあたりが動いて動的にさせてるのでしょうか。 たぶんPHPとかではないですよね。 上の例でいくと http://text.com?id=2 http://text.com?id=5 http://text.com?id=15 これで取得できるのが違います。 どうなってるのかさっぱり判りません。 すみません、よろしくお願いいたします。
- FullCalendar の複数月表示について
FullCalendarを使って、複数月分を一度に同じページで表示したいです。 http://arshaw.com/fullcalendar/ このサイトにあるものを使わせてもらっています。 カレンダー表示すれば、一ヶ月ごと次の月に送ったり、 前の月に戻ったりできる機能が付いているのですが、 事情により、1つのカレンダーで月を前後する機能は必要なく、 2ヶ月または3ヶ月分を同時に表示したいです。 要するに、1月、2月、3月のカレンダーを同じページで一度に表示したいのです。 HTMLファイルでは、 <div id="calendar"></div> として、JSファイルを読み込んで表示しています。 元のJSファイルをみながら少しずついじって修正をしているのですが、 複数月の表示をするにはどこをいじればいいのかよく分かりません。。 ネットで探してみたのですが、見つからず、 おわかりの方いらっしゃいましたら教えて頂けませんでしょうか。 よろしくお願い致します。
- ベストアンサー
- noname#223023
- AJAX
- 回答数1
- google feed
ブログの記事のＲＳＳをサイトに読み込ませたいので、google feedを使いたいのですが、 記事数、枠の大きさ等、カスタマイズする方法がのっているサイトご存知でしょうか？ カスタマイズの項目を記入するだけで、プログラムが変更できる便利なものであれば なおいいのですが。
- ベストアンサー
- kurobon619
- AJAX
- 回答数1
- Superfishの最終項処理について
Superfishでナビゲーションを作っておりまして、親項目を横並びにしています。 子が下に伸び、孫がその横に展開して下に伸びる一般的な使い方をしているのですが、最後の項目の、孫項目は、子項目の左側に展開して欲しいのです。 (子の矢印も左側に置きたい。) WEBサイトの全幅が例えば960pxだとすると最後の項目の孫は960px+ボタン幅になるので、1024pxくらいのディスプレイだと孫項目がはみ出してしまうことになるからです。 できれば、HTML側には特別な要素を加えずに出来る方法があればありがたいのですが、良い方法があれば教えていただけませんでしょうか。
- background をフェードしながら変える方法
ボタン対応での background をフェードしながら変える方法を知りたいです 必要事項はこちら： - ボタンは同ページ内に複数（button1, button2 & button3) - それらのボタンを押すと background が変わる (button1 を押すと background1, button2 を押すと background2 に背景が変わる） - 変わるときにフェードイン・アウトエフェクトが必要 (jQuery） どなたかご存知でしたら是非教えてください！
- どこまでがAjaxなの？
現在、Ajaxを勉強中の初心者です。 質問のタイトル通りなのですが、どこまでがAjaxなのかイマイチわかりません。 AjaxはJavaScript + XMLで非同期通信をする技術ですが １．画像やプログラムファイルをサーバPC側に入れておいてクライアントPC側でラジオボタンの選択によって画像表示を変えるのはAjaxですか、それともただのJavaScriptですか？ ２．サーバを使って以下のような入力可能文字カウンタを表示させるのはAjaxですか、それともただのJavaScriptですか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> </head> <body> <form> <textarea cols="46" rows="5" id="title1" name="title1" size="50"></textarea><br /> あと<span id="inputlength1">20</span>文字入力できます<br /> </form> <script type="text/javascript"><!-- function lengthCounter (node, max, cut) { max = max || Number (node.maxLength) || 20; return function () { var rest = max - node.value.length; if (rest < 0) { if (cut) { alert ('20文字以内にしてください'); rest = max; node.value = node.value.substring (0, max); } } return rest; }; } function dispValue (node, cbFunc) { return function () { node.firstChild.nodeValue = cbFunc (); }; } setInterval (dispValue ( document.getElementById ('inputlength1'), lengthCounter (document.getElementById ('title1'), 20, true)), 100); // --></script> </body> </html> ３．「googleサジェストのインクリメンタル検索にはAjaxの技術が利用されている」←ここでのAjaxにはPHPも含まれますか？ 私はPHPをAjaxの枠には入れないような気がします。正確にはPHPとAjaxでインクリメンタル検索機能がつくられていると思うのですが。 ４．PHPのみでAjaxと同じ非同期通信ができればそれはAjaxと呼ぶのか？ よろしくお願いします。
- ベストアンサー
- shorinji36
- AJAX
- 回答数2
- googlemap v3 のDTD宣言について
お世話になります。 googleAPI のリファレンスから googlemap v3 のソースを Dreamweavrにコピペしてブラウザで表示できます。 これをDWで「XHTMLに変換」するとまったく表示されません。 どうしたらいいのでしょうか？ 1行目のコードが変わるだけなのですが、表示されないのはなぜですか？ 他のさくらエディタなどにコピペしても同じ結果です。 サイトはXHTMLで記述しているので統一したいのですが・・・ 地図だけをiframeに入れて、という逃げ方もありますが納得できないのです。 ご存知の方がおられましたら教えてください。 よろしくお願いします。 <html> ↓↓↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
- JavaScriptとWebアプリ＆Ajaxの入門
お尋ねします。 今まで、五月雨的にJavaScriptを使ってきました。 しかし、少し腰を落ち着けて、勉強したいと思っています。 一から学ぼうと思っておりますが、入門用の良いサイトや本をご存じないでしょうか？ 一応、Ｊａｖａや、ＰＨＰなどを使って”オブジェクト指向”モドキは、理解しているつもりです。 JavaScriptや、Documentで検索をかけてみましたが、良いサイトは今のところ見つけられておりません。 どこまでわかれば、良いかも見当が付きません。 そもそも、なんでこんなに自由にブラウザで出来るのかが？？？？ （ずっと前は、セキュリティー何たらかんたらで、使うなと言われたし） やりたい事だけググッて、使っていらっしゃる方も多いかと思いますが、その時に参考になったサイトなどありましたら、ご紹介ください。 ステップとしては、 １．JavaScript理解。 ２．Webで自由にタグなどを制御するために必要な知識 （document等を理解すれば良いのでしょうか？） ３．Ajax基本（xmlのイベントを使うのは、理解しているつもりです。） ４．jQuery基本 特に、「１」と「２」は、ちゃんと理解したいです。 ご存知の方いらっしゃいましたら、よろしくお願い申し上げます。ｍ（＿・＿）ｍ
- ｊQueryでのclassの操作
現在Wordpressに、文字のサイズを「小・中・大」と変えるjQueryを設置しています。 http://az-store.nrym.org/download/extend/jquery-fontsize-switcher/ Wordressではもともとbodyのclassに指定があるのですが、このjQueryを設置すると removeAttr("class")で削除されてしまいます。 そこで、もともとのClassを活かしたまま文字サイズ変更用のクラスだけを 削除&追加ができればいいのですが、 どうすればよいでしょうか？ ただ、単純に「removeAttr("class")」の記述を削除してしまうと、 文字サイズ変更スイッチを押す度に、クラスが追加され続けるのでそれは避けたいです。 $(function(){ var currentstyle = readCookie('fontStyle'); if (currentstyle){ switchFont(currentstyle); }; $("li.sizeL").click(function(){ switchFont("fontL"); return false; }); $("li.sizeM").click(function(){ switchFont("fontM"); return false; }); $("li.sizeS").click(function(){ switchFont("fontS"); return false; }); }); function switchFont(className){ $("body").removeAttr("class").addClass(className); createCookie('fontStyle', className, 365); }; // cookie script http://www.quirksmode.org/js/cookies.html function createCookie(name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }
- ベストアンサー
- haruru0331
- AJAX
- 回答数1
- ドメインをまたぐajax
サーバA（A.com）に <script type="text/javascript" src="http://B.com/"></script> サーバB（B.com）のajax上に object oj = new ActiveXObject("Msxml2.XMLHTTP") ; oj.open(method,url,async,user,password); でajaxを利用しようとしたところ、 上記のoj.openでエラーとなってしまいます。 ローカル上に両方置いてテストしたときはエラーは起きないのですが、 ドメインをまたぐ場合はエラーとなります。 ajaxでドメインをまたぐのはセキュリティ上使用できないのでしょうか？