• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:jQuery・Ajaxについて教えて下さい。)

jQuery・Ajaxについて教えて下さい

このQ&Aのポイント
  • jQueryを使用した「Tipped」というツールチップ作成フレームワークを使用しています。ツールチップの上にさらにツールチップを表示することができず困っています。
  • 特定のクラス名の文字にカーソルを当てると、Ajaxにより外部HTMLの内容が小窓で表示されるという機能を使っています。外部HTMLの表示はできますが、ツールチップ内に表示されるHTMLの中にさらに同名のクラス名を埋め込み、そこにカーソルを当てたとき二重でツールチップを表示することができません。
  • A.phpからB.phpのツールチップを表示することはできます。B.phpからC.phpのツールチップも表示できますが、A.phpに表示したB.phpからはC.phpのツールチップが表示できません。Ajaxを使わずにB.phpに静的なツールチップを埋め込んだ場合も表示できません。wordpressの記事ページで動作させています。どうすれば表示できるでしょうか。

質問者が選んだベストアンサー

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

よくわかってませんが、回答がないみたいなので… Tippedの内容をみていませんのであくまで想像ですが、最初に設定した時には(当然ながら)B.phpの内容は表示されていませんので、その内容に対してはツールチップの機能が設定されていないはずです。 それなので、後から読み込んだ場合は、その部分に対しても設定を追加してあげないと機能しないはずです。 とりあえず、何の反応もないのはこのあたりが直接の原因ではないかと想像します。 それだけで動作するかどうかは、そのライブラリがこのような利用を想定しているかにもよると思われます。 ご期待なさっているのはツールチップの上に別のツールチップが表示されるようなものかと思いますが、そのライブラリがツールチップを一度に一つしか表示しないような仕様になっていると、内容は切替わるかも知れませんが同時に両方を表示することはできないかと…あるいは、切替わらない可能性もあります。(想定されていないので)

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jQueryでajax

    ajax(jQuery使用)を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート(This is success!)が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目1</option> <option value="2">項目2</option> </select> <p>結果:</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX
  • Jquery.ajaxでHTML読み込み

    現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか? 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。

  • jQueryでPHPのパラメータを使うには

    画像のツールチップを表示させるjQuryのライブラリを導入しました。 ソースをはしょっているので、意味はわからないと思いますが、下記のように、 relのに値に「?no="~"」というパラメータを使用すると動作してくれません。 おそらくjQuery内でPHPのパラメータを使えない事が原因だと思うのですが、 このパラメータをjQuery内で利用するにはどうすれば良いでしょう? /* スクリプト */ <script type="text/javascript"> …………… $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>"); …………… </script> /* PHPファイル */ <a href="test.php?no=1" class="screenshot" rel="test.php?no=1"><img src="test.php?no=1"></a>

  • AtomでjQueryは使えますか?

    ローカルフォルダ内にindex.html、contact.html、style.css、contact.css、script.js、5つのファイルを作成し、Atomでコーディング中です。 index.htmlとcontact.htmlの<head></head>内で<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>とし、</body>直前で<script src="./script.js"></script>、又、script.jsに$(function(){この中にコード});と記述。 (1)まずここで質問ですが、これでjQueryの使用環境は整ってますでしょうか? 続きまして、先ほどの質問内容とは違ってしまいますが、アコーディオン作成のため、index.html内の <div class="qa">  <h1 class="question-text"> <span class="fa fa-question-circle"></span> 名前は何ですか?  </h1> <span id="up" class="fa fa-angle-up"></span> <p class="answer-text">ほげほげです。</p> </div>に対してscript.jsにて $('.question-text').click(function(){ var $answer=$(this).parent().find('.answer-text'); if($answer.hasClass('open')){ $answer.removeClass('open'); $answer.slideUp(); $(this).parent().find('#down').html('<span id="up" class="fa fa-angle-up"></span>'); }else{ $answer.addClass('open'); $amswer.slideDown();   $(this).parent().find('#up').html('<span id="down" class="fa fa-angle-down"></span>'); } }); と記述。→グーグルのブラウザで確認。→クリックしても動かない。 という状況です。 (2)ここでまた質問ですが、(1)の時点でjQuery使用環境が整っていれば、動かない理由は単に私のコードが間違っている事になる訳ですが、どうでしょうか・・・? ご意見賜りたくお願い申し上げます。

  • JQueryはAJAXとは無関係??

    質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか? 「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、 特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか? それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても(独自にプログラムを書いていなくても) AJAXの処理が行われているのでしょうか? /************************************/ サーバへのリクエストはなくても、1つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。 (※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね?) JQueryの技術情報のサイトを見ていると、 よく「document.ready」と書かれていたりするソースを見かけますが、 これはAjaxとは関係なく(通信とは関係なく)、 また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。 (「Form、submit」とも関係がない) XMLHttpRequestも「HttpRequest」とあるわけですし、 「Form、submit」を書いているときに行われるわけではないけれども、かわりに、 「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、 その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか?

    • ベストアンサー
    • AJAX
  • Ajaxを使った読み込みができない

    ●質問の主旨 Ajax(非同期通信)を使って、 ブラウザ上でテキストファイルの読み込みを させたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、 テキストファイルの中身(Hello,World)の 読み込みをさせたいと考えております。 参考サイトにもとづいてやってますが、 画像の表示ができません。 表示させるためにはどうしたら良いでしょうか? ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了!'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト(ドットインストール) http://dotinstall.com/lessons/basic_jquery/519

    • ベストアンサー
    • AJAX
  • Jqueryのajaxを用いてHTMLの読み込み

    こんにちは。 Jqueryのajaxで広告向けのJavaScriptが記述されたhtmlを取得し、関数【$("#ID").html(htmlソース);】を用いて、HTMLを読み込んだ際に、それに記述されているJavaScriptが動作してくれません。 読み込むHTMLに記述されているJavaScriptは以下です。 <script type="text/javascript" src="//xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script> ご存知の方がいらっしゃいましたら、教えて頂きたいです。

  • jQueryが動きません。

    表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。

  • Ajax jQuery HTML5 って全部一緒?

    素人質問ですいません! Webディレクターを目指しているのですが、FLASHっぽいアニメーションを最近ではiPadなどに対応させる為に、AjaxやらjQueryとかHTML5とかで実現できると良く話を聞きます。 JAVA Script と CSS をつかって実現しているとか?色々な技術が組み合わさっているとか?? そもそもAjax=jQuery?など、用語同士の親子関係も解りませぬ。 色々とネットで見てみたのですが、読んでいるとすぐに専門的な話に潜り込んでしまって解らないので、どなたか、まぁるく、やさしく、解説をお願い出来ませんでしょうか?

    • ベストアンサー
    • AJAX
  • jquery3系がうまくいかない

    jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->

MFC-J890DN印刷できない
このQ&Aのポイント
  • MFC-J890DNで印刷できない問題についての相談です。
  • Windows11で無線LAN接続しているMFC-J890DNの印刷エラーについてのトラブルです。
  • ひかり回線を使用しているMFC-J890DNが印刷できない問題についての質問です。
回答を見る

専門家に質問してみよう