Contenu AJAX dans un Widget jQuery UI Tooltip

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

Comment faire afficher tout contenu qui a été récupérée avec une requête AJAX asynchrone?

25
demandé sur sanmai 2012-11-01 14:36:08
la source

4 ответов

voici un exemple ajax de widget jQueryUI tootip de mon blog.espérons 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**
        });
    },
});
57
répondu ZHAO Xudong 2013-08-11 11:08:59
la source

ce n'est évidemment pas une solution complète, mais cela montre la technique de base pour obtenir des données dynamiquement pendant le open événement:

$('#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 la Tripoter

15
répondu slashingweapon 2012-11-05 07:21:29
la source

une chose à surveiller lors de l'utilisation de l'option tooltip "content" pour "AJAX" le texte dans le tooltip, est que la récupération de texte introduit un retard dans l'initialisation du tooltip.

dans le cas où la souris se déplace rapidement à travers le noeud dom tooltip-ed, l'événement de sortie de la souris peut se produire avant la fin de l'initialisation, auquel cas l'infobulle n'est pas encore à l'écoute de l'événement.

le résultat est que l'infobulle est affiché et ne se ferme pas avant la souris est déplacée de nouveau au-dessus du noeud et de nouveau.

bien qu'il y ait une certaine surcharge du réseau qui n'est peut-être pas nécessaire, envisagez de récupérer du texte tooltip avant de configurer le tooltip.

dans mon application, j'utilise mes propres extensions jquery pour faire L'appel AJAX, analyser les résultats et initialiser toutes les infobulles, évidemment vous pouvez utiliser jquery et / ou vos propres extensions mais l'essentiel est:

utilisez les balises image comme point d'ancrage, le texte à récupérer est identifié par le nom atrribute:

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

utiliser la méthode invoke extension pour configurer toutes les infobulles:

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

dans la méthode tooltip 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
répondu Beau 2013-07-24 06:58:06
la source

voici un exemple qui utilise l'appel jsfiddle "/echo/html/" AJAX avec un tooltip 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
répondu Jay Sheth 2016-07-06 21:22:37
la source

Autres questions sur