• 締切済み

Jquery JSON形式で読みだした後

http://kolber.github.com/audiojs/demos/test6.html ここのサイトのaudio.jsの再生リストを表示するjqueryを使用しています。 このjqueryに多少手を加えて、Jsonデータから再生リストのパスを取得して、<li>タグに自動生成しています。 ですが、このaudio.jsのサンプルは、HTMLに直接書いたリストしか識別してくれません。 （直接HTMLに書いたものだと、リストからaudio再生してくれます） JSONからパスを取得して自動生成したリストだとaudio再生が機能しません。 error loading undefinedが表示されます。 （HTMLソースの方にはパスファイルが正しく表示されています。（直接打ち込んだ時と同じパス）） この原因と解決法を教えていただけないでしょうか。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので。　試してはいませんが… コードの内容を見てはいませんが、HTMLソースの内容を見る限りは通常のDOM操作で行なっているように推測します。 ＞JSONからパスを取得して自動生成したリストだとaudio再生が機能しません。 ＞error loading undefinedが表示されます。 という事象から推測すると、実行順序の問題ではないでしょうか？ 参考サイトのスクリプトは初期設定を最初に行なっているようですので、そのスクリプトを実行する前に、リストへの追加を行なっておくようにすれば動作しそうに思いますが、それでもダメでしょうか？ JSONをどこから取得しているのかわかりませんが、ajaxなどであれば、タイミングを制御する必要がありそう。 （コールバックの中で初期設定を実行するようにする） 後から追加しても動作するようにしたいのであれば、コードの内容を解析して、カスタマイズする必要がありそう。 もしかすると、audio.jsは先に実行しておいても問題ないかも知れませんので、その場合であればclickのイベント設定をliveに変えてあげる程度で済む可能性もあります。（よく見ていないので、あくまでも可能性だけの話ですが…）

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • X-JSON

    X-JSONについて質問です。 最近、jsをはじめたばかりの素人ですが、prototype.jsをライブラリとして使用してみようと思っています。 しかし、JSONからX-JSONに乗り換えるところで詰まっています。 まず、「"X-JSON":～」と指定してとなっていますが、なんとなくそれっぽくやってみても動きません。 ローカルのX-JSON形式で書かれたテキストファイルを読み込んで、単にHTML化して表示したいだけなのですが、うまくいきません。 ネットで調べられる限りのサンプルソースをまねてみたつもりですが、上手くいきませんでした。 ・簡単に動くサンプルソースをお持ちの方 ・わかりやすい解説のページなどを教えていただける方 環境は・・・ WinXP SP2、IE6 SP2、prototype.js 1.4.0 になります。 出来れば、複数レコードのデータを下に一覧テーブルを生成できるようなものがあると助かります。 ぜひ、よろしくお願いいたします。

  • JQueryを用いたJsonとの非同期通信について

    下のソース //画面構築完了後 $(function() { //ボタンのクリックイベントで $("#btn_1").click(function(){ //data/sample.jsonのデータを取得し、jsonというオブジェクトに入れる $.getJSON("fdas.json", function(json){ var rows = ""; //テーブルとして表示するため、htmlを構築 //for (i = 0; i < json.length; i++) { rows += "<tr>"; rows += "<td>"; for (var kaey in json) { rows += (json[kaey]); } rows += "</td>"; rows += "</tr>"; //} //テーブルに作成したhtmlを追加する $("#tbl").append(rows); }); }); }); このソースに <input id="btn_1" type="button" value="データ取得" /> を使ってボタンを押しているのですが、FirefoxだとJsonのデータを更新してから押してもデータが変更されず、ChromeだとF5とかを幼くても更新されます。 ブラウザによって挙動が違うのはソースが間違っているからですか？ それともJsにもHTML5やCSS3のように、対応ブラウザなどがあるのでしょうか？？？ また自分はまだよくわかっていないのですが、prototype.jsを用いた場合のほうが簡単だということがありましたらそちらも教えていただけると幸いです 教えてください！！！

  • jQueryで配列JSONの読み込み方法

    phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js　■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■　receive.php　■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■　index.html　■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■　実行後のChromeのコンソール　■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------

  • JSONファイルをダウンロードさせない方法

    サーバー上にxxxx.jsonというJSONファイルを置き、jQueryの$.getJSON()で読み込んでパースしてHTML内にデータを表示させています。 このxxxx.jsonをブラウザで直接開くとファイルの中身が表示されてしまい、ブラウザ経由やダウンロードソフトなどでダウンロードできてしまうと思いますが、これをさせないようにする方法はないでしょうか。

  • Jqueryについて

    質問失礼します。遅延情報を掲載していただいているサイトからjson形式でデータを取得し自前で用意した鉄道名称データと比較しデータが同一のがあったらXXXが遅延しています、無かったら遅延情報はありませんと記述するHTMLを書きたいのですがjqueryにてWEB上のJSONデータを取得しそれを比較の為に変数に代入するやり方がどうしてもわかりません私も至らぬ点があるかと思いますがご教授いただければ幸いです。

  • jQueryの$.getJSONでデータを渡したい

    jQueryの$.getJSONでデータを渡したいのですが、 うまくいきません。 test.js { 　"users": [ 　　{ 　　　"name": "aoki", 　　　"code": "0001" 　　}, 　　{ 　　　"name": "ueno", 　　　"code": "0002" 　　} 　] } 読み込む側 $.getJSON("test.js", { "name": "John", "code": "0003" }, function(json){ 　alert("JSON Data: " + json.users[0].name); 　alert("JSON Data: " + json.users[1].name); 　alert("JSON Data: " + json.users[2].name); }); { "name": "John", "code": "0003" }を渡しているのだから、 json.users[2].nameで、"John"が取得できると思ったのですが、 「'users.2.name' は Null またはオブジェクトではありません。」エラーになります

  • jQueryにて複数ライブラリを動かす

    wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。

  • JSONデータをｊQueryにわたす際に文字化け

    MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1　Title：¤Ç¤­¤¿¡ªÂçÀ®¸ù¡ª No：2　Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>

  • twitterとjqueryのバッティングについて

    はじめまして、jquery.showcase.jsとtwitterウィジットの件で質問させてください。 twitterウィジットとjquery.showcaseを同じHTML内で動作させたいのですが、 IE6～9とchromで見ると、大画像にマウスオーバーすると表示されるサムネイル（大画像にも）に、登録していない画像が２枚余分に表示されてしまいます。 納期も近づいており大変困っております。 正しい枚数ぶんだけ読み込ませたいのですが、どなたか助けていただけませんでしょうか？ 「サンプル」 http://www.im-data.co.jp/corporation/kimoto/hatena/ ちなみにjquery.showcaseに表示させたい画像は１枚～５枚。 IE6～9とchromでは、パス不明の<img/>がサムネイル、大画像ともに２枚追加されてしまいます。firefox3.6では正常に表示されます。 宜しくお願い申し上げます。

  • Typepadのjsonフィードの利用について

    typepadでブログを作成し更新した内容を別のホームページのトップページ などに更新情報として自動更新する方法にJSONフィードというものがあるようです。 http://****.typepad.jp/***/feed.js　←自動的に生成される。 ここまでは解ったのですが、これをどのように使うかが解りません。 http://www.sixapart.jp/typepad/inside/2006/11/010479.html　を見ましたが、上手く使えません。ここのコードを作成した上記***に変更する だけではだめなようです。 どのようにすればいいかアドバイスお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する