web-dev-qa-db-ja.com

AJAX jQuery UI Tooltipウィジェットのコンテンツ

JQuery UI 1.9には新しいツールチップウィジェットがあり、その API docs ヒントはAJAXコンテンツを表示できますが、詳細は表示されません。同期要求とブロッキング要求でそのようなことを達成しますが、これは私が望んでいることではありません。

非同期AJAX要求で取得されたコンテンツを表示するにはどうすればよいですか？

ajaxjquery-uijquery
26
sanmai

my blog 。hopeのjqueryuiツールチップウィジェットのajaxの例を次に示します。

$(document).tooltip({
    items:'.tooltip',
    tooltipClass:'preview-tip',
    position: { my: "left+15 top", at: "right center" },
    content:function(callback) {
        $.get('preview.php', {
            id:id
        }, function(data) {
            callback(data); //**call the callback function to return the value**
        });
    },
});
58
ZHAO Xudong

これは明らかに完全な解決策ではありませんが、openイベント中にデータを動的に取得する基本的な手法を示しています。

$('#tippy').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
        var elem = $(this);
        $.ajax('/echo/html').always(function() {
            elem.tooltip('option', 'content', 'Ajax call complete');
         });
    }
});

Fiddleを参照してください

17
slashingweapon

Jsfiddle "/ echo/html /" AJAX jQuery UIツールチップで呼び出します。

HTML：

<body>
<input id="tooltip" title="tooltip here" value="place mouse here">
</body>

JavaScript：

// (1) Define HTML string to be echo'ed by dummy AJAX API
var html_data = "<b>I am a tooltip</b>";

// (2) Attach tooltip functionality to element with id == tooltip
// (3) Bind results of AJAX call to the tooltip
// (4) Specify items: "*" because only the element with id == tooltip will be matched
$( "#tooltip" ).tooltip({
    content: function( response ) {
        $.ajax({ 
        url: "/echo/html/",
        data: {
                'html': html_data
            },
        type: "POST"
        })
          .then(function( data ) {
             response( data );
          });
    },
    items: "*"
});

jsfiddle のこの例を次に示します。

2
Jay Sheth

ツールチップの「コンテンツ」オプションを使用してテキストをツールチップに「AJAX」する場合に注意すべきことの1つは、テキストの取得によりツールチップの初期化に遅延が生じることです。

マウスがツールチップ付きdomノードをすばやく移動する場合、初期化が完了する前にマウスアウトイベントが発生することがあります。その場合、ツールチップはまだイベントをリッスンしていません。

その結果、ツールチップが表示され、マウスがノード上に戻って再び外に出るまで閉じません。

不要なネットワークオーバーヘッドが発生する場合がありますが、ツールチップを構成する前にツールチップテキストを取得することを検討してください。

私のアプリケーションでは、独自のjquery拡張機能を使用してAJAX呼び出しを行い、resutlsを解析し、すべてのツールチップを初期化します。明らかにjqueryおよび/または独自の拡張機能を使用できますが、 ：

ツールチップアンカーとして画像タグを使用すると、取得されるテキストはatrributeという名前で識別されます。

<img class="tooltipclassname" name="tooltipIdentifier" />

拡張メソッドの呼び出しを使用して、すべてのツールチップを構成します。

$(".tooltipclassname").extension("tooltip");

拡張機能のツールチップメソッド内：

    var ids = "";
    var nodes = this;

    // Collect all tooltip identifiers into a comma separated string
    this.each(function() {
        ids = ids + $(this).attr("name") + ",";
    });

    // Use extension method to call server
    $().extension("invoke", 
    {
        // Model and method identify a server class/method to retrieve the tip texts
        "model": "ToolTips", 
        "method": "Get",

        // Send tooltipIds parameter 
        "parms":  [ new myParmClass("tipIds", ids ) ],

        // Function to call on success. data is a JSON object that my extension builds
        // from the server's response
        "successFn": function(msg, data) {

            $(nodes).each(function(){

                // Configure each tooltip:
                // - set image source
                // - set image title (getstring is my extension method to pull a string from the JSON object, remember that the image's name attribute identifies the text)
                // - initialise the tooltip
                $(this).attr("src", "images/tooltip.png")
                    .prop("title", $(data).extension("getstring", $(this).attr("name"))) 
                    .tooltip();
            });
        },
        "errorFn": function(msg, data) { 
            // Do stuff
        }
    }); 

    // Return the jquery object
    return this;
2
Beau