0
votes

Changer de contenu dynamique d'un bootstrap 4 Popover à l'aide d'Ajax

Je veux définir le contenu d'une popover bootstrap4 avec HTML d'un appel AJAX.

Il y a beaucoup de solutions pour bootstrap 3, mais j'ai du mal à trouver une solution pour la version 4 de bootstrap 4. P>

Voici mon HTML: P>

$('#AlertsBellButton').on('show.bs.popover', function () {
    $.ajax({
        url: '/Alert/GetAlertsForBell/',
        type: 'get',
        cache: false,
        success: function (data) {

            $('#AlertsBellButton').attr('data-content', data);
        }
    });
});

jquery bootstrap-4 popover

0 commentaires

3 Réponses :

2
votes

Pour quelqu'un d'autre qui est bloqué, j'ai ajouté du contenu HTML personnalisé comme contenu avec un identifiant: xxx

puis définissez simplement le code HTML de mon gestionnaire de succès en ciblant le HTML sur mesure : xxx

0 commentaires

2
votes

Bro je suis sûr que je suis sûr que je suis très tard mais avec la dernière jQuery, ils ont permis d'utiliser la fonction de jQuery

Vérifiez cet exemple: p>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="hover" onclick='$("#testing").attr("data-content", "test success");' id="testing" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

0 commentaires

0
votes

Voici ma solution pour charger du contenu dynamique dans la partie "Contenu de données" de la Popover. Dans Bootstrap 4, vous pouvez le styler de toute façon que vous voulez.

L'ID que nous utilisons est nommé «contenu anxe». Il est situé à l'intérieur de la «teneur en données» de la popover. P>

Le bouton ou le lien: strong> p> xxx pré>

L'ajax avec elle strong> Notez le «contenu anxe» comme DIV pour charger le contenu. P>

$(".anx_open").click(function() {

    // YOUR DATA STUFF FIRST
    ....
    $.ajax({ 
        type: "POST",
        url: '/your_file_fetching_your_content.',
        data: dataString, 
        success : function(data) { 
            $('#anx-content').html(data);
        },
        error : function(data) { $(".error").show().html('Oops! Something went wrong! The error has been registered into our system and will be solved as soon as possible.'); } 
    });
});

0 commentaires