Contenido AJAX en un widget de información sobre herramientas de jQuery UI

Hay un nuevo widget de información sobre herramientas en jQuery UI 1.9, cuya documentación API insinúa que el contenido AJAX puede mostrarse en él, pero sin más detalles. Supongo que puedo lograr algo así con una solicitud de locking y sincrónica, pero esto no es lo que quiero.

¿Cómo hago para que muestre cualquier contenido que se recuperó con una solicitud AJAX asíncrona?

Aquí hay un ejemplo de ajax del widget joteryui tootip de mi blog. Espero que ayude.

$(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** }); }, }); 

Obviamente, esta no es una solución completa, pero muestra la técnica básica de obtener datos dinámicamente durante el evento 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'); }); } }); 

Ver el violín

Una cosa a tener en cuenta cuando se utiliza la opción “contenido” de la información sobre herramientas para “AJAX” el texto en la información sobre herramientas, es que la recuperación de texto introduce un retraso en la inicialización de la información sobre herramientas.

En el caso de que el mouse se mueva rápidamente a través del nodo dom de información sobre herramientas, el evento de salida del mouse puede ocurrir antes de que se complete la inicialización, en cuyo caso la información sobre herramientas aún no está escuchando el evento.

El resultado es que la información sobre herramientas se muestra y no se cierra hasta que el mouse se mueve hacia atrás sobre el nodo y vuelve a salir.

Si bien incurre en una sobrecarga de red que puede no ser necesaria, considere la posibilidad de recuperar el texto de información sobre herramientas antes de configurarla.

En mi aplicación, uso mis propias extensiones de jquery para hacer la llamada AJAX, analizar los resultados e inicializar TODAS las sugerencias de herramientas, obviamente, puedes usar jquery y / o tus propias extensiones, pero la esencia de esto es:

Utilice tags de imagen como anclajes de información sobre herramientas, el texto que se recuperará se identifica con el nombre atributo:

  

Utilice el método de extensión de invocación para configurar todas las informaciones sobre herramientas:

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

Dentro del método de descripción de la extensión:

  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; 

Aquí hay un ejemplo que utiliza la llamada AJAX jsfiddle “/ echo / html /” con una información sobre herramientas de interfaz de usuario jQuery.

HTML:

    

JavaScript:

 // (1) Define HTML string to be echo'ed by dummy AJAX API var html_data = "I am a tooltip"; // (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: "*" }); 

Aquí está este ejemplo en jsfiddle :