zone.js: 140 Uncaught TypeError: Cannot read property 'remove'

Question

• I am new to kendo ui.
• I developed prototype in my fiddle. delete confirmation window is working fine there.
• but when I integrate in my codebase I am getting error Cannot read property 'remove' at the line pai_to_delete.remove();
• can you guys tell me how to fix it.
• providing my code below.

updated

-may be I did not explain you properly...how my ui looks is when I click a link a big popup opens with a grid...in that grid when i click a column a small popup with delete option opens up...when I click the delete option a confirmation window opens... - when I use native js confirm method it works fine..I think that time its referring correctly... - but when I use kendo ui popup it does not work fine... - is my pai_to_delete not referring properly when I use kendo ui...since its referring to that div not the parent div i think so.

prototype fiddle

http://jsfiddle.net/amu6tw2a/

• whole code I am not able to paste in my question so I am pasting in fiddle, relevant code I am pasting below

https://jsfiddle.net/44tLx225/

zone.js: 140 Uncaught TypeError: Cannot read property 'remove'
of null
at HTMLButtonElement.eval(swimming - jumpings.ts: 990)
at HTMLDocument.dispatch(jquery - 2.2.3. js: 4737)
at HTMLDocument.elemData.handle(jquery - 2.2.3. js: 4549)
at ZoneDelegate.invokeTask(zone.js: 236)
at Zone.runTask(zone.js: 136)
at HTMLDocument.ZoneTask.invoke(zone.js: 304)


$(".tiger").bind("click", function(e) {

  let that = this;





  $(".pai-del-menu").blur(function() {
    $(this).hide();
    pai_to_delete = null;
  });

  $(".pai-del-menu").click(function() {
    $(this).hide();
    //let popup = $("#deletePopup").data("kendoWindow").center().open();
    if (pai_to_delete != null) {
      //$('.addELFDocumentForm').show();
      //alert("Are you sure you want to delete the selected jumping");

      var kendoWindow = $("<div />").kendoWindow({
        title: "Confirm",
        resizable: false,
        modal: true,
        height: 100,
        width: 400
      });

      kendoWindow.data("kendoWindow")
        .content($("#delete-confirmation").html())
        .center().open();

      $(jumping).on("click", "#playerDocumentOk", function() {
        pai_to_delete.remove();
        kendoWindow.data("kendoWindow").close();
      })


      $(jumping).on("click", "#playerDocumentCancel", function() {
        kendoWindow.data("kendoWindow").close();
      })

      //pai_to_delete.remove();
    }

  });


  var record_x = e.pageX;
  var record_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;

  $(".pai-del-menu").css({
    left: record_x,
    top: record_y
  });

  $(".pai-del-menu").fadeIn(200);

  $(".pai-del-menu").show();
  $(".pai-del-menu").attr('tabindex', -1).focus();
  pai_to_delete = $(this).parent().parent();

});

works with js native confirm method

$(".tiger").bind("click", function(e) {

      $(".pai-del-menu").blur(function() {
        $(this).hide();
        pai_to_delete = null;
      });

      $(".pai-del-menu").click(function() {
        $(this).hide();
        if (pai_to_delete !== null) {
          //alert("Are you sure you want to delete the selected document");
          //confirm("Are you sure you want to delete the selected document");

          var r = confirm("Are you sure you want to delete the selected document");
          if (r == true) {
              //txt = "You pressed OK!";
              pai_to_delete.remove();
          } else {
              //txt = "You pressed Cancel!";
          }
          //pai_to_delete.remove();
        }

      });


      var pai_x = e.pageX;
      var pai_y = e.pageY - $(".navHeaderBox").height() - $(".breadCrumbBox").height() - 20;

      $(".pai-del-menu").css({
        left: pai_x,
        top: pai_y
      });

      $(".pai-del-menu").fadeIn(200);

      $(".pai-del-menu").show();
      $(".pai-del-menu").attr('tabindex', -1).focus();
      pai_to_delete = $(this).parent().parent();

    });

Answer 1

The key difference between native confirm method and custom modal window - native confirm method is synchronous.

When method is synchronous and you clicks Ok/Cancel in native confirm dialog, $(".pai-del-menu").blur even occurs, but executes only after $(".pai-del-menu").click was finished, so everything works fine.

When method is asynchronous and you clicks Ok/Cancel on modal window, $(".pai-del-menu").blur even occurs and executes immediately, removing pai_to_delete reference, so inside $(".pai-del-menu").click event pai_to_delete is already null.

All you need is to assign pai_to_delete to another variable right before kendoWindow creation and use it inside $(".pai-del-menu").click event:

$(".pai-del-menu").blur(function() {
  $(this).hide();
  pai_to_delete = null;
});

$(".pai-del-menu").click(function() {
  $(this).hide();
  if (pai_to_delete != null) {
    var paiToDelete = pai_to_delete;  // <----
    var kendoWindow = $("<div />").kendoWindow({
      title: "Confirm",
      resizable: false,
      modal: true,
      height: 100,
      width: 400
    });

    kendoWindow.data("kendoWindow")
      .content($("#delete-confirmation").html())
      .center().open();

    $(jumping).on("click", "#playerDocumentOk", function() {
      paiToDelete.remove();  // <----
      kendoWindow.data("kendoWindow").close();
    });

    $(jumping).on("click", "#playerDocumentCancel", function() {
      kendoWindow.data("kendoWindow").close();
    });
  }
});