Javascript jQueryUI对话框上的按钮是否必须取消公告？_Javascript_Jquery_Jquery Ui_Google Apps Script

Javascript jQueryUI对话框上的按钮是否必须取消公告？

javascript jquery jquery-ui google-apps-script

Javascript jQueryUI对话框上的按钮是否必须取消公告？,javascript,jquery,jquery-ui,google-apps-script,Javascript,Jquery,Jquery Ui,Google Apps Script,我一直在尝试在我最初在AppMaker中编写的应用程序中使用一些JQuery UI对话框，我希望将其作为常规web应用程序使用。但我遇到了一些问题，事情发生的频率比预期的要高这段代码是一个大得多的应用程序的一部分，因为我发现它通过减少我必须处理的东西的数量来帮助解决问题。当代码进入html页面时，它会去读取特定日历上的事件，并显示它们以及允许用户编辑和保存每个事件描述以及删除事件的按钮。在本例中，我还添加了一些额外的Sav和Edt按钮，除了它们不使用对话框外，它们执行相同的操作。如下图所示

我一直在尝试在我最初在AppMaker中编写的应用程序中使用一些JQuery UI对话框，我希望将其作为常规web应用程序使用。但我遇到了一些问题，事情发生的频率比预期的要高

这段代码是一个大得多的应用程序的一部分，因为我发现它通过减少我必须处理的东西的数量来帮助解决问题。当代码进入html页面时，它会去读取特定日历上的事件，并显示它们以及允许用户编辑和保存每个事件描述以及删除事件的按钮。在本例中，我还添加了一些额外的Sav和Edt按钮，除了它们不使用对话框外，它们执行相同的操作。如下图所示

按下左下角的“编辑”按钮时，会出现如下对话框：

如果按下事件描述下的编辑按钮，将启动一个对话框，其中包含文本区域中的事件描述。如果您按下对话框上的“保存”按钮，则应将该偶数描述保存回日历上的事件描述，然后再次显示事件。但如果按下编辑按钮，然后按下下面的保存按钮七次，则控制台输出为：

对于每个openEventDescriptionEditDialog:idS=05，应该有一个saveEventDescription:idS=05和一个userCodeAppPanel:6 DispatEvents（）。有时，日志显示的是事件的数量，其数字在左侧。它们同时发生，因为它们位于.withSuccessHandler回调上。但是你可以看到，第一次你只得到一个，第二次你得到两个，第三次3，第四次5，第五次5等等

/*
Unrecognized feature: 'vibrate'.
userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
userCodeAppPanel:46 My code
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:194 Co {message: "There was an error during the transport or process…this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran…/js/1995166154-warden_bin_i18n_warden.js:178:252)"}
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Remove the if alreadySent routine.
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 26307.999999999993, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=First Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=First Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 38723.69999999955, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Second Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 38723.69999999955, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Second Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
2userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Second Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
3userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Third time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
4userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
5userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
5userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …}
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
7userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
*/

然后我用Edt和Sav按钮做了同样的事情。我使用了与对话框方法相同的功能，但我没有进入对话框，而是将文本放入顶部的文本区域并编辑，然后按下Sav按钮，在多次操作后，我发现它工作得非常好

我已经尽可能地减少了代码

代码.gs

function dialogtestStartUp()
{
  SpreadsheetApp.getUi().createMenu('Dialog Test') 
    .addItem('Test Dialog', 'showDialogTest')
    .addToUi();  
}
function setupStartUpTrigger(){
  if(!isTrigger('dialogtestStartUp')){
    ScriptApp.newTrigger('dialogtestStartUp').forSpreadsheet(gSSID).onOpen().create();
  }
}

function showDialogTest(){
  var ui=HtmlService.createHtmlOutputFromFile('dialogtest').setHeight(550).setWidth(400);
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Dialog Test')
}


function saveMyEventDescription(evObj){
  Logger.log('saveMyEventDescription:\nevObj.text=%s\nevObj.calId=%s\nevObj.evId=%s\nevObj.idS=%s',evObj.text,evObj.calId,evObj.evId,evObj.idS);
  CalendarApp.getCalendarById(evObj.calId).getEventById(evObj.evId).setDescription(evObj.text);
  return true;
} 

function getEventDescription(evObj){
  evObj['text']=CalendarApp.getCalendarById(evObj.calId).getEventById(evObj.evId).getDescription();
  Logger.log('getEventDescription:\nevObj.text=%s\nevObj.calId=%s\nevObj.evId=%s\nevObj.idS=%s',evObj.text,evObj.calId,evObj.evId,evObj.idS);
  return evObj;
}

function getMyEvents(){//This is where the event descriptions and buttons are generated.  Then they're loaded into the html page when it loads.
  Logger.log('getMyEvents');
  var allCals=CalendarApp.getAllCalendars();
  var s=Utilities.formatString('<strong>%s</strong>',Utilities.formatDate(new Date(),Session.getScriptTimeZone(),"E MMM d, yyyy HHmm"));
  var min=60 * 1000;
  var hr=60 * min;
  var day=24 * hr;
  var wk=7 * day;
  var start = new Date(new Date().setHours(0,0,0));
  var end=new Date(start.valueOf() + (5 * wk));
  var incl=['Daily Events'];
  for(var i=0;i<allCals.length;i++)
  {
    if(incl.indexOf(allCals[i].getName())>-1)
    {
      s+=Utilities.formatString('<br /><strong>%s</strong>',allCals[i].getName());
      var events=allCals[i].getEvents(start, end);
      if(events)
      {
        s+='<br /><ul>';
        for(j=0;j<events.length;j++)
        {
          var calId=allCals[i].getId();
          var evId=events[j].getId();
          var evDesc=events[j].getDescription();
          var idS=String(i)+String(j);
          if(events[j].isAllDayEvent())
          {
            s+=Utilities.formatString('<li><strong>%s</strong>-AllDay %s <input type="hidden" id="ids-%s" value="%s,%s" /> <input type="button" title="Move or Delete Event Dialog" name="MoveOrDeleteEvent" value="Remove" onClick="movdelDialog(\'ids-%s\',\'%s\',\'%s\');" /></li>',events[j].getTitle(),Utilities.formatDate(events[j].getStartTime(),Session.getScriptTimeZone(),"E MMM d"),idS,calId,evId,idS,calId,evId);
          }
          else
          {
            s+=Utilities.formatString('<li><strong>%s</strong>-%s <input type="hidden" id="ids-%s" value="%s,%s" /><input type="button" title="Move or Delete Event Dialog" name="MoveOrDeleteEvent" value="Remove" onClick="movdelDialog(\'%s\',\'%s\',\'%s\');" /></li>',events[j].getTitle(),Utilities.formatDate(events[j].getStartTime(),Session.getScriptTimeZone(),"E MMM d - HHmm"),idS,calId,evId,idS,calId,evId);
          }
          s+=Utilities.formatString('<br /><div id="evdesc-%s">%s</div>&nbsp;&nbsp;<input id="edtbtn-%s" type="button" value="Edit" title="Edit Dialog" onClick="editEventDescription(\'%s\',\'%s\',\'%s\',\'%s\');" /></li>',idS,evDesc,idS,calId,evId,idS,evDesc);
          s+=Utilities.formatString('<input type="button" id="edt-%s" value="Edt" onClick="edtEvntDesc(\'%s\',\'%s\',\'%s\',\'%s\');" />',idS,calId,evId,idS,evDesc);
          s+=Utilities.formatString('<input type="button" id="sav-%s" value="Sav" onClick="savEvntDesc(\'%s\',\'%s\',\'%s\',\'%s\');" />',idS,calId,evId,idS,evDesc);
        }
        s+='</ul>';
      }
    }
  }
  return s;
}

function delMyEvents(idA)
{
  if(idA)
  {
    for(var i=0;i<idA.length;i++)
    {
      var cal=CalendarApp.getCalendarById(idA[i][0]);//calendarId
      cal.getEventById(idA[i][1]).deleteEvent();//eventId
    }
  }
  return true;
}

function getTimeStamp()
{
  return Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM dd, yyyy hh:mm a");
}

所以我的问题是，你真的需要消除对话开关的影响吗？所以我希望有人知道这里发生了什么

在收到您的有用建议后，我对html文件进行了大部分更改，如下所示。重要的是不要反复运行初始化命令

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script>
    var gEvObj={};
    $(function(){
      dispEvents();
      $('#dialog-1').dialog({autoOpen: false, width: 250, height: 300, resizable: true, draggable: true});
      $('#dialog-1 #saveBtn').button().click(function(e){
        saveEventDescription();
      });
      $('#dialog-1 #clsBtn').button().click(function(e){
        $(this).parent().dialog('close');
      });
    });
    function dispEvents(){
       console.log('dispEvents()');
      google.script.run
        .withSuccessHandler(upDateEvents)
        .getMyEvents();
    }
    function upDateEvents(hl){
      $('#hotbox').html(hl);
    }
    function editEventDescription(calId,evId,idS,evDesc){
      gEvObj={calId:calId,evId:evId,idS:idS,text:evDesc};
      $('#dialog-1 #evdesc').val(gEvObj.text);
      $('#dialog-1').dialog("open");
    }
    function saveEventDescription(){
      gEvObj.text=$('#dialog-1 #evdesc').val();
      google.script.run
      .withSuccessHandler(function(){
        dispEvents();
        $('#dialog-1').dialog('close');
      })
      .saveMyEventDescription(gEvObj);
    }
    console.log("My code");
  </script>
  <style>
    #dialog-1{display:none;}
    input[type="button"]{background-color:#ffffff;border:1px solid #000;-webkit-appearance:none;}
    #dialogs input[type="button"]{margin:10px 0;}
  </style>
  </head>
  <body>
  <div class="container">
   <div id="hotbox"></div>
   </div>
   <input type="button" value="Display Events" onClick="dispEvents();" />
   <div id="dialogs">
   <div id="dialog-1" title="Edit Event Description">
     <textarea id="evdesc" cols="25" rows="6"></textarea>
     <input type="button" value="Save" id="saveBtn" title="Save Edits" /><br />
     <input type="button" value="Close" id="clsBtn" title="Close Dialog" />     
   </div>
   <input type="button" value="Close" onClick="google.script.host.close();" />
   </div>
 </body>
</html>


var gEvObj={}；
$（函数（）{
分散剂（）；
$（'#dialog-1'）.dialog（{autoOpen:false，宽度：250，高度：300，可调整大小：true，可拖动：true}）；
$（'#dialog-1#saveBtn'）。按钮（）。单击（函数（e）{
saveEventDescription（）；
});
$（'#dialog-1#clsBtn'）。按钮（）。单击（函数（e）{
$（this.parent（）.dialog（'close'）；
});
});
函数（）{
log（'dispatevents（）'）；
google.script.run
.withSuccessHandler（upDateEvents）
.getMyEvents（）；
}
函数更新事件（hl）{
$（'#hotbox'）.html（hl）；
}
函数editEventDescription（calId、evId、idS、evDesc）{
gEvObj={calId:calId，evId:evId，idS:idS，text:evDesc}；
$（'#dialog-1#evdesc'）.val（gEvObj.text）；
$（'dialog-1'）。对话框（“打开”）；
}
函数saveEventDescription（）{
gEvObj.text=$（'#dialog-1#evdesc'）.val（）；
google.script.run
.withSuccessHandler（函数（）{
分散剂（）；
$（'#dialog-1'）。dialog（'close'）；
})
.saveMyEventDescription（gEvObj）；
}
log（“我的代码”）；
#对话框-1{显示：无；}
输入[type=“button”]{背景色：#ffffff；边框：1px实心#000；-webkit外观：无；}
#对话框输入[type=“button”]{margin:10px 0；}

然后我进入了另一个项目，做了同样的事情，现在它也运行得非常顺利。谢谢你的帮助。非常感谢。

在代码的某个地方，您正在向相同的元素添加新的事件侦听器，以获得这些症状。在添加新的侦听器之前，请尝试使用

off（）

，我想这是因为我正在执行此

$（'#dialog-1'）。dialog（{autopen:true，width:250，height:300}）每次单击编辑按钮时。谢谢你的评论。我想是其他按钮造成了问题，不是吗？执行$（'#dialog-1#clsBtn'）.button（）。多次单击..
将在以前的侦听器的基础上每次添加一个新的侦听器，您不需要多次这样做。初始化小部件一次。要打开对话框时，请使用$（'#dialog-1'）。dialog（“打开”）我只是想用open来代替。谢谢你的建议
function openEventDescriptionEditDialog(evObj){
      console.log('openEventDescriptionEditDialog: idS=%s , text=%s',evObj.idS,evObj.text);    
      var alreadySent=false;//Added this to mitigate the problem
      $('#dialog-1').dialog({autopen:true,width:250,height:300});
      $('#dialog-1 #evdesc').val(evObj.text);
      $('#dialog-1 #saveBtn').button().click(function(e){
        e.preventDefault();
        console.log(e);//you will still see these on the console but only one saveEventDescription
        evObj.text=$('#dialog-1 #evdesc').val();
        if(!alreadySent){//Keeps the additional events from occuring
          saveEventDescription(evObj);
          alreadySent=true;
        }
        //$(this).parent().dialog('close');
      });
      $('#dialog-1 #clsBtn').button().click(function(e){
        $(this).parent().dialog('close');
      });
    }

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script>
    var gEvObj={};
    $(function(){
      dispEvents();
      $('#dialog-1').dialog({autoOpen: false, width: 250, height: 300, resizable: true, draggable: true});
      $('#dialog-1 #saveBtn').button().click(function(e){
        saveEventDescription();
      });
      $('#dialog-1 #clsBtn').button().click(function(e){
        $(this).parent().dialog('close');
      });
    });
    function dispEvents(){
       console.log('dispEvents()');
      google.script.run
        .withSuccessHandler(upDateEvents)
        .getMyEvents();
    }
    function upDateEvents(hl){
      $('#hotbox').html(hl);
    }
    function editEventDescription(calId,evId,idS,evDesc){
      gEvObj={calId:calId,evId:evId,idS:idS,text:evDesc};
      $('#dialog-1 #evdesc').val(gEvObj.text);
      $('#dialog-1').dialog("open");
    }
    function saveEventDescription(){
      gEvObj.text=$('#dialog-1 #evdesc').val();
      google.script.run
      .withSuccessHandler(function(){
        dispEvents();
        $('#dialog-1').dialog('close');
      })
      .saveMyEventDescription(gEvObj);
    }
    console.log("My code");
  </script>
  <style>
    #dialog-1{display:none;}
    input[type="button"]{background-color:#ffffff;border:1px solid #000;-webkit-appearance:none;}
    #dialogs input[type="button"]{margin:10px 0;}
  </style>
  </head>
  <body>
  <div class="container">
   <div id="hotbox"></div>
   </div>
   <input type="button" value="Display Events" onClick="dispEvents();" />
   <div id="dialogs">
   <div id="dialog-1" title="Edit Event Description">
     <textarea id="evdesc" cols="25" rows="6"></textarea>
     <input type="button" value="Save" id="saveBtn" title="Save Edits" /><br />
     <input type="button" value="Close" id="clsBtn" title="Close Dialog" />     
   </div>
   <input type="button" value="Close" onClick="google.script.host.close();" />
   </div>
 </body>
</html>