jqueryについて質問させてください。

質問

jqueryについて質問させてください。

cluetipというjqueryプラグインを使って、ページにツールチップを表示するようにしたくて、いちおう、cluetipのドキュメントなどを読んで設置してみたところ、
ローカル上ではちゃんと表示されるのですが、サーバーにアップロードしてから見ると、ツールチップが表示されなくなってしまいます。

また、ブラウザによっては、再度読み込みを行うとツールチップが表示される様になる場合もありました。

完全に行き止まり状態になってしまいました。

【問題のページです】
http://www.g-land.net/gift001/froschgift001.html

上記ページのフォーム部分にloadで別のhtmlから
<div id="gift_01_02" class="firstspan"></div>
にフォームを呼び出しています。

周りにも質問できる方がいないので、何卒宜しくお願いいたします。

回答No.3

yyr446 · ベストアンサー

No.1です。
<script language="javascript" src="../js/jquery.cluetip.js"></script>
の上に2つ
<script language="javascript" src="../js/navi.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->
<script language="javascript" src="../js/navi-temp.js"></script>
ありますね。この中の$(document).ready(function(){｝
でもajaxロードしてますね。
これをとっぱらって、<script language="javascript" src="../js/heightLine.js"></script>
の下にまとめて
<script type="text/javascript">
$(document).ready(function() {
$("#links01").load("../jitem/parts01.html #news01 div[class=inner]");
$("#links02").load("../jitem/parts01.html #news02 div[class=inner]");
$("#links03").load("../jitem/parts01.html #search01 form");
$("#pointupbenner").load("../jitem/parts01.html #pointupbanner");
$("#submitbtn").load("../jitem/parts02.html #submitbtn");
//$('#movecategory').wrap("<span class='hidden'></span>");
$("#pan").html( $("#pan").html().replace( /＞＞/ig , "" ) );
$('textarea.resizable:not(.processed)').TextAreaResizer();
$('iframe.resizable:not(.processed)').TextAreaResizer();
$("#gift_01_02").load("../jitem/parts02.html #gift_01_02",function(){
$('span.title').cluetip({splitTitle: '|'});
});
});
</script>
とする。

お礼

本当に詳しく教えていただきまして、ありがとうございました。

$('span.title').cluetip({splitTitle: '/'};

をコールバックで

$("#gift_01_02").load("../jitem/parts02.html #gift_01_02");
の中で呼び出し、

$("#gift_01_02").load("../jitem/parts02.html #gift_01_02",function(){
$('span.title').cluetip({splitTitle: '|'});

とする事で、loadが完了した後に、ツールチップのプラグインを適応させる
記述となった事で解決したのだと僕なりに解決しました。

まだまだ、全然知識が乏しいですが、おかげ様でひとつ知識が増えました。
本当にありがとうございました。
失礼します。

回答No.4

fujillin

No2です。

実際のソースを見てないので、No2の回答は想像で書いてます。
『ローカルで問題なくて、サーバーでうまくいかない』ということからタイミングの問題かなと…

jquery自体をよく知らないのですが、loadは多分非同期だと思われるので、
　$('.title').cluetip({splitTitle: '|'});
を実行した時にまだ、フォームのloadが終了していなければ、（当然ながら）それらの要素には設定されないことになります。
なので、確実を期すならloadが終了してから実行するのがよろしいかと…
loadは load( url, data, callback )みたいな構文らしいので、callbackで実行すればよいのでは？
http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

と思ったけれど、No3様の回答を見ると、loadが何種類かあるみたい…
対象がその中の一つなら、そのcallbackでもよいけれど、複数あるのなら、それぞれの終了を見て一番最後に（対象を全部ロードし終わって）実行するような関数を作っておいて、それをセットしてあげる必要がありそう。
あるいは、設定するほうの範囲を限定して（loadした範囲にして）、それぞれに設定するのでもいけるのかも。

お礼

fujillin様の

『対象がその中の一つなら、そのcallbackでもよいけれど』という言葉がヒントとなり、

yyr446様にアドバイスいただいた記述をもとに、

$('span.title').cluetip({splitTitle: '/'};

をコールバックで

$("#gift_01_02").load("../jitem/parts02.html #gift_01_02");
の中で呼び出し、

$("#gift_01_02").load("../jitem/parts02.html #gift_01_02",function(){
$('span.title').cluetip({splitTitle: '|'});

とする事で、解決いたしました。
本当にありがとうございました。

回答No.2

fujillin

中身をまったく見ていませんので、全然はずしてるかも知れませんが…

＞上記ページのフォーム部分にloadで別のhtmlから
＞<div id="gift_01_02" class="firstspan"></div>
＞にフォームを呼び出しています。
というフォームの中に設置しているのでしょうか？

その場合、cluetipの設定を　$(funciton() { ～～などでやっていると、その時にはまだフォームが読込まれていない可能性があるので表示されないのでは？
（ローカルだと通信時間がほとんどかからないので、かろうじて間に合っている？）

loadにコールバック関数があったと思うので、そちらでcluetipの設定をしてあげれば良いのでは？

はずしていたら、すみません。

お礼

早速の回答、誠にありがとうございます。

cluetipはページ自体に設置しており、
フォームは別のファイルに
『
<!--フォーム編集領域ここから-->
<span id="gift_01_02">
<span class="title" title="領収書について|領収書の必要な方は、この項目選択肢で『必要』をご選択ください。また、領収書の宛名を別名にされる場合は、下にある『要望欄』にご記入ください。">領収書：</span>
</span>
』
の様に記述をしております。

それをページ内で
$("#item_01_02").load("../jitem/parts02.html #item_01_02");
で
<div id="gift_01_02" class="firstspan"></div>の場所に呼び出して、

$('.title').cluetip({splitTitle: '|'});
でtitleのクラス要素を持つものにツールチップを
表示する様に記述をしているつもりなのですがうまく表示されません。

＞loadにコールバック関数があったと思うので、そちらでcluetipの設定をしてあげれば良いのでは？

とありましたが、もし宜しければ、具体的にどの様に記述をしたら良いか、教えていただけたらとても嬉しいです。
お手数をお掛けしますが、宜しくお願いいたします。
失礼します。

回答No.1

yyr446

問題のページをざっとながめたところ、きずいた点
head部のスクリプト記述に
$(document).ready(function(){ ．．．});
の記述が2つありますね。これは一つにまとめましょう。
まとめた上で、その中に
$("#gift_01_02").load(function () {
$('span.title').cluetip({splitTitle: '|'});
});
とすれば、よいかも．．．

お礼

早速のご返信、誠にありがとうございます。

しかし、僕の知識が少ないため、
『$(document).ready(function(){ ．．．});
の記述が2つありますね』
の部分がソースを見てもどこかわかりませんでした。

ちなみにソースは
『
<script type="text/javascript">
/* jQuery textarea resizer plugin usage */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
$('iframe.resizable:not(.processed)').TextAreaResizer();
$("#gift_01_02").load("../jitem/parts02.html #gift_01_02");
$('span.title').cluetip({splitTitle: '|'});
});
</script>

』
となっていると思うのですが。

外部で読み込んでいる部分でしょうか。

お手数をお掛けしますが、何卒、宜しくお願いいたします。
失礼します。