Uncaught TypeError: this.oDialog.open is not a function

[Former Member]

Hello Experts,

"Uncaught TypeError: this.oDialog.open is not a function" error comes when running sap ui5 app in browser. Here is the code I have written.

index.html

script src="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-xx-bindingSyntax="complex"

data-sap-ui-resourceroots='{>

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

new sap.m.Shell({

new sap.ui.core.ComponentContainer({

"sapui5project"

"content");

</script>

Initial.view.xml

App>

<pages>

<Page title="{i18n>MasterTitle}">

     <headerContent>

          <Button

          icon="sap-icon://hello-world"

          press="onOpenDialog"/>

     </headerContent>

          <content>

               <ObjectHeader title="{i18n>LabelText}"/>

          </content>

          <Panel headerText = "{i18n>PanelText}"  width="auto" height="30%">

     <headerToolbar>

     <Toolbar>

     <content>

          <Button text="{i18n>ButtonText}" icon="sap-icon://marketing-campaign" type="Emphasized" press ="getDialog"/>

     </content>

</Toolbar>

</headerToolbar>

</Panel>

</Page>

</pages>

</App>

Component.js

sap.ui.core.UIComponent.extend("sapui5project.Component", {

createContent : function() {

// create root view

var oView = sap.ui.view({

  id : "idInitial",

  viewName : "sapui5project.view.Initial",

  type : "XML",

  viewData : { component : this }

});

var oResourceModel = new sap.ui.model.resource.ResourceModel({bundleUrl:"i18n/messageBundle.properties"});

oView.setModel(oResourceModel, "i18n");

return oView;

}

});

Initial.contoller.js

sap.ui.controller("sapui5project.view.Initial", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf sapui5project.Initial
*/
// onInit: function() {
//
// },
oDialog: null,
getDialog : function () {
  console.log("in open dialog");
 
        if (!this._oDialog) {
           this.oDialog = sap.ui.xmlfragment("sapui5project.view.Dialog",this);
           this.getView().addDependent(this.oDialog);
           console.log("added dependent open dialog");
       //    this.getView().addDependent(this._oDialog);
       }
       // return this._oDialog.open();
           this.oDialog.open();
     }
/*onButtonPress: function(oEvent){
  //console.log(this);
 
     
          this._getDialog().open(); }*/

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf sapui5project.Initial
*/
// onBeforeRendering: function() {
//
// },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf sapui5project.Initial
*/
// onAfterRendering: function() {
//
// },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf sapui5project.Initial
*/
// onExit: function() {
//
// }

});

Dialog.fragment.js

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >

<Page title="Title">
  <content>
<Dialog title ="{i18n>DialogText}" icon="sap-icon://display" >

</Dialog>
  </content>
</Page>
</core:FragmentDefinition>

Now, the problem is whenever I run this code, its results in Uncaught TypeError: this.oDialog.open is not a function error if Component.js is specified.

If I execute the code in simple UI5 app, it works fine and displays the dialog as expected. I am not sure whats wrong in this code as xml fragment is creates dialog in controller file as per the api syntax.

[junwu · Accepted solution]

oDialog: null,

check if it is typo, seems " _" is missing.

[Former Member · Accepted solution]

Hi Jun,

Thanks for your reply.

Here is the function defined in controller:

_oDialog: null,

getDialog : function () {

  console.log("in open dialog");

        if (!this._oDialog) {

           this._oDialog = sap.ui.xmlfragment("sapui5project.view.Dialog",this);

           this.getView().addDependent(this._oDialog);

           console.log("added dependent open dialog");

        }

       // return this._oDialog.open();

           this._oDialog.open();

     }

Even after changing the variable name to _oDialog, the console has same error:- "Initial.controller.js:23 Uncaught TypeError: this._oDialog.open is not a function"

The same code works fine in simple sapui5 application and displays dialog without any error.

[junwu · Accepted solution]

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core" >
   <Dialog
  title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>

why you put page in your fragment?

[Former Member · Accepted solution]

Thanks Jun for pointing out the mistake.

[Jayakrishnan · Accepted solution]

Hi ,

  In your code, you have used two buttons.just call the dialogue in anyone of the button event methods.

try this:

onAddLocations: function(evt) // my button press event name

  {

  var context = evt.getSource().getBindingContext();

  this._LocationSelect().open();

  },

  _LocationSelect : function(){

  if (!this.diaL) {

  this.diaL = sap.ui.xmlfragment("sap.ui.demo.myFiori.util.AddSiteLocation", this);

  var oRowsModel = new sap.ui.model.json.JSONModel("model/Site_Locations.json");

  this.diaL.setModel(oRowsModel);

  this.diaL.setRememberSelections(true);

  }

  return this.diaL;  /// keep this variable diaL for this dialogue only. if you are using diff dialogue function change the name .

  },

Thank you,

Regards,

JK