- 締切済み
Ajaxとjqueryの同ページでの使用について
webに詳しい方にお聞きしたいのですが、HPのトップページにajaxメール(下記URL参照） http://www.ajaxmail.jp/ というものを使わせていただいているのですが、同じトップページに、 javascript jqueryのdual slider(下記URL参照） http://www.hugoandcat.com/DualSlider/index.html を設置したところ、ajaxメールが動作しなくなってしまいました。 メールフォームは起動するのですが、ajaxメール独自の動きがなくなってしまい、困っております。 dual sliderを削除すると、ちゃんと動作するのですが、、しかたないのでしょうか？ 当方Jquery AJAXともにそこまで詳しくないので、なにか相性の問題とか、タグの設置場所でバグがおこったりするものなのか。調べて様々やってみたのですが、原因がわかりません。 わかる方いらっしゃいましたらよろしくお願いいたします！
- masyuuuuu
- お礼率71% (5/7)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
コードは見ていませんが、よくあるのが（$関数などの）コンフリクトです。 jquery側にそれを避ける機能があるので、それを試してみるのも一法かと。 ＜参考サイト＞ http://semooh.jp/jquery/api/core/jQuery.noConflict/_/ http://semooh.jp/jquery/api/core/jQuery.noConflict/extreme/
関連するQ&A
- jQuery slider2のページアイコン
小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用） また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。
- 締切済み
- JavaScript
- JQueryでのAJAXで困ってます
最近AJAXを勉強しようと思い、JQueryに手を出しました。 JQueryで画面遷移無しでdivで作ったメニューを選択して内容を指定したdivに表示させようと思っているのですが、 JQueryでのloadの動作がブラウザの違いで異なる動きをするので困ってます。 IEでは内容が表示されて、新しく表示した部分のJavaScriptが正しく動くのでいいのですが、 Firefox、Operaでは新しく表示した部分のJavaScriptが動作しません。 Chromeでは新しく表示した部分のCSSでさえ適用されません。 IE以外でも正しく動作させるにはどうしたらいいでしょうか？ ご回答、よろしくお願いします。
- ベストアンサー
- AJAX
- jQueryの基本的なことについて教えてください
自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryでloadしたページ内でもjQueryを使う方法
例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){ $("a").click(function(){ alert("click"); return false; }); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、 どのようにすればよいのでしょうか？
- 締切済み
- AJAX
- JQueryはAJAXとは無関係？？
質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか？ 「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、 特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか？ それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても（独自にプログラムを書いていなくても） AJAXの処理が行われているのでしょうか？ /************************************/ サーバへのリクエストはなくても、１つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。 （※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね？） JQueryの技術情報のサイトを見ていると、 よく「document.ready」と書かれていたりするソースを見かけますが、 これはAjaxとは関係なく（通信とは関係なく）、 また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。 （「Form、submit」とも関係がない） XMLHttpRequestも「HttpRequest」とあるわけですし、 「Form、submit」を書いているときに行われるわけではないけれども、かわりに、 「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、 その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか？
- ベストアンサー
- AJAX
- jQuery UIを使用した画像スライダーについて
お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！
- 締切済み
- JavaScript
- 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で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のajaxを用いてHTMLの読み込み
こんにちは。 Jqueryのajaxで広告向けのJavaScriptが記述されたｈｔｍｌを取得し、関数【$("#ID").html(ｈｔｍｌソース);】を用いて、HTMLを読み込んだ際に、それに記述されているJavaScriptが動作してくれません。 読み込むHTMLに記述されているJavaScriptは以下です。 <script type="text/javascript" src="//xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script> ご存知の方がいらっしゃいましたら、教えて頂きたいです。
- 締切済み
- JavaScript
- jquery ajax 外部html 読み込み
現在、数年前にjquery(v1.4.3)を用いて制作したページの更新を行っており それに伴いjqueryも最新版(v1.11.1)への移行を試している最中なのですが ajaxの外部htmlを読み込む処理が実行されなくなり困っております。 旧バージョンとではメソッドの記述法が異なることは理解できておりますが 色々と書き換えてみたものの、以前のように動作させる事ができません。 以下がそれぞれの記述になりますが、もし問題にお気付きになられましたら ご指摘いただけますと幸いです。 jquery(v1.4.3): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, success: function(html){ var $div = $("#add"); $div.html(html); }, error: function(xhr, status, errorThrown){ alert("not found."); } }); } jquery(v1.11.1): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, }) .done(function(html){ var $div = $("#add"); $div.html(html); }) .fail(function(xhr, status, errorThrown){ alert("not found."); }); }
- ベストアンサー
- AJAX
