jquery UI Dialog doesn't see variables defined outside of the dialog

Issue

I have TypeScript closure with function body like this where constants defined outside of the dialog(). Inside the Dialog Save button, the variables are undefined. Please help? Thanks.

    const oldAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
    const newAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
    const updatedAnswers: Array<IUserAnswer> = new Array<IUserAnswer>();
    
    $('form').map(function(){  
        //.....omitted code to change the above variables
    }
    $("#dialog").dialog({
      resizable: true,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Save": function () {
          let thisUrl: string = $('#submit').attr('formAction');
          //ToDo: ajax post here
          let postBackModel: AjaxPostbackModel;
          postBackModel.NewAnswers = newAnswers;
          postBackModel.OldAnswers = oldAnswers;
          postBackModel.UpdatedAnswers = updatedAnswers;
          alert('ToDo: sending ajax postBackModel to ' + thisUrl);
        },
        Cancel: function () {
          $(this).dialog("close");
        }
      }
    });

Solution

Thanks for your response. I solved the problem. I didn't initialize the postBackModel in the Save. Here is the correction.

let postBackModel: AjaxPostbackModel = <AjaxPostbackModel>{};

utton block.

Answered By - user266909