@tylersbrown01 wrote:
Let's say I'm making a single page application and a user requests to see a new report. I want to be able to reload a new report into the existing <div id="report-container"> element.
when i call the embed(config, report-container) method on a div element that ALREADY has a report embedded onto it, I receive the following error (reduced for brevity):
...which already has embedded comopnent associated, but could not find the existing comopnent in the list of active components. This could indicate the embeds list is out of sync with the DOM, or the component is referencing the incorrect HTML element.
Error: Attempted to embed using config
Is there any way I can "re-embed" or do I need to destroy the current div and generate a new one? What's the best workflow to do this?
@tylersbrown01
It is possible to re-embed another report. You can call powerbi.embedNew with a new configuration file.
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'token',
id: 'reportid',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=reportid'
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
}
function reloadreport(){
var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);
};
</script>
<button onclick="reloadreport()">Click me to reload</button>
<div id="reportContainer"></div>
</html>
