0

ツールチップを使用するのは初めてで、それについて多くの調査を行いました。jquery Web サイトを使用して、ほとんどの情報を取得しました。マウスでハイパーリンクをクリックすると、ツールチップに動的データが表示されるようにします。リンクにタイトルを追加し、このコードを以下に示します。

  var t = 1000;
     $(document).tooltip({
       content: '... waiting on ajax ...',
open: function(evt, ui) {
    var elem = $(this);
    $.ajax({ type: "POST",url:'/GetTooltip/', data: 80140}).always(function() {

        elem.tooltip('option', 'content', 'Ajax call complete');

     });
setTimeout(function(){
  $(ui.tooltip).hide('destroy');
   }, t);},

   position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }

});

always 関数に関連する ajax 呼び出しの構文と、ツールチップに表示するデータを取得する方法について十分に理解していません。GetTooltip は JSON データを返します。GetTooltip スクリプトにポストし、返されたデータをツールチップに表示したいだけです。現時点では、私の ajax は何も投稿していません。

4

1 に答える 1

0

あなたが十分に知識がないというあなたの発言について

  • 常に関数: always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); ajaxリクエストが実行された後に常に実行されます。詳細については、ドキュメント deferred.always()も参照してください。jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })
  • 返されたデータを取得してツールチップに表示します - フィドルの例を参照してください

stackoverflow で他にも多くの回答を見つけることができます。このフィドルを見て、さらに助けが必要な場合はお知らせください。

更新されたフィドル 2

フィドルを更新した場合。ajax コールバックから返されるパラメーターから値を渡すことができます。これは、ajax 呼び出しの単純なラッパーです。

function callAjax(elem){
    $.ajax({ url: '/echo/json/',
         type: 'POST',
         contentType:"application/json; charset=utf-8",
         dataType:"json",
         data:  { json: JSON.stringify({ text: 'some text'})}
      }).always(
          function(data,textStatus, errorThrown) 
          { 
             elem.tooltip('option', 'content'
                , 'Ajax call complete. Result:' + data.text);
           });
}

上記を使用JSON.stringify(...)して Json-String を作成しています。この機能は、すべてのブラウザーに存在するわけではありません。問題が発生した場合は、現在の chrome / chromium ブラウザを使用してテストしてください。

したがって、tooltip() 内でラッパー関数を使用できます。

$('#tippy').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
        var elem = $(this);
        callAjax(elem);
    } // open
});

上記では、always メソッドが 3 つのパラメーター (data、textStatus、errorThrown) を持つ無名関数を呼び出していることがわかります。ajax 呼び出しからの応答を渡すには、 を使用できますdata。上記では、プロパティ テキストを含む単純なオブジェクトのみを渡しています。それにアクセスするには、使用できますdata.text

于 2013-07-13T17:57:21.730 に答える