- 締切済み
Ajax(jQuery)で画像を表示するには？
Ajax(jQuery)を使用したポピュラな方法を探しています。 現在、下記のjsファイルを配置しています。 ・jquery-1.7.1 ・jquery-ui-1.8.17 ネットで調べているんですがよさげなモノを見つける事ができませんでした。 申し訳ありませんが教えていただけませんでしょうか。 宜しくお願いします。
- Nanchatte_PG
- お礼率35% (10/28)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- H240S18B73
- ベストアンサー率65% (190/288)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
$('#output').html('<img src="picture.jpg">'); こうですか？
お礼
説明不足ですみません。 プラグインっていうんですか、そういうので探していましたが・・・ 誤解させてすみませんでした。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 画像を表示とはどのようなことを想定していますか？ 何を持ってよさげなモノなのでしょうか。 補足ください。
補足
説明不足ですみません。 今、PHPで検索フォームを作成しています。 検索結果のリストの1行(1レコード)にマウスカーソルを重ねてら小さく画像が表示してリストの項目にボタンを配置してクリックしたら画面中央に表示されるのを考えていましたが・・・ それでポピュラなAjaxでの画像の表示方法を聞きたかったんです。 理解していただけましたでしょうか。 再度、宜しくお願いします。
関連するQ&A
- 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 -->
- ベストアンサー
- JavaScript
- WordPressでjQuery-UIの使い方
WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたＵＩを見に行くようにしてあります。 参考にしたサイト（jQuery-UI） http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html
- ベストアンサー
- PHP
- jQuery1.9.1でajax応答処理が動かない
お世話になります。 jQuery1.9.1でajaxを使用したいのですが、表題の通りresponse受信時の処理が動かず困っています。 （下記コード抜粋で"test2"が表示されません。） 自分でも調べてはいるつもりですが、知識不足で何をどう調べた物かも分からず成果が上がらないため、何か助言を頂ければと思い投稿致します。 ＜問題＞ jQueryを使用してajax通信を行うコードがあるが、 サーブレットからの応答受信時の処理が実行されない。 ＜備考＞ ・同じソースコードを使用し、正常に動作する環境もあるため、 プログラム上のバグではなく環境構築の問題と思われる。 ・今日までjavaとjavaScriptの区別もつかなかった人間(私ですが)が環境構築しているので、 初歩の初歩でポカをやらかしている可能性は十分あり。 ・ajaxによるリクエスト送信とサーブレット側は動くことをデバッガで確認済み。 ＜環境＞ windows7 apache-tomcat 7.0.42 JDK 7u25 eclipse Java EE IDE(ver: kepler release / build id:20130614-0229) jQuery 1.9.1 jQuery-ui 1.10.3 ＜コード抜粋＞ ・java script側 <script src="//code.jquery.com/jquery-1.9.1.js" ></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" ></script> ～省略～ <script> $(function() { $('#test-form').on('submit',function() { alert("test1"); $.ajax({ url: "${pageContext.request.contextPath}/test", type: "POST", data: { inputStr: $('#test-form').find('input[name="testInput"]').val(), }, }).done(function (data, textStatus, jqXHR) { alert("test2"); }); return false; }); }); </script> ・サーブレット側 { String inputWork = request.getParameter("inputStr"); ～省略～ StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<result>"); stringBuilder.append("OK"); stringBuilder.append("</result>"); String xmlString = stringBuilder.toString(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); Writer writer = response.getWriter(); writer.write(xmlString); writer.flush(); }
- ベストアンサー
- Java
- jquery ui.resizable 使い方
jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。 <div id="out"> <div id="inner"> </div> </div> で、 http://stacktrace.jp/jquery/ui/interaction/resizable.htmlを参考にして、 $('#out').resizable({proportionallyResize:["#inner"]}); としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。 組み込んだjs、cssは、 http://jqueryui.com/download よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた jquery.dimensions.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.resizable.js jquery.ui.draggable.js 及び jquery.ui.resizable.css を、記載の順に組み込みました。 行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。 proportionallyResizeを使う方法でなくても構いません。 方法のわかる方なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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"); } }); おわかりになる方、ご教授お願いします。
- 締切済み
- JavaScript
- jQueryについて教えてください
jQueryというJSがあるのは誰もがご存知だと思います。 私も名前や少しだけ使ったことがありますが、いまいち漠然として分かりません。 初歩的な質問で申し訳ないのですが、 極論から言うとjQueryでいったいどの位の表現？機能を使うことができるのですか？ 本も買ってみたり、ネットでも調べると何かしらjQueryを使ったプログラムはありますが、それが全てではないと思いますし、むしろ極一部だと思います。 jQueryを使うと、どんな事を、どうやったら、何ができる？ って事がどうして皆さん分かるのでしょうか？ 例えば何かイメージしてる動きがあって、それはネットで調べれば近い情報は出てくると思います。 しかし、jQueryである必要も無ければ、jQueryの方が楽な場合もあると思います。 だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 JavaScriptの知識はかじる程度しかないですが、 jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ また、「jQueryでできることの一覧」みたいなサイトってありますか？ あと、jQueryで使えるライブラリの意味がいまいち分かりませんが、 これはjQueryを理解してる人が、使いやすいように作った別のJSファイルって認識で良いのでしょうか？ どうも根本的な事を理解しきれてなくて、教えていただきたく。
- ベストアンサー
- JavaScript
- jqueryで画像を切り替えたい
以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。 メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。
- ベストアンサー
- AJAX
- 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">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- jQuery・Ajaxについて教えて下さい。
jQueryを使用した「Tipped」というツールチップ作成フレームワークを使用しています。 「ツールチップの上にさらにツールチップを表示する」ということが出来ず困っております。 ドキュメント http://projects.nickstakenburg.com/tipped/documentation 特定のクラス名の文字にカーソルを当てると、Ajaxにより外部HTML(PHP)の内容が小窓で表示されるというものです。 これを使って外部HTMLの表示をすることはできたのですが、 ツールチップ内に表示されるHTMLの中にさらに同名のクラス名を埋め込み、 そこにカーソルを当てたとき二重（入れ子）でツールチップを表示するということをしたいのですが、 最初の１つしか表示されません。 ■読み込む側(A.php) ～ 必要なファイルの読み込み ～ <span class='tipped' data-tipped='B.php'>カーソルを当てると「B.php」の内容を表示</span> <script type="text/javascript"> jQuery(document).ready(function() { Tipped.create(".tipped", { ajax: true }); }); </script> ～ ■読み込まれる側（B.php) <span class='tipped' data-tipped='C.php'>ここにカーソルを当てて「C.php」の内容を表示させたい</span> A.phpからB.phpのツールチップを表示することはできました。 B.phpからC.phpのツールチップを表示することもできますが、 A.phpに表示したB.phpからはC.phpのツールチップが表示できません。 Ajaxを使わず、B.phpに静的なツールチップを埋め込んだ場合も表示できませんでした。 wordpressの記事ページで動作させています。 必要なjsファイルは読み込んでおり、ファイルはそれぞれ同じ階層にあります。 何が問題で表示できないのでしょうか。どうかご教示をお願いします。
- ベストアンサー
- JavaScript
- jQuery UI Tabでタブの一つを新しいウインドウで開きたい
jQuery UI Tabでタブの一つを新しいウインドウで開きたい jQuery UI Tabを使用してまして、 タブの一つを<div id="ui-tab-xx">の中に表示ではなくて 新しくウィンドウを開いて表示したいのですが、 どのようにカスタマイズすればできますでしょうか。 JS初心者なのでご教授いただければと思います。 使用しているJSは http://allabout.co.jp/internet/javascript/closeup/CU20000121J/ui.tabs.js こちらから拝借しました。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- PX-105プリンターで印刷できない問題が発生しています。
- プリンターは正常に動いているが、印字ができないため、真っ白な用紙が出てきます。
- EPSON社製品に関する質問です。
お礼
このサイトもみましたが色々有りすぎてどれを使用したらいいのかわからなかったので質問したんですが・・・ それでポピュラなAjaxでの画像の表示方法を聞きたかったんです。 ありがとうございました。