Warm tip: This article is reproduced from serverfault.com, please click
bootstrap-4 javascript sharepoint popper.js popper

Bootstrap popover works on second load

发布于 2020-11-27 19:42:30

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.

Questioner
kingbrain
Viewed
0
分享
kingbrain 2020-12-01 14:28:08

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();">

热门帖子

1
家庭 or 个人用的 NAS 有什么可以推荐的吗？
2
远程兼职 Web3 工程师
3
请假理由填写问题
4
[烟台大樱桃] 人生不只有上班一条路，被裁后决定专心转行做水果
5
这大约是独立开发的顶流了吧， v 友们怎么看
6
V 友们 今年刚需 需要买车 预算 20 出头 极氪 007 可以入吗
7
黑群和白群的差异，如何选择？
8
急收点发票（电脑、笔记本、硬盘、nas 、 iPad 、服务器、交通、鼠标、键盘）
9
自研摄影 App 胶片拾光，五一限时促销： 1 元购买终身会员
10
已绝版邮箱的讨论

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.