On Closing Dialog: "Cannot read property 'getTargets' of undefined"

Question

I have a View "DescriptionWithBooking" and am trying to open another View ("EmailTicket") when the submit button is clicked on a Dialog which is in "DescriptionWithBooking" View. But it shows the error:

Cannot read property 'getTargets' of undefined.

DescriptionWithBooking.controller.js

sap.ui.define([
  'sap/m/Button',
  'sap/m/Dialog',
  'jquery.sap.global',
  'sap/m/Label',
  'sap/ui/layout/HorizontalLayout',
  'sap/ui/layout/VerticalLayout',
  'sap/m/Text',
  'sap/m/TextArea',
  'sap/m/MessageToast',
  'sap/ui/core/Fragment',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/Filter',
  'sap/ui/model/json/JSONModel',
  "sap/ui/core/routing/History"
], function(Button, Dialog, jQuery, Label, HorizontalLayout, VerticalLayout, Text, TextArea, MessageToast, Fragment, Controller, Filter, JSONModel, History) {
  "use strict";

  var CController = Controller.extend("Movie.controller.DescriptionWithBooking", {

    onInit: function() {
      // set explored app's demo model on this sample
      var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
      this.getView().setModel(oModel);
    },

    onExit: function() {
      if (this._oDialog) {
        this._oDialog.destroy();
      }
    },

    getRouter: function() {
      return sap.ui.core.UIComponent.getRouterFor(this);
    },

    handleSelectDialogPress: function(oEvent) {
      if (!this._oDialog) {
        this._oDialog = sap.ui.xmlfragment("Movie.view.Dialog", this);
        this._oDialog.setModel(this.getView().getModel());
      }
      // Multi-select if required
      var bMultiSelect = !!oEvent.getSource().data("multi");
      this._oDialog.setMultiSelect(bMultiSelect);
      // Remember selections if required
      var bRemember = !!oEvent.getSource().data("remember");
      this._oDialog.setRememberSelections(bRemember);
      // clear the old search filter
      this._oDialog.getBinding("items").filter([]);
      // toggle compact style
      jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
      this._oDialog.open();
    },

    handleSearch: function(oEvent) {
      var sValue = oEvent.getParameter("value");
      var oFilter = new Filter("Name", sap.ui.model.FilterOperator.Contains, sValue);
      var oBinding = oEvent.getSource().getBinding("items");
      oBinding.filter([oFilter]);
    },

    handleClose: function() {
      var dialog = new Dialog({
        title: 'Confirm',
        type: 'Message',
        content: [
          new Label({
            text: 'Want to add more other people else continue ?',
            labelFor: 'submitDialogTextarea'
          }),
          new sap.ui.commons.TextArea('submitDialogTextarea', {
            liveChange: function(oEvent) {
              var sText = oEvent.getParameter('value');
              var parent = oEvent.getSource().getParent();
              parent.getBeginButton().setEnabled(sText.length > 0);
            },
            width: '100%',
            height: '100%',
            placeholder: 'Any other person for movie. ex: Swapnil Garg : Friend'
          })
        ],
        beginButton: new Button({
          text: 'Submit',
          enabled: true,
          press: function() {
            //Here I am calling the view
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.getTargets().display("email", {
              fromTarget: "book"
            });
            dialog.close();
          }
        }),
        endButton: new Button({
          text: 'Cancel',
          press: function() {
            dialog.close();
          }
        }),
        afterClose: function() {
          dialog.destroy();
        }
      });
      dialog.open();
    },

    onBack: function() {
      var oHistory, sPreviousHash;
      oHistory = History.getInstance();
      sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        this.getRouter().getTargets().display("home", {
          fromTarget: "book"
        });
      }
    }
  });

  return CController;
});

manifest.json:

"routes": [{
  "name": "apphome",
  "target": "home"
}, {
  "name": "bookmovie",
  "target": "book"
}, {
  "name": "emailticket",
  "target":"email"
}],
"targets": {
  "home": {
    "viewName": "View1",
    "viewLevel" : 1
  },
  "book": {
    "viewPath": "Movie.view",
    "viewName": "DescriptionWithBooking",
    "viewLevel": 2
  },
  "email": {
    "viewPath": "Movie.view",
    "viewName": "EmailTicket",
    "viewLevel": 3
  }
}

Answer 1

inside submit function this have function scope.

**//Here I am calling the view
            var oRouter =  sap.ui.core.UIComponent.getRouterFor(this);

instead copy this reference to a variable inside controller's handleClose function like

var that = this;

then use

**//Here I am calling the view
            var oRouter =  sap.ui.core.UIComponent.getRouterFor(that);