web-dev-qa-db-fra.com

Comment mettre à jour le contenu dans l'infobulle de Jquery UI en temps réel?

J'ai un élément qui, lorsqu'il est survolé, affiche le prix de l'article (dans un jeu). J'utilise l'infobulle de l'interface utilisateur de jQuery pour activer l'affichage des informations relatives à chaque élément. Lorsque l'utilisateur clique sur l'élément, jQuery enregistre le clic, utilise une requête $ .get () pour traiter l'achat et peut renvoyer des informations spécifiques relatives à l'élément via JSON et la fonction parseJSON de jQuery. 

Cependant, les prix de chaque article changent à chaque achat. C'est une sorte d'inflation. Je ne vois pas comment accéder au contenu de l'info-bulle de l'interface utilisateur de jQuery pour en modifier le contenu de sorte que, même s'il est toujours affiché ou même s'il ne l'est pas, modifier la valeur de son contenu afin de refléter les nouveaux prix. 

Que dois-je faire pour modifier ce contenu en temps réel?

jquery-ui-tooltip
18
Nicholas Cardot

Vous pouvez modifier le contenu de jQuery Tooltip après l’initialisation comme suit:

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

Voici un demo .

Voir le API pour plus de détails.

18
Foreever

Je viens de le découvrir moi-même, et les autres réponses ici ne traitent pas vraiment de la question posée par le PO (le même problème que moi): comment faire en sorte que l'infobulle jQueryUI modifie son contenu lors de la modification de l'attribut "title" de un élément qui a une info-bulle. J'avais une entrée sans attribut "title", en cours de validation via AJAX sur le serveur, et si elle n'était pas valide, je changeais la classe CSS et ajoutais un "titre" pour indiquer l'erreur, et je comptais sur L'info-bulle de jQuery UI indique "juste travailler".

J'avais configuré les info-bulles conformément à la documentation JQUI, en utilisant $(document).tooltip() pour obtenir le comportement délégué par défaut (qui affiche une info-bulle pour chaque élément activé avec un attribut "title"). Ensuite, lorsque ma validation ajax a utilisé $("#inputid").attr("title", "validation error");, tout était charmant, tout mon message d'erreur apparaissant sous forme d'infobulle lors du survol de mes entrées.

Cependant, supprimer l'attribut "title" après que l'utilisateur ait corrigé la valeur d'entrée en appelant $("#inputid").removeAttr("title"); s'est avéré gênant - l'attribut "title" réapparaissant mystérieusement, ainsi que l'info-bulle.

Après quelques recherches, j'ai découvert que c'était parce que le widget info-bulle stockait l'attribut "title" dans un autre emplacement (à l'aide de .data("ui-tooltip-content"...)) afin de désactiver les info-bulles du navigateur, puis les restaurait (raison pour laquelle l'attribut "title" était mystérieusement ré -apparaissant.

Ainsi, la réponse "juste" (ou peut-être la plus simple) à la question du PO consiste à désactiver temporairement la fonctionnalité d'info-bulle de jQueryUI avant de modifier (ou de supprimer) l'attribut "title", puis de le réactiver par la suite, afin de le réexaminer. contenu et faire la bonne chose. Donc, quelque chose comme ça:

// first, disable tooltips
$(document).tooltip("disable");

// Make your change to the element's title
$("#inputid").attr("title", "new message");
    or ...
$("#inputid").removeAttr("title");

// re-enable tooltips
$(document).tooltip("enable");

C'est tout ce qu'on peut en dire! Le problème avec l'utilisation de .tooltip("option", "content", "some text") comme ci-dessus, est que vous devez définir manuellement chaque info-bulle que vous souhaitez afficher - certainement beaucoup de codage inutile, si vous voulez simplement que les info-bulles "fonctionnent" avec le contenu de la page.

4
Steve Sauder

Ma première réponse était fausse, désolée pour ça.

<div id='mybody'>
  <p title='Some tooltip'>paragraph</p>
</div>

javascript:

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text});
}

Vous pouvez rappeler l'info-bulle et modifier le contenu. Cela changera l'info-bulle, mais pas avant que vous ayez revu. 

Modifier:

Je pense avoir trouvé quelque chose qui fonctionnera. Fermez et rouvrez l'info-bulle. L'info-bulle contiendra le nouveau texte.

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text}).tooltip('close').tooltip('open');
}
2
James

Pourquoi ne pas le faire de cette façon?

HTML:

 <input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
 <input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
 <input class="input-change" id="input3" type="text" title="Test3" value="Input #3">

jQuery:

// Every time a key is pressed (for the sake of example)
$(function(){
    // Initialize tooltip
    $('.input-change').tooltip();

    // Every time a key is pressed (again, for the sake of example)
    $(".input-change").keyup(function(){
        // Get the actual value of the input that has changed (again, for the sake of example)
        var inputValue = $(this).val();

        // Get the id of the input that has changed
        var idInputChanged = "#" + $(this).attr('aria-describedby');

        // Go directly to the <div> inside the tooltip and change the text
        $(idInputChanged + ' div').html('Text changed in real time without closing tooltip!:<br />' + inputValue);
    });
})

Exemple JSFiddle:

http://jsfiddle.net/4MT5R/

1
Tomatrox

Voici une autre solution qui fonctionne bien pour moi - ajoutez simplement ceci à $(function(){ // code here });:

$(document).tooltip({
    content: function()
    {
        var $this = $(this);
        return $this.attr('title');
    }
});

L'avantage de ceci est que si votre attribut title change au cours de l'exécution, l'info-bulle affiche toujours la version la plus récente.

Techniquement, je n’ai pas vérifié si cela fonctionnait avec attr('title') (je suppose que ce sera le cas).

Ma version personnelle est différente en ce sens que j'ai besoin de plus que du texte brut pour être affiché dans l'infobulle, c'est-à-dire du code HTML. Alors voici le code que j'utilise pour mon projet actuel:

<div class="title" data-note="This is my tooltip text<br>with line break"></div>

et

$(document).tooltip({
    items: ".title",
    content: function()
    {
        var $this = $(this);
        if ($this.data('note') != '')
        {
            return unescape($this.data('note'));
        }
        else
        {
            return false;
        }
    }
});

Note items qui me permet de personnaliser les éléments pour déclencher l'info-bulle.

1
semmelbroesel

Mon cas d'utilisation impliquait de définir un message de succès/échec lorsque l'utilisateur cliquait sur une info-bulle (pour copier une URL dans le presse-papiers), puis de le réinitialiser lorsque l'élément perdait le survol pour que le message d'origine soit affiché lors du survol suivant. 

J’ai remarqué que lorsque vous double-cliquez, c’est-à-dire lorsque l’info-bulle est toujours ouverte, le nouveau message persiste lorsque l’élément est perdu et le survol survolé. Voici comment je l'ai résolu. J'accepterais toutes les suggestions d'amélioration.

var msg = 'New message';

// Cache $target
var $target = $(event.target);

// First close tooltip, which should be open on hover
$target.tooltip('close');

// Get the original message
var oldMsg = $target.tooltip("option", "content");

// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);

// Open the tooltip with the new message
$target.tooltip('open');

// For some reason, the tooltip doesn't close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});

// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
    $(this).tooltip("option", "content", oldMsg);
});
0
lancemonotone