Ajaxとの組み合わせでの表示不具合の解決方法

2023/08/03 17:00

このQ&Aのポイント

ロールオーバーやCSSなどで作成された既存のファイルに、Ajaxを組み込むと正常に表示されない現象が起こることがあります。
特に、他の要素がAjaxの表示と干渉する場合に問題が生じることがあります。
解決方法としては、Ajaxと既存のファイルのコードを修正するか、Ajaxの表示をウェブページの一部に限定することが挙げられます。

ベストアンサー

Ajaxとの組み合わせ

2007/02/11 21:12

こんばんは、お世話になっております。 http://www.openspc2.org/reibun/Adobe_Spry/widget/tabpanel/001/index.html ロールオーバーなどのjavascriptや、CSSなどで作成された既存のファイルに、上記サイトにあるサンプルを組み込むと、まともに表示されない現象が起こっています。上記サイトのサンプルでは、１つのリンクをクリックすることで、それに該当するテキストを表示するわけなのですが、全てのテキストが表示されてしまう、といった現象となっております。既存のファイルと言うのも、javascriptなりCSSなりを、ココ1ヶ月で勉強しながら作ったもので、上記サイトのサンプルを組み込むには？と依頼されたのが事の始まりです。私もjavascriptなりのスキルがなく試行錯誤を繰り返しているものの、上記サンプルが正常に表示されたかとおもうと、既存のロールオーバーが動かなくなったりで、悩んでおります。ちなみに、現在のソースは、 <link rel="stylesheet" href="SpryTabbedPanels.css" type="text/css" media="all"> <script src="SpryTabbedPanels.js" type="text/javascript"></script> <script type="text/javascript">  </script> <script type="text/javascript"> // --> function newImage(arg) { 　・　・　・ <body onload="preloadImages();"> となっており、ロールオーバーは動くがajaxは機能せず、bodyタグにあるonloadを外すと、ajaxは動くがロールオーバーは機能しない。といった状況です。スキルが乏しく、どこをどう説明したら良いのかが分からず、上手くお伝えできませんが、ご指摘いただければと思って投函させていただきました。宜しくお願い致します。

mdp
お礼率85% (6/7)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2007/02/12 06:00 回答No.1

僕も勉強を始めて2ヶ月ですし、Ajaxの方も手をつけてないので動作確認できないのですが・・・ (モジュールかなんかをDLして設定しないと機能しない？普通に全部表示されてる(爆死） window.onload = function() と <body onload="preloadImages();"> がOnLoadで上書きされるから？ http://www.openspc2.org/JavaScript/Web_Standard/004/index.html ↑のサイトではこの2つが同意としてありますが他のサイトではそれは(同意とするのは)ナンセンスとも書いてありましたのでよく分からないのですが・・・ので両方書くと先に書かれたwindow.onload = function() は後に書かれた<body onload="preloadImages();">に上書きされて<body onload="">が作動するからAjaxが機能しない？ function newImage(arg) と <body onload="preloadImages()"> から画像をあらかじめ読み込んでマウスが重なったりクリックしたりしたら画像が変わる（？）のだと思いますけど・・・ <OnClick="newImage(arg)">や<OnMousover="newImage(arg)" onMousout="preloadImage()">のようにして対応してみてはどうでしょう？他の方法として<body OnLoad="">に複数設定させるとか・・・ function tab() { new Spry.Widget.TabbedPanels("tabPanel1"); } <body OnLoad="preloadImages();tab();"> http://www.red.oit-net.jp/tatsuya/java/bgm2.htm preloadImages()もwindow.onload(function ***()指定)にして複数読み込むとか・・・こちらはいまいち理解できず（＞＜） http://hori-uchi.com/archives/000396.html 未熟者の浅はかな意見ですが参考までに・・・(滝汗)

質問者

お礼 2007/02/12 23:49

leap_day様こんばんは。事細かなアドバイスを有難う御座います！ >他の方法として<body OnLoad="">に複数設定させるとか・・・ >function tab() { >new Spry.Widget.TabbedPanels("tabPanel1"); >} これで出来ました！何度やっても上手く行かなかったので半ば諦めていたところでしたが、おかげさまで解決する事が出来ました！お忙しい中、ご丁寧なアドバイスを有難う御座いました！追申：上記投函時に記載してあるサイトのソースですが、CSSの他、jsというファイルを用いなければ作動しないようです。上記サイトをくまなく探していたところ、見つけることが出来たのでそれをDLして動かしております。（どこで見つけたのか覚えてません・・汗）

関連するQ&A

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
Ajaxを実装しても、どれもうまく作動しない
下記の内容のhtmlファイルと、以下のコードで読み込んだjsファイルをサーバにアップしたところ、各ブラウザともAjaxが作動しませんでした。 jsファイルは正しく読み込まれており、スクリプトエラーも発生していません。原因がお分かりになる方、ご回答願います。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>サンプル</title> <style type="text/css"></style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"></script> </head> <body> <h1>jQuery : サンプル</h1> <form> <input type="button" value="Click" id="btn"> </form> <p class="mainText">ここの段落がエフェクトにより表示されます。</p> </body> </html>
- 締切済み
- AJAX
Ajaxのウィンドウ表示位置について
ページを開くとAjaxのウインドウが表示されるようになっています。バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですがウインドウの真ん中に出したいのですがやりかたがわかりません。試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。サイトがバックにある状態でウインドウを出したいのでiframe以外でウインドウを真ん中に表示する方法はあるのでしょうか？
- 締切済み
- JavaScript
jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法
下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"></script>
- 締切済み
- JavaScript
Ajax.Updater で受けたHTML中のスクリプトを動かしたい
Prototype.js の Ajax.Updater で受け取ったコンテンツの中で <script type="text/javascript"> .... の関数を動かしたいのですが、上手くいきません。 Ajax.Updater で受け取った下のようなHTMLをページに埋め込んで、クリックするとオブジェクトが見つかりませんと言われてしまいます。 <a href="javascript:void(intest('OK'))">テスト</a> <script type="text/javascript"> var args; function intest (args) { alert(args) } </script> どうしたら動くようになるんでしょうか？
- 締切済み
- AJAX
Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
AJAX?のような使い方をしたい
AJAX?のような使い方をしたいと思い、 javascriptで下記のような記述を行いました。 document.getElementById('id').innerHTML = "<script type='text/javascript' src='api'></script>"; あらかじめ<script type='text/javascript' src='api'></script>を記述しておけば、正常にapiにリクエストしてくれますが、無理やりjavascriptで書き換えると、ソースコードのみが書き換えられ、 apiにリスエスとしてくれません。何か記述が間違っているのでしょうか？それとも根本的に間違っているのでしょうか？
- ベストアンサー
- 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
AJAXの書き方について
<script type="text/javascript"> $( function() { $( '#ajax-button' ) .click( function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); } ); </script> この部分は何を意味しているのでしょうか？ $( '#ajax-button' ) .click( またここの部分をIDにして二つ別々のIDを書いてblur(fn()にしたい場合はどうすればいいのでしょうか？ $("[id$=NO]").blur(function(){ $("[id$=NM]").blur(function(){ function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); }); }); このようにしても動きません。正しい書き方を教えていただきたいです。
- 締切済み
- JavaScript
onloadで動かない<DHTML+AJAXアイデア見本>より
いつもお世話になっております。今回は、標記の「DHTML+AJAXアイデア見本」のサンプルを使ってメニューをつくりました。（見本no.10）リストタグで作られたメニューをロールオーバーすると横にポップアップする、というものです。同じページに画像でスワップするボタンを配置したところ、onloadが上書きされて動きません。たぶんスクリプトの記述順によってどちらかが動かないのです。アイデア見本によると、onloadが競合するときは <script type="text/javascript"> initDhtmlMenu(); </script> のようにイニシャライズさせるような呪文が添えられています。それは、そのjsプログラム内にあるものをとりだしているようです。私のプログラムではwindow.onload = initLeftMenu;がありますが、よくわかりません。文字数制限のため、スクリプトが記入できませんので、サンプルURLをリンクします。 http://www.imztry.net/dhtml/010/010.html どなたかよろしくお願いします。
- 締切済み
- AJAX