Update panel asyn post back does not work with FireFox in outlook web add-in

Question

I used asp.net to build the back end of my outlook web add-in.

I have a update panel and two drop down lists inside it.The first drop down has its autopostback set to true and upon the onChange event, the code behind will re-populate the second drop down according to the selection of the first drop down. So the second drop down depends on the first one.

This works fine with Chrome, IE.

But When I run the add-in in office 365 with Firefox, the re-population does not happen. I can see that the event is hit in the back-end, but the UI is not changed.

In the console I have this error TypeError: Sys.WebForms is undefined

Interestingly, if I run the app in normal Firefox window it would work, but when ran in office 365 with firefox, it does not. I think it is because it is run inside the iframe , and iframe does not really support update-panel . But IE and Chrome does not have this problem.

Update:

1, if the update does not happen, I can right click and update the iframe and usually it will work.

2, Before opening the add-in, if I open the console and clear the log, and then use the add-in, it will work.

Answer 1

I ended up fixing it by putting the Office.js reference at the end in the head section. Seems like if the Outlook web add-in run in Firefox, Firefox will stop executing JS code if encountered with even one error. And if I put the Office.js at the front, the library I use Materialize will cause an error, preventing a postback from happening, So the UI is not updated.