W jQuery UI 1.9 znajduje się nowy widget z podpowiedziami, którego API docs wskazuje, że zawartość AJAX może być w nim wyświetlana, ale bez żadnych dalszych szczegółów. Sądzę, że mogę osiągnąć coś takiego z synchroniczną i blokującą prośbą, ale to nie jest to, czego chcę.Zawartość AJAX w widgetie JQuery UI Tooltip Widget
Jak wyświetlić zawartość, która została pobrana z asynchronicznym żądaniem AJAX?
Oto przykład ajax jqueryui tootip widget z my blog. Oczekuje, że to pomaga.
$(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**
});
},
});
To nie jest kompletnym rozwiązaniem oczywiście, ale to pokazuje podstawową technikę pobierania danych dynamicznie w trakcie imprezy 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');
});
}
});
Patrz Fiddle
Zauważyłem, że na skrzypcach, gdy kursor myszki nad tekstem tooltiped szybko , że etykieta narzędzi może zostać wciągnięta w tryb "off". Nie wiem, czy jest to błąd w podpowiedzi, interakcja z kodem ajax, czy też niekompatybilność wersji jquery-ui 1.9 i jQuery 1 jsFiddle.8.x. – slashingweapon
Jest naprawdę kilka interesujących rzeczy, które możesz z tym zrobić, ale musiałbym wiedzieć więcej o twoim konkretnym przypadku użycia, aby zaoferować bardziej szczegółowe sugestie. – slashingweapon
y, możesz zrobić świetne rzeczy z tym, używam ukrytych div dla podpowiedzi i w otwartej fukcji wykonuję połączenie ajax tylko jeśli dany ukryty div jest pusty. – sanjuro
Jedno do poszukiwania przy użyciu opcji podpowiedzi „treści” na „Ajax” tekst na etykiecie, jest to, że pobieranie tekst wprowadza opóźnienie do inicjowania podpowiedzi.
W przypadku, gdy mysz porusza się szybko po węźle DOM z podpowiedziami narzędziowymi, zdarzenie mouse-out może nastąpić przed zakończeniem inicjacji, w którym to przypadku etykieta narzędziowa jeszcze nie nasłuchuje zdarzenia.
Powoduje to, że etykieta narzędzia jest wyświetlana i nie zamyka się, dopóki mysz nie zostanie przeniesiona z powrotem na węzeł i nie zostanie ponownie otwarta.
Chociaż powoduje pewne obciążenie sieci, które może nie być wymagane, należy rozważyć pobranie tekstu podpowiedzi przed skonfigurowaniem etykiety narzędzi.
W mojej aplikacji, używam własnych rozszerzeń jQuery wykonać połączenie AJAX, analizowania resutls i przywróć wszystkie podpowiedzi, oczywiście można użyć jQuery i/lub własne rozszerzenia, ale sedno jest to:
użyj tagów graficznych jako kotwice tooltip, tekstu, który zostanie odtworzony jest identyfikowany za nazwą atrribute:
<img class="tooltipclassname" name="tooltipIdentifier" />
Zastosowanie powołać metodę rozszerzenia skonfigurować wszystkie podpowiedzi:
$(".tooltipclassname").extension("tooltip");
Wewnątrz metody tego rozszerzenia podpowiedzi:
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;
Oto przykład, który używa jsfiddle "/ echo/html /" wywołanie AJAX z podpowiedzi 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: "*"
});
tutaj jest to przykład na jsfiddle:
Bardzo pomocny. Dzięki! – Derrick