Comment faire pour re-poste un Bootstrap Liste après le contenu dynamique d'insertion?

Donc, fondamentalement, chaque fois que je suis le chargement d'un Bootstrap Liste avec un vide content option et de l'insertion de contenu dans cette dynamique, la liste perd sa position correcte.

Par exemple:

$('td.chartSection').each(function () {
    var $thisElem = $(this);
    $thisElem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $thisElem,
        delay: {
            hide: 500
        },
        content: ' '
    });
});

//After popup is shown, run this event
$('td.chartSection').on('shown.bs.popover', function () {
    var $largeChart = $(this).find('.popover .popover-content');

    //Insert some dummy content
    $largeChart.html("dfjhgqrgf regqef  f wrgb wrbgqwtgtrg <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg");
});

Ma Question:

Est-il une méthode qui permet de recalculer les popovers position comme $('td.chartSection').popover('recalculate').

Ou est-il un autre moyen de re-position de la liste sans manuellement le faire avec des styles CSS?

TRAVAIL DÉMO

OriginalL'auteur Fizzix | 2014-05-06

7

Non, il n'y a pas de recalculer et il n'y a vraiment pas de moyen facile de le faire. Cela dit, vous pouvez dynamiquement injecter les popovers de cette façon:
```
$('td.chartSection').on('mouseenter', function() {
    var myPopOverContent = 'This is some static content, but could easily be some dynamically obtained data.';
    $(this).data('container', 'body');
    $(this).data('toggle', 'popover');
    $(this).data('placement', 'top');
    $(this).data('content', myPopOverContent);
    $(this).popover('show');
});

$('td.chartSection').on('mouseout', function() {
    $(this).popover('hide');
});
```
Il suffit de remplacer l'ensemble de vos js dans votre violon avec le ci-dessus et vérifier...

Fonctionne bien, merci 🙂
Si vous voulez ajouter du code html à l'intérieur du contenu/corps de la liste, c'est la meilleure façon de le faire. Mais vous devez définir cette option: $(this).de données('html', true); et, évidemment, de mettre le code html sur myPopOverContent

OriginalL'auteur jme11

En utilisant Bootstrap v3.3.7:

Vous pouvez étendre la Liste constructeur d'ajouter le support pour un re-positionnement de la fonction. Vous pouvez placer ce script ci-dessous où vous charger de bootstrap.

JSFiddle Démo

<script src="bootstrap.js"></script>
<script type="text/javascript">
$(function () {
$.fn.popover.Constructor.prototype.reposition = function () {
var $tip = this.tip()
var autoPlace = true
var placement = typeof this.options.placement === 'function' ? this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement
var pos = this.getPosition()
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
var orgPlacement = placement
var viewportDim = this.getPosition(this.$viewport)
placement = placement === 'bottom' &&
pos.bottom + actualHeight > viewportDim.bottom ? 'top' : placement === 'top' &&
pos.top - actualHeight < viewportDim.top ? 'bottom' : placement === 'right' &&
pos.right + actualWidth > viewportDim.width ? 'left' : placement === 'left' &&
pos.left - actualWidth < viewportDim.left ? 'right' : placement
$tip
.removeClass(orgPlacement)
.addClass(placement)
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
}
})
</script>

Puis dans votre script à chaque fois que vous devez repositionner votre info-bulle après l'insertion du contenu. Vous pouvez les appeler:

$element.popover('reposition')

cela fonctionne tout à fait. Super!
J'espérais que ce serait un travail, mais il semble que si le contenu dynamique est trop différent du contenu original, alors il ne fait pas les repositionner correctement. jsfiddle.net/e90npd0v/9
J'ai corrigé votre JSFiddle jsfiddle.net/e90npd0v/12 parce que le repositionner n'a pas été déclenché.
C'est la meilleure solution, pas de scintillement. Merci!

OriginalL'auteur AlexCheuk

7

Je viens d'appeler

button.popover('show');

Et il re-positionné.

Cela fonctionne en effet, mais fait la liste de scintillement que c'est caché et le montré à nouveau chaque fois que vous appuyez sur cette.

OriginalL'auteur DigitalMC
4

J'ai utilisé ce code pour ajuster la hauteur au large de la liste quand il est déjà chargé sur la page:
```
   var popover = $(this).closest('.popover');
var sender = popover.prev();
var adjustment = (sender.position().top - popover.height()) + 15;
popover.css({ top: adjustment });
```
Variable de l'expéditeur est la cible lorsque la liste est centrée sur de.

OriginalL'auteur muchacho
4

J'ai eu une situation similaire, où j'avais fait une liste qui contient déjà certaines HTML (un chargement spinner) et j'ai changé le contenu lorsqu'un appel ajax retourné. Dans ma fonction de callback ajax, c'était le code que j'ai utilisé pour modifier le positionnement de sorte qu'il est resté centré:
```
var originalHeight = $(popover).height();
$(popover).find('.popover-content').html(data);
var newHeight = $(popover).height();
var top = parseFloat($(popover).css('top'));
var changeInHeight = newHeight - originalHeight;
$(popover).css({ top: top - (changeInHeight / 2) });
```
Fonctionne très bien, mais j'ai enlevé le divisant en partie dans la dernière ligne (changeInHeight / 2), donc je me retrouve avec: $(popover).css({ top: top - changeInHeight });

OriginalL'auteur Tim

Si la liste de la position "haut" (comme dans la question), vous pouvez ajuster son positionnement absolu à partir du haut de la page.

J'ai créé une fonction pour travailler la hauteur de la liste, puis déplacer vers le haut sur la page par sa hauteur.

function adjustPopoverHeight($popoverElement) {     
var height = $popoverElement.height();
var adjustment = 0 - height - 4;
$popoverElement.css({ top: adjustment });
}

et de l'utiliser avec une requête ajax pour obtenir des données:

 $.ajax({
type: 'GET',
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json'
}).done(function(dat) { 
//set the popover content to whatever you like
//adjust height of popover
var $popoverElement = $('.popover');
adjustPopoverHeight($popoverElement);
})

OriginalL'auteur Alex

-1

J'ai pris le concept de jme11 la réponse de mise à jour pour Bootstrap 3.3.2+

$('button')
.popover({
trigger: 'manual',
html: true,
container: 'body',
})
.click(function() {
var $this = $(this);
var popover_obj = $this.data('bs.popover');
if (popover_obj.tip().hasClass('in')) {
popover_obj.hide();
} else {
var opts = popover_obj.options;
opts.content = $('<div/>').text('hello world');
popover_obj.init('popover', $this, opts);
popover_obj.show();
}
})
;

Il y a une méthode appelée setContent sur la liste d'objet, mais pour une raison quelconque, il ne fonctionnait pas pour moi. Si vous souhaitez l'essayer, il devrait ressembler à ceci:

popover_obj.setContent($('<div/>').text('hello world'));

OriginalL'auteur Alex S

Vous devez vous connecter pour publier un commentaire.