SP2013 SharePoint-hosted app Modal Dialog Error: Cannot read 'hiddenButtonValueBeforeDialog'

Question

I'm just trying to prove the concept of displaying a modal dialog in my SharePoint-hosted app page. I believe I've included the required js libraries and I give it more than enough time to load the libraries before I execute my function. The error I receive is:

Cannot read property 'hiddenButtonValueBeforeDialog' of undefined

I believe I have the libraries I need::

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>

Javascript:

function showDialog() {

var optDict = {
    width: 800,
    height: 500,
    url: 'http://www.google.com',
    title: "Upload your file"
};

try {
    SP.UI.ModalDialog.showModalDialog(optDict);
}
catch (err) {
    alert(err.message);
}

    return false;
}

Answer 1

The error Cannot read property 'hiddenButtonValueBeforeDialog' of undefined occurs since the sp.ui.dialog.js is globalized JavaScript library and the required resource file SP.Res.resx has not been loaded on the client side (SP.Res.hiddenButtonValueBeforeDialog is generated from this file).

Solution

1. ScriptResx HTTP Handler is used to load the content of resource files on the client side, the following line has to added:

   <script type="text/javascript" src="/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us"></script>
   

2. In addition, since there is a dependency for SP.UI.UIUtility namespace in sp.ui.dialog.js library, the sp.init.js JavaScript library has to be referenced:

   <script type="text/javascript" src="/_layouts/15/sp.init.js"></script>