完全に作成された場合のみツールチップを表示

Question

私は自分のウェブサイトに便利なツールチップを作成しましたが、マウスを使って高速化するとデータがキャッシュされる前に問題が発生しました。

状況は次のとおりです。 データベースからツールチップを作成します。私は2つのajaxコールをそうするために、私が望むものを持っているためにたくさんのdomを作成します。関数は1つずつ自分自身を呼び出していますが、結果はツールチップが完全に作成される前に表示されます。私はシングルを使用した表示トリガする

：

$('a').live('mouseenter',function(){ 
    BuildTooltip(this); 
    $('#tooltipdiv').css('visibility','visible'); 
}); 

を私はツールチップは、AJAX呼び出しが終了した場合にのみ、ツールチップが完全に作成され、このように、前またはものと重複しません表示させたいです。 ajaxがキャッシュされているときは正しく動作しますが、そうでないときは動作しません。

私はasync：falseを使用してみましたが、作成するフリーズは、そのツールチップのオーバーラップが少なくなっています。 コールバックを試みましたが、私が望むように動作していないようです。

どれヘルプyouldは歓迎される:)

編集：ここでは

は私のBuildTooltip関数のコードです。しかし、それは他の関数と呼ばれ、私はすべて:(

function BuildTooltip(element){ 
$('#tooltipdiv').remove(); 
if(String(element).indexOf('dbitem.php?db=')!=-1){ 
    url=String(element); 
    var db=url.substring(url.indexOf('=')+1,url.indexOf('&')); 
    $('body').append('<div class="" id="tooltipdiv"><div class="" id="uctt">\ 
     <div class="" id="itemttheader"></div><span class="" id="nomitem">\ 
     </span><div class="" id="imgitem"><img></img></div><div class="" id="type">\ 
     </div></div><div id="cd"></div><div class="" id="armor"><span class="" id="minarmor">\ 
     </span><span class="hash">-</span><span class="" id="maxarmor"></span> Armor</div><div class="" id="dmgweap">\ 
     <span class="" id="min"></span><span class="hash">-</span><span class="" id="max"></span> Damage</div>\ 
     <div class="" id="dmgweapnorm"><span class="" id="minmin"></span>\ 
     <span class="hash">-</span><span class="" id="maxmin"></span><span class="hash">-</span><span class="" id="minmax"></span><span class="hash">-</span>\ 
     <span class="" id="maxmax"></span> Damage</div><div class="" id="dpsnorm">\ 
     <span class="" id="mindamagepersec"></span> <span class="hash">-</span> <span class="" id="maxdamagepersec">\ 
     </span><p> Damage Per Second</p></div><div class="" id="dps"><span class="" id="damagepersec">\ 
     </span><p> Damage Per Second</p></div><div class="" id="attackspeed"><span class="" id="aps">\ 
     </span> Attacks Per Second</div><div class="" id="effect"></div><div class="" id="effectpsk">\ 
     </div><span class="" id="slot"></span><div id="useless"></div><div id="set"><span></span><div id="part0" class="part"></div>\ 
     <div id="part1" class="part"></div><div id="part2" class="part"></div><div id="part3" class="part"></div>\ 
     <div id="part4" class="part"></div><div id="part5" class="part"></div></div><div class="" id="requiredlevel">Required level : \ 
     <span class="" id="minlvl"></span></div><div class="" id="rewards">Rewards : \ 
     <span class="" id="reward"></span></div><div class="" id="points">\ 
     <span class="" id="point"></span> Points</div><div class="" id="durability">\ 
     Durability : <span class="" id="duramin"></span><span class="hash">-</span><span class="" id="duramax">\ 
     </span></div></div></div>'); 
    var offset=$(element).offset(); 
    request = $.ajax({ 
    url: "getphp/gettooltip.php", 
    type: "GET", 
    data: {db : db, id : url.substring(url.lastIndexOf('=')+1)}, 
    dataType: "JSON" 
    }); 
    request.done(function(msg){ 
    FillInTooltip(msg,db) 
    }); 
} 

}

FillInTooltip機能AJAXの結果を使用し、フォーマットをコピーしようとしないすべてのものは約400行で、div要素に含めますその結果、条件に合致した場合、それは他のAjaxなどを呼び出す

Answer 1

あなたは、Ajaxリクエストの成功時にツールチップを表示することができます

$.ajax({ 
    type: "POST", 
    url: URL, // your url 
    success: function (html) { 
     $('#tooltipdiv').css('visibility','visible'); 
    } 
}); 

を今すぐツールチップがするまで表示すべきではありませんAjaxリクエストが完了しました。