0

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.

white_gecko
  • 4,808
  • 4
  • 55
  • 76
kingbrain
  • 116
  • 12

2 Answers2

0

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:

enter image description here
If you need further assistance,please share the full code.

Amos
  • 2,030
  • 1
  • 5
  • 9
  • Thanks for your comment. I asked an expericend colleagues and he pointed out that the order of how scripts are loaded is not know everytime. Thus we put the popover call in a dedicated function: `function PopperCall(){$('[data-toggle="popover"]').popover();}` This function is then called actively after the generation of the questions ``. Maybe you can comment on the issue of the order of calling javascript and I can mark it as solution?! – kingbrain Nov 30 '20 at 17:07
  • Just post your solution and then mark it the answer. Indeed, the trigger method of the dynamically generated element needs to be written in the method of the dynamically generated element. – Amos Dec 01 '20 at 02:14
0

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();">
kingbrain
  • 116
  • 12