ブートストラップのツールチップをAJAXの呼び出し結果に設定します

Question

私はAJAXリクエストからデータをロードしたいツールチップのbootstrapを持っています。リクエストのテキストはツールチップのtitleプロパティです。私のAJAXリクエストは正常に動作しますが、2つの問題があります。

1. なぜAJAXコールのデータがツールチップに入り込まないのですか？
2. ttManagerオブジェクトを使用してツールチップの状態をカプセル化するにはどうすればよいですか？私はかなり確信している現在

、ときに、ページが最初にロードし、私は、コンソールに#btnSubmitをクリックして、私は successを参照してくださいとはconsole.log（ttManager）ライン

$(document).ready(function() { 
     //this object's title attribute will be the value of ttManager.title seen below 
     var ttManager = { 
      title: '', 
      setTitle: function (data) { 
       this.title = data; 
      } 
     } 
     var ajaxCall = function() { 
      //this returns the top five results of text from a query 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json", 
       url: "Service.asmx/GetDrugs", 
       dataType: "json", 
       success: function (data) { 
        console.log('success'); 
        ttManager.title = data.d; 
        //inside this function I want to set ttManager.title equal to the data.d 
        console.log(ttManager); 




       }, 
       error: function (xhr) { 
        console.log('failed: ' + xhr.status); 
       } 

      }); 


     } 

     $('#btnSubmit').tooltip({ 
      //reference to ajax call 
      //title is the attribute responsible for displaying text in the tooltip 
      //I need to use a reusable object to set the text property instead of referencing ajaxCall 
      //would it be better if there below were title: ttManager.title? 
      title: ajaxCall, 
      trigger: 'click', 
      placement: 'right' 
     }); 



    }); 

から正しいデータどこかでコールバック関数が必要だが、私はどこにいるのかわからない。将来のポインターも高く評価されます。ありがとう。

Answer 1

まず、ブートストラップのツールチッププラグインについて説明します。表示されているツールチップは、存在する要素がある場合は要素titleを取得し、そうでない場合は渡されたtitle引数を使用します。

次に理解する必要があるのは、ajax呼び出しが非同期であることです。これは、コードが応答を待っている間は実行を継続することを意味します。私はこの

$.ajax({ 
    URL: 'google.com', 
    success: function(){ 
     console.log('yay'); 
    } 
}); 
console.log('woohoo'); 

ような何かを行うのであれば、たとえば、あなたが「イェーイ」の前に、コンソールに「woohoo」を参照してくださいね。したがって、現在、ajaxクエリがttManagerの状態を変更する前に、$('#btnSubmit').tooltipと呼んでいます。

もう1つの問題は、現在、ブートストラップに関してttManagerで何もしていないことです。私は、ttManagerオブジェクトがここでは意味がないと言及する必要があるように感じます。

個人的に、私は

success: function(data) { 
    $('#btnSubmit').attr('title', data.d) 
    .tooltip({ 
     trigger: 'click', 
     placement: 'right' 
    }).click(); 
} 

（、title属性を設定し、その後、ツールチップを表示させるために別のクリックを生成し、ツールチップを呼び出して）これに私のAJAXの成功の機能を変更します現在が現在$('#btnSubmit').tooltip...コードを削除し、あなたのajaxを呼び出すワンクリッククリックハンドラを追加します。

$('#btnSubmit').one('click', function() { 
    ajaxCall(); 
}); 

Answer 2

エレメントに「DISABLED」クラスがあるかどうかを確認してください。