Solved: report.off is not a function

Tristan · ‎03-16-2017

Hi,

I am attempting to embed a report in my MVC project but I keep getting a stream of Javascript errors attempting to embed a report. The wierd thing is that the report is embedded and seems to be working fine, but on looking at my browser dev console I see errors. As the report is embedded and "working", I know that the following is fine:

 var report = powerbi.embed(reportContainer, config);

The errors occur after this line any of the event handlers like report.on or report.off. error received:

Uncaught TypeError: report.on is not a function
at HTMLDocument.<anonymous> (Report?reportId=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxxxx:xxx)
at fire (jquery-1.10.2.js:3062)
at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
at Function.ready (jquery-1.10.2.js:447)
at HTMLDocument.completed (jquery-1.10.2.js:118)

...for the following lines:

report.on("loaded", function () {
console.log('report.on - loaded');
});

I am also receiving a permanent error which appears on embedding the report (powerbi.embed) of:

TypeError: Cannot read property 'replace' of undefined
at Function.Utils.raiseCustomEvent (util.ts:22)
at PowerBi.onReceiveMessage (core.ts:197) []

Any help would be much appreciated?

Thanks,

Tristan

Tristan · ‎03-17-2017

@Eric_Zhang

Thanks for the reply. My report variable is definately in the same context. Something very odd is happening here, I left things as they were yesterday evening, came into work this morning, read your post, and ran my project without any errors.

The only thing I can think of is that when I created my MVC project I downloaded the Microsoft Power BI for ASP.NET MVC package. When I encountered this problem, I checked the versions installed for each of the dependant Power BI packages and noticed that all where the latest except for the Microsoft.PowerBI.Javascript package that although was the same version as the other Power BI packages v1.1.0 it was not the latest. The latest version was several version newer and so installed that and did some unsuccessful testing and then created this post.

My code:

$(function () {

            var container = $('#powerBIContainer');           
            var accessToken = container.attr('powerbi-access-token');             
            var embedUrl = container.attr('powerbi-embed-url');  
            var biType = container.attr('powerbi-type');
            var reportId = container.attr('powerbi-report-id');
           
            var config = {
                type: biType,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: reportId,                
                settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
                }
            };

            var reportContainer = $('#powerBIContainer')[0];
            var report = powerbi.embed(reportContainer, config);
            
            report.on("loaded", function () {            
                console.log('report.on - loaded');                
            });
});

All is still working, thanks again.

View solution in original post

Eric_Zhang · ‎03-17-2017

@Tristan

The report.on should work based on my test. Ensure that var report is in the correct context.

<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">
window.onload = function () {  
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'Token',    
	id: 'reportid',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=d99e763f-xxxx' 

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
 
report.on('loaded', function() {
console.log('report.on - loaded');
});

}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

</html>

Tristan · ‎03-17-2017

@Eric_Zhang

Thanks for the reply. My report variable is definately in the same context. Something very odd is happening here, I left things as they were yesterday evening, came into work this morning, read your post, and ran my project without any errors.

The only thing I can think of is that when I created my MVC project I downloaded the Microsoft Power BI for ASP.NET MVC package. When I encountered this problem, I checked the versions installed for each of the dependant Power BI packages and noticed that all where the latest except for the Microsoft.PowerBI.Javascript package that although was the same version as the other Power BI packages v1.1.0 it was not the latest. The latest version was several version newer and so installed that and did some unsuccessful testing and then created this post.

My code:

$(function () {

            var container = $('#powerBIContainer');           
            var accessToken = container.attr('powerbi-access-token');             
            var embedUrl = container.attr('powerbi-embed-url');  
            var biType = container.attr('powerbi-type');
            var reportId = container.attr('powerbi-report-id');
           
            var config = {
                type: biType,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: reportId,                
                settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
                }
            };

            var reportContainer = $('#powerBIContainer')[0];
            var report = powerbi.embed(reportContainer, config);
            
            report.on("loaded", function () {            
                console.log('report.on - loaded');                
            });
});

All is still working, thanks again.