How to resolve jQuery conflict in Bold BI embedding?
This document provides instructions on resolving jQuery conflicts in Bold BI embedding for versions 5.2.48 and earlier. As all dependencies are sourced from the Embed SDK library, jQuery conflicts will not occur from version 5.3.53 onwards.
When embedding Bold BI dashboards, you may encounter issues with exports not working consistently, UI glitches in the date picker widget in the embedded dashboard. This can be caused by using a jQuery version higher than the recommended version (v1.10.2). To resolve this issue, you can use the jQuery.noConflict() option in your embedding application.
Steps to Resolve jQuery Conflict
- Ensure you are using the recommended jQuery version (v1.10.2) for Bold BI embedded dashboards.
- If your embedding application uses a higher version jQuery file, use the
jQuery.noConflict()option to avoid conflicts. - To use
jQuery.noConflict()in your embedded application Open the view file and add the header tags listed below. The jquery file included in the header is version 3.6.0, but you can substitute it with the version of jQuery that is being utilized by your embedding application. Additionally, the Embed SDK CDN version 6.2.7 has been included in the header, but you can replace it with the specific version of Embed SDK file with respect to the Bold BI server.
Here’s an example of how to use jQuery.noConflict():
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--jQuery version recommended for Bold BI-->
<script type="text/javascript">window.bb$ = jQuery.noConflict();</script>
<script>
bb$(document).ready(function () {
bb$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js');
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.2.7/embed-js.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--3.6.0 version of jQuery -->
<script type="text/javascript"> bb$.easing = $.easing = jQuery.easing </script>
</head>
By following these steps, you should be able to resolve the issue with exports, UI glitches in the date picker widget in your embedded dashboards.
Additional Resources
- How to embed dashboard using JavaScript embedding?
- How to resolve jQuery conflict in embedding?
