Cargue un contenido de pozos de Bootstrap con AJAX. es posible?

Los bits apropiados de lo que probé están aquí:

<a href="#" data-content="
"> Click here $(".button").popover({html: true}) $(".button").click(function(){ $(this).popover('show'); $("#my_popover").load('my_stuff') })

Cuando hago clic, veo que se realiza la solicitud, pero no llena el popover. Ni siquiera veo HTML para que el popover se agregue al DOM, pero podría ser Firebug.

¿Alguien ha probado esto?

Ver la publicación de mi blog para la solución de trabajo: https://medium.com/cagataygurturk/load-a-bootstrap-popover-content-with-ajax-8a95cd34f6a4

Primero debemos agregar un atributo de polo de datos a los elementos a los que le gustaría agregar un pop-up. El contenido de este atributo debe ser la URL que se cargará (absoluta o relativa):

 blabla 

Y en JavaScript, preferiblemente en $ (documento). Listo ();

 $('*[data-poload]').hover(function() { var e=$(this); e.off('hover'); $.get(e.data('poload'),function(d) { e.popover({content: d}).popover('show'); }); }); 

off('hover') evita cargar datos más de una vez y popover() enlaza un nuevo evento hover. Si desea que los datos se actualicen en cada evento de desplazamiento, debe eliminar el apagado.

Consulte el JSFiddle de trabajo del ejemplo.

Funciona bien para mí:

 $('a.popup-ajax').popover({ "html": true, "content": function(){ var div_id = "tmp-id-" + $.now(); return details_in_popup($(this).attr('href'), div_id); } }); function details_in_popup(link, div_id){ $.ajax({ url: link, success: function(response){ $('#'+div_id).html(response); } }); return '
Loading...
'; }

Después de haber leído todas estas soluciones, creo que la solución se vuelve mucho más simple si utiliza una llamada ajax sincrónica . A continuación, puede usar algo como:

  $('#signin').popover({ html: true, trigger: 'manual', content: function() { return $.ajax({url: '/path/to/content', dataType: 'html', async: false}).responseText; } }).click(function(e) { $(this).popover('toggle'); }); 

Una variación del código de Çağatay Gürtürk, podría usar la función de delegado y forzar a ocultar el popover en hoverout.

 $('body').delegate('.withajaxpopover','hover',function(event){ if (event.type === 'mouseenter') { var el=$(this); $.get(el.attr('data-load'),function(d){ el.unbind('hover').popover({content: d}).popover('show'); }); } else { $(this).popover('hide'); } }); 

Otra solución:

 $target.find('.myPopOver').mouseenter(function() { if($(this).data('popover') == null) { $(this).popover({ animation: false, placement: 'right', trigger: 'manual', title: 'My Dynamic PopOver', html : true, template: $('#popoverTemplate').clone().attr('id','').html() }); } $(this).popover('show'); $.ajax({ type: HTTP_GET, url: "/myURL" success: function(data) { //Clean the popover previous content $('.popover.in .popover-inner').empty(); //Fill in content with new AJAX data $('.popover.in .popover-inner').html(data); } }); }); $target.find('.myPopOver').mouseleave(function() { $(this).popover('hide'); }); 

La idea aquí es activar manualmente la visualización de PopOver con mouseenter y mouseleave events.

En mouseenter , si no se creó PopOver para su elemento ( if ($ (this) .data (‘popover’) == null) ), créelo. Lo interesante es que puede definir su propio contenido PopOver pasándolo como argumento ( plantilla ) a la función popover () . No olvide configurar el parámetro html en true también.

Aquí solo creo una plantilla oculta llamada popovertemplate y la clono con JQuery. No olvides eliminar el atributo id una vez que lo clones, de lo contrario terminarás con identificadores duplicados en el DOM. También tenga en cuenta que style = “display: none” para ocultar la plantilla en la página.

  

Después del paso de creación (o si ya se ha creado), solo muestra popOver con $ (this) .popover (‘show’);

Entonces llamada clásica de Ajax. En caso de éxito, debe limpiar el viejo contenido de popover antes de agregar nuevos datos del servidor . ¿Cómo podemos obtener el contenido actual de popover? Con el selector .popover.in ! La clase .in indica que el popover se muestra actualmente, ¡ese es el truco aquí!

Para finalizar, en el evento mouseleave , simplemente oculta el popover.

La solución de Çağatay Gürtürk es agradable, pero experimenté la misma rareza descrita por Luke The Obscure:

Cuando la carga de ajax dura demasiado (o los eventos del mouse son demasiado rápidos) tenemos un .popover (‘show’) y ningún .popover (‘hide’) en un elemento dado que causa que el popover permanezca abierto.

Prefiero esta solución de precarga masiva, todos los contenidos de popover se cargan y los eventos se manejan con bootstrap como en popovers normales (estáticos).

 $('.popover-ajax').each(function(index){ var el=$(this); $.get(el.attr('data-load'),function(d){ el.popover({content: d}); }); }); 

EN 2015, esta es la mejor respuesta

 $('.popup-ajax').mouseenter(function() { var i = this $.ajax({ url: $(this).attr('data-link'), dataType: "html", cache:true, success: function( data{ $(i).popover({ html:true, placement:'left', title:$(i).html(), content:data }).popover('show') } }) }); $('.popup-ajax').mouseout(function() { $('.popover:visible').popover('destroy') }); 

He actualizado la respuesta más popular. Pero en caso de que mis cambios no sean aprobados, puse aquí una respuesta por separado.

Las diferencias son:

  • CARGANDO el texto que se muestra mientras se carga el contenido. Muy bueno para una conexión lenta.
  • Se eliminó el parpadeo que se produce cuando el mouse sale de popover la primera vez.

Primero debemos agregar un atributo de polo de datos a los elementos a los que le gustaría agregar un pop-up. El contenido de este atributo debe ser la URL que se cargará (absoluta o relativa):

 HOVER ME 

Y en JavaScript, preferiblemente en $ (documento). Listo ();

  // On first hover event we will make popover and then AJAX content into it. $('[data-poload]').hover( function (event) { var el = $(this); // disable this event after first binding el.off(event); // add initial popovers with LOADING text el.popover({ content: "loading…", // maybe some loading animation like  

off('hover') evita cargar datos más de una vez y popover() enlaza un nuevo evento hover. Si desea que los datos se actualicen en cada evento de desplazamiento, debe eliminar el apagado.

Consulte el JSFiddle de trabajo del ejemplo.

Si no es probable que cambie el contenido del popover, tendría sentido recuperarlo solo una vez. Además, algunas de las soluciones aquí tienen el problema de que si te mueves rápidamente por varias “vistas previas”, obtienes varias ventanas emergentes abiertas. Esta solución aborda ambas cosas.

 $('body').on('mouseover', '.preview', function() { var e = $(this); if (e.data('title') == undefined) { // set the title, so we don't get here again. e.data('title', e.text()); // set a loader image, so the user knows we're doing something e.data('content', ''); e.popover({ html : true, trigger : 'hover'}).popover('show'); // retrieve the real content for this popover, from location set in data-href $.get(e.data('href'), function(response) { // set the ajax-content as content for the popover e.data('content', response.html); // replace the popover e.popover('destroy').popover({ html : true, trigger : 'hover'}); // check that we're still hovering over the preview, and if so show the popover if (e.is(':hover')) { e.popover('show'); } }); } }); 

Creo que mi solución es más simple con la funcionalidad predeterminada.

http://jsfiddle.net/salt/wbpb0zoy/1/

 $("a.popover-ajax").each(function(){ $(this).popover({ trigger:"focus", placement: function (context, source) { var obj = $(source); $.get(obj.data("url"),function(d) { $(context).html( d.titles[0].title) }); }, html:true, content:"loading" }); }); 
     

Aquí está mi solución que funciona bien con contenido ajax cargado también.

 /* * popover handler assigned document (or 'body') * triggered on hover, show content from data-content or * ajax loaded from url by using data-remotecontent attribute */ $(document).popover({ selector: 'a.preview', placement: get_popover_placement, content: get_popover_content, html: true, trigger: 'hover' }); function get_popover_content() { if ($(this).attr('data-remotecontent')) { // using remote content, url in $(this).attr('data-remotecontent') $(this).addClass("loading"); var content = $.ajax({ url: $(this).attr('data-remotecontent'), type: "GET", data: $(this).serialize(), dataType: "html", async: false, success: function() { // just get the response }, error: function() { // nothing } }).responseText; var container = $(this).attr('data-rel'); $(this).removeClass("loading"); if (typeof container !== 'undefined') { // show a specific element such as "#mydetails" return $(content).find(container); } // show the whole page return content; } // show standard popover content return $(this).attr('data-content'); } function get_popover_placement(pop, el) { if ($(el).attr('data-placement')) { return $(el).attr('data-placement'); } // find out the best placement // ... cut ... return 'left'; } 

Probé la solución de Çağatay Gürtürk pero obtuve la misma rareza que Luke the Obscure. Luego probé la solución de Asa Kusum. Esto funciona, pero creo que hace la lectura de Ajax cada vez que se muestra el popover. La llamada para desvincular (‘hover’) no tiene ningún efecto. Esto se debe a que delegate está monitoreando eventos en una clase específica, pero esa clase no se modifica.

Esta es mi solución, muy relacionada con la de Asa Kusum. Cambios:

  • Se reemplazó el delegate con on para que coincida con las nuevas bibliotecas de JQuery.
  • Elimina la clase ‘withajaxpopover’ en lugar de desvincular el evento de desplazamiento (que nunca se vinculó)
  • Agregue “trigger: hover” al popover para que Bootstrap lo maneje completamente comenzando con el segundo uso.
  • La función de carga de datos devuelve JSon, lo que facilita la especificación tanto del título como del contenido del popover.
     / * Objetivo: muestra una información sobre herramientas / popover donde se obtiene el contenido del
               aplicación la primera vez solamente.

         Cómo: Obtener el contenido apropiado y registrar la información sobre herramientas / popover la primera vez 
               el mouse ingresa un elemento DOM con la clase "withajaxpopover".  Eliminar el 
               clase del elemento, así que no hacemos eso la próxima vez que ingrese el mouse.
               Sin embargo, eso no muestra la información sobre herramientas / popover por primera vez
               (porque el mouse ya está ingresado cuando la información sobre herramientas está registrada).
               Entonces tenemos que mostrarlo / esconderlo nosotros mismos.
     * /
     $ (función () {
       $ ('cuerpo'). on ('hover', '.withajaxpopover', función (evento) {
           if (event.type === 'mouseenter') {
               var el = $ (this);
               $ .get (el.attr ('data-load'), función (d) {
                   el.removeClass ('withajaxpopover')
                   el.popover ({trigger: 'hover', 
                               título: d.title, 
                               contenido: d.content}). popover ('show');
               });
           } else {
               $ (this) .popover ('ocultar');
           }
       });
     });

Probé algunas de las sugerencias aquí y me gustaría presentar la mía (que es un poco diferente). Espero que ayude a alguien. Quería mostrar la ventana emergente con el primer clic y ocultarla con un segundo clic (por supuesto, con la actualización de los datos cada vez). visable una variable adicional visable para saber si el popover es visible o no. Aquí está mi código: HTML:

  

Javascript:

 $('#votingTableButton').data("visible",false); $('#votingTableButton').click(function() { if ($('#votingTableButton').data("visible")) { $('#votingTableButton').popover("hide"); $('#votingTableButton').data("visible",false); } else { $.get('votingTable.json', function(data) { var content = generateTableContent(data); $('#votingTableButton').popover('destroy'); $('#votingTableButton').popover({title: 'Last Votes', content: content, trigger: 'manual', html:true}); $('#votingTableButton').popover("show"); $('#votingTableButton').data("visible",true); }); } }); 

¡Aclamaciones!

  $('#popover2').popover({ html : true, title: null, trigger: "click", placement:"right" }); $("#popover2").on('shown.bs.popover', function(){ $('#my_popover').html("dynamic content loaded"); }); 

se ha dado una respuesta similar a esta en este hilo: establecer el contenido de datos y mostrar popover : es una forma mucho mejor de hacer lo que espera lograr. De lo contrario, deberá usar la opción live: true en las opciones del método popover. Espero que esto ayude

 $("a[rel=popover]").each(function(){ var thisPopover=$(this); var thisPopoverContent =''; if('you want a data inside an html div tag') { thisPopoverContent = $(thisPopover.attr('data-content-id')).html(); }elseif('you want ajax content') { $.get(thisPopover.attr('href'),function(e){ thisPopoverContent = e; }); } $(this).attr( 'data-original-title',$(this).attr('title') ); thisPopover.popover({ content: thisPopoverContent }) .click(function(e) { e.preventDefault() }); }); 

Tenga en cuenta que utilicé la misma etiqueta href y la hice para que no cambie de página al hacer clic, ¡esto es bueno para SEO y también si el usuario no tiene javascript!

Me gusta la solución de Çağatay, pero las ventanas emergentes no se escondían en mouseout. Agregué esta funcionalidad extra con esto:

 // hides the popup $('*[data-poload]').bind('mouseout',function(){ var e=$(this); e.popover('hide'); }); 

Usé la solución original pero hice un par de cambios:

Primero, utilicé getJSON() lugar de get() porque estaba cargando un script json. Luego agregué el comportamiento desencadenante de hover para corregir el problema del pop emergente.

 $('*[data-poload]').on('mouseover',function() { var e=$(this); $.getJSON(e.data('poload'), function(data){ var tip; $.each(data, function (index, value) { tip = this.tip; e.popover({content: tip, html: true, container: 'body', trigger: 'hover'}).popover('show'); }); }); }); 

Agregué html: true, por lo que no muestra la salida html en bruto, en caso de que quiera formatear sus resultados. También puede agregar más controles.

  $('*[data-poload]').bind('click',function() { var e=$(this); e.unbind('click'); $.get(e.data('poload'),function(d) { e.popover({content: d, html: true}).popover('show', { }); }); }); 

Muestre ajax popover en un elemento estático con el activador de desplazamiento:

 $('.hover-ajax').popover({ "html": true, trigger: 'hover', "content": function(){ var div_id = "tmp-id-" + $.now(); return details_in_popup($(this).attr('href'), div_id); } }); function details_in_popup(link, div_id){ $.ajax({ url: link, success: function(response){ $('#'+div_id).html(response); } }); return '
Loading...
'; }

Html:

  Hey , hoover me !  
  $('[data-poload]').popover({ content: function(){ var div_id = "tmp-id-" + $.now(); return details_in_popup($(this).data('poload'), div_id, $(this)); }, delay: 500, trigger: 'hover', html:true }); function details_in_popup(link, div_id, el){ $.ajax({ url: link, cache:true, success: function(response){ $('#'+div_id).html(response); el.data('bs.popover').options.content = response; } }); return '
'; }

¡El contenido de Ajax se carga una vez! ver el.data('bs.popover').options.content = response;

Lo hice y es un trabajo perfecto con ajax y cargando contenido de popover.

 var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj){ var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) var container, timeout; originalLeave.call(this, obj); if(obj.currentTarget) { container = $(obj.currentTarget).siblings('.popover') timeout = self.timeout; container.one('mouseenter', function(){ //We entered the actual popover – call off the dogs clearTimeout(timeout); //Let's monitor popover content instead container.one('mouseleave', function(){ $.fn.popover.Constructor.prototype.leave.call(self, self); }); }) } }; var attr = 'tooltip-user-id'; if ($('a['+ attr +']').length) $('a['+ attr +']').popover({ html: true, trigger: 'click hover', placement: 'auto', content: function () { var this_ = $(this); var userId = $(this).attr(attr); var idLoaded = 'tooltip-user-id-loaded-' + userId; var $loaded = $('.' + idLoaded); if (!$loaded.length) { $('body').append('
'); } else if ($loaded.html().length) { return $loaded.html(); } $.get('http://example.com', function(data) { $loaded.html(data); $('.popover .popover-content').html(data); this_.popover('show'); }); return ''; }, delay: {show: 500, hide: 1000}, animation: true });

Puedes verlo en http://kienthuchoidap.com . Vaya a esto y coloque el cursor sobre el nombre de usuario del usuario.

Para mí, las obras cambian el contenido de los datos antes de cargar popover:

 $('.popup-ajax').data('content', function () { var element = this; $.ajax({ url: url, success: function (data) { $(element).attr('data-content', data) $(element).popover({ html: true, trigger: 'manual', placement: 'left' }); $(element).popover('show') }}) }) 

Esto funciona para mí, este código corrige posibles problemas de alineación:

    $('.ajax-popover').click(function() { var e = $(this); if (e.data('loaded') !== true) { $.ajax({ url: e.data('url'), dataType: 'html', success: function(data) { e.data('loaded', true); e.attr('data-content', data); var popover = e.data('bs.popover'); popover.setContent(); popover.$tip.addClass(popover.options.placement); var calculated_offset = popover.getCalculatedOffset(popover.options.placement, popover.getPosition(), popover.$tip[0].offsetWidth, popover.$tip[0].offsetHeight); popover.applyPlacement(calculated_offset, popover.options.placement); }, error: function(jqXHR, textStatus, errorThrown) { return instance.content('Failed to load data'); } }); } }); 

Por si acaso, el punto final que estoy usando devuelve html (un rails parcial)

Tomé parte del código desde aquí https://stackoverflow.com/a/13565154/3984542

Aquí hay una manera de abordar algunos problemas:

  1. Problemas de alineación después de la actualización del contenido, especialmente si la ubicación es “superior”. La clave está llamando a ._popper.update() , que recalcula la posición del popover.
  2. Cambio de ancho después de que el contenido se actualiza. No rompe nada, solo parece desagradable para el usuario. Para disminuir eso, establezco el ancho del popover en 100% (que luego está limitado por el max-width ).
 var e = $("#whatever"); e.popover({ placement: "top", trigger: "hover", title: "Test Popover", content: "Loading...", html: true }).on("inserted.bs.popover", function() { var popover = e.data('bs.popover'); var tip = $(popover.tip); tip.css("width", "100%"); $.ajax("/whatever") .done(function(data) { tip.find(".content").text(data); popover._popper.update(); }).fail(function() { tip.find(".content").text("Sorry, something went wrong"); }); });