$('a.popup-ajax').popover({ "html": true, "content": function(){ $.ajax({ url: '/heroespage', dataType: 'json', success: function(response){ var title = $("a.popup-ajax").attr("data-heroid"); console.log(response[title]['id']); var name = response[title]['name']; var role = response[title]['role']; var img = response[title]['img']; var typeAttack = response[title]['typeAttack']; $("a.popup-ajax").attr('data-content', '<div class="hero-footnote"><img src="'+ img +'" alt=> <div class="hero-footnote__desc"><h3>'+ name +'</h3><p>'+ typeAttack+'</p><span>'+ role +'</span></div> </div>'); } }) } });

Here I take the attribute value:

 var title = $("a.popup-ajax").attr("data-heroid");

id is stored there, respectively, then this id substituted in response[title] and the infa I need is displayed. All is well when the data-heroid one per page, but if there are several, then only the first value is taken. How to remake the code so that it takes the values ​​of each element to which I impose?

    1 answer 1

    https://getbootstrap.com/docs/4.1/components/popovers/

    popover is a popover .

    The content ... function is called in the context ( this ) of the element to which the popover attached.

     $('a.popup-ajax').popover({ "html": true, "content": function(){ var element = this; // !!! $.ajax({ url: '/heroespage', dataType: 'json', success: function(response){ var title = $(element).attr("data-heroid"); // !!! console.log(response[title]['id']); var name = response[title]['name']; var role = response[title]['role']; var img = response[title]['img']; var typeAttack = response[title]['typeAttack']; /* !!! */$(element).attr('data-content', '<div class="hero-footnote"><img src="'+ img +'" alt=> <div class="hero-footnote__desc"><h3>'+ name +'</h3><p>'+ typeAttack+'</p><span>'+ role +'</span></div> </div>'); } }) } });
    • How am I grateful to you) Thank you) is still a small question. Don't know why the popover window appears only the second time you hover over an element? - Denis Donya
    • @DenisDonya Hmm, let's think. Where the code is called $('a.popup-ajax').popover({ ... }); ? - Igor
    • in my js file. - Denis Donya
    • @DenisDonya This is understandable :). I suspect that it is in the event handler for a mouseover event or the like. And you need to call it to load the page in $(document).ready(function(){...}); - Igor
    • Yes, I can already be a little blunt, I sit over the site for more than 15 hours) It is not in any handler) laid out the code as it is $ (document) .ready (function () {...}); - did not help - Denis Donya