Search code examples
sapui5

Error: oDialog.open Is Not a Function

I'm getting this error while following the Walktrough. I can't see what's wrong with the code.

HolaPanel.controller.js?eval:28 Uncaught TypeError: oDialog.open is not a function
at f.openDialog (HolaPanel.controller.js?eval:28)
at f.a.fireEvent (EventProvider-dbg.js:228)
at f.a.fireEvent (Element-dbg.js:427)
at f.firePress (ManagedObjectMetadata-dbg.js:428)
at f.d.ontap (eval at evalModuleStr (jquery.sap.global-dbg.js:3425), :820:179)
at f.a._handleEvent (Element-dbg.js:162)
at constructor.U._handleEvent (UIArea-dbg.js:828)
at HTMLBodyElement.dispatch (jquery-dbg.js:4737)
at g (jquery-mobile-custom-dbg.js:1972)
at HTMLBodyElement.q (jquery-mobile-custom-dbg.js:2063)
openDialog @ HolaPanel.controller.js?eval:28
a.fireEvent @ EventProvider-dbg.js:228
a.fireEvent @ Element-dbg.js:427
(anonymous) @ ManagedObjectMetadata-dbg.js:428
d.ontap @ Button-dbg.js:269
a._handleEvent @ Element-dbg.js:162
U._handleEvent @ UIArea-dbg.js:828
dispatch @ jquery-dbg.js:4737
g @ jquery-mobile-custom-dbg.js:1972
q @ jquery-mobile-custom-dbg.js:2063
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549
trigger @ jquery-dbg.js:7819
(anonymous) @ jquery-dbg.js:7903
each @ jquery-dbg.js:365
each @ jquery-dbg.js:137
trigger @ jquery-dbg.js:7902
P @ jquery-mobile-custom-dbg.js:1543
R @ jquery-mobile-custom-dbg.js:1553
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549

And this is my code:

<core:FragmentDefinition 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m">
    <Page title="Title">
        <content>
             <Dialog
              id="idDialog"
              title="Bienvenido {/recipient/name}">
                  <Toolbar>
                    <ToolbarSpacer/>
                        <Image
                            busy="false"
                            busyIndicatorDelay="1000"
                            visible="true"
                            src="https://www.kaufmannsf.cl/img/logos/img_kaufmann.png"
                            mode="Image"
                            backgroundSize="cover"/>                
                    <ToolbarSpacer/>
                  </Toolbar>
                   <beginButton>
                     <Button
                        text="{i18n>dialogCloseButtonText}"
                        press="onCloseDialog"/>
                  </beginButton>
              </Dialog>
        </content>
    </Page>
</core:FragmentDefinition>

And this is the controller of the view that contains the dialog:

openDialog : function () {
    var oView = this.getView();
    var oDialog = oView.byId("idDialog");
    // create dialog lazily
    if (!oDialog) {
        // create dialog via fragment factory
        oDialog = sap.ui.xmlfragment(oView.getId(), "opensap.myapp.view.HelloDialog");
        oView.addDependent(oDialog);
    }
    oDialog.open();
},

onCloseDialog : function() {
    this.getView().byId("idDialog").close();
}

Also I have this error:

Failed to load resource: the server responded with a status of 404 (Not Found) sap-ui.core.js

I don't know if it's related with the other.

Solution

  • As @matbtt said, the <Page> was killing the execution when trying to open. Delete the <Page> in your fragment as he said.

    Then, to access the onCloseDialog event handler, you need to pass the controller to the Dialog when instantiating it with the sap.ui.xmlfragment factory function.

    Just add this as third parameter:

    oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog", this);