web-dev-qa-db-fra.com

AJAX contenu dans un widget info-bulle jQuery UI

Il existe un nouveau Tooltip Widget dans jQuery UI 1.9, dont documentation API indique que AJAX peut y être affiché, mais sans plus de détails. Je suppose que je peux accomplir quelque chose comme ça avec une demande synchrone et bloquante, mais ce n'est pas ce que je veux.

Comment puis-je lui faire afficher tout contenu qui a été récupéré avec une demande asynchrone AJAX?

ajaxjquery-uijquery
26
sanmai

Voici un exemple ajax de widget info-bulle jquery ui de mon blog . J'espère que cela aide.

$(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

Ce n'est évidemment pas une solution complète, mais cela montre la technique de base pour obtenir des données dynamiquement pendant l'événement 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');
         });
    }
});

Voir le violon

17
slashingweapon

Voici un exemple qui utilise l'appel jsfiddle "/ echo/html /" AJAX avec une info-bulle 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: "*"
});

voici cet exemple sur jsfiddle :

2
Jay Sheth

Une chose à surveiller lors de l'utilisation de l'option "contenu" de l'info-bulle pour "AJAXER" le texte dans l'info-bulle, est que la récupération du texte introduit un retard dans l'initialisation de l'info-bulle.

Dans le cas où la souris se déplace rapidement à travers le nœud dom infobulle, l'événement mouse out peut se produire avant la fin de l'initialisation, auquel cas l'infobulle n'écoute pas encore l'événement.

Le résultat est que l'info-bulle est affichée et ne se ferme pas jusqu'à ce que la souris soit déplacée en arrière sur le nœud et à nouveau.

Bien qu'il entraîne une surcharge réseau qui peut ne pas être nécessaire, envisagez de récupérer le texte de l'info-bulle avant de configurer l'info-bulle.

Dans mon application, j'utilise mes propres extensions jquery pour effectuer l'appel AJAX, analyser les résultats et initialiser TOUTES les info-bulles, vous pouvez évidemment utiliser jquery et/ou vos propres extensions mais l'essentiel est :

Utilisez des balises d'image comme ancres d'infobulle, le texte à récupérer est identifié par le nom atrribute:

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

Utilisez la méthode d'extension invoke pour configurer toutes les info-bulles:

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

Dans la méthode d'info-bulle de l'extension:

    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