Bootstrap popover works on second load

Question

Bootstrap popover works on second load

245 Views Asked by kingbrain At 20 October 2024 at 00:34

I have made a webpage on Sharepoint with bootstrap and the content is populated with javascript. I am using popover in a table. The table is generated via javascript. The strange thing is that the popover works only after I made a refresh of the page/reloaded it with F5.

A popover outside of the table works fine and by first load. As well as the code runs fine without problems on my local machine, but on sharepoint it breaks down.

Here some code - initialization:

<script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

then the function for generating the table is called:

<body onload="javascript: GenerateTable();">

followed by the popper call:

$(function () {
  $('.example-popover').popover({
  })
})

The result is a table which contains the following line with the popper:

<td>Here is a question which needs a popper as info!&nbsp;&nbsp;
<div class="row justify-content-end">       
<a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info">Info</a>
</div>
</td>

It seems to me like it an issue with the loading order - but can't figure out why it works locally but not on Sharepoint.

Original Q&A

There are 2 best solutions below

Amos On 30 November 2020 at 07:49

I import js from CDN, it works well in my environment. Test code for your reference:

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body >
  <td>Here is a question which needs a popper as info!&nbsp;&nbsp;
    <div class="row justify-content-end">       
    <a href="#!" tabindex="0" class="badge badge-info" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="This is a funny popover" title="Info" data-placement="right">Info</a>
    </div>
    </td>
    
</body>
<script>

$(function () {
  $('.badge').popover();
 
})
</script>

Test result:

If you need further assistance,please share the full code.

**kingbrain** · Accepted Answer

The problem was the order of the javascript execution. As the code is loaded from an external javascript file the order how the code is loaded is not known.

Thus it is recommended to put the javascript function from the html file into an explicit function into the javascript file. Then the function has to be called explicitly.

Javascript File:

function PopperCall(){
$('.example-popover').popover({});
$('.popover-dismiss').popover({trigger: 'focus'});
$('[data-toggle="popover"]').popover();
}

In the HTML the loading is done by:

<body onload="javascript: GenerateTable(); PopperCall();">

Bootstrap popover works on second load

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SHAREPOINT

Related Questions in BOOTSTRAP-4

Related Questions in POPPER.JS

Trending Questions

Popular # Hahtags

Popular Questions