title: Cannot see my javascript code in userCodeAppPanel
body: <p>This is code from a script contained in a Google Spreadsheet.  The only other code is an onOpen which creates and menu and a showDialog() function</p>
  
  <pre><code>function showDialog(){
    userInterface=HtmlService.createHtmlOutputFromFile('test');
    SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Testing Inputs');
  }
  </code></pre>
  
  <p><strong>This is my javascript</strong></p>
  
  <pre><code>&lt;script&gt;
      var idA=['pdCliT','pdLocT','pdTypS','pdNamT','pdSupT','pdOutS','pdGasT','pdFloS','pdAmiS','pdUopN','pdVolN','pdDru','pdLOMN'];
      $(function(){});
      function testInputs(){
        console.log('idA.join(\',\')= %s',idA.join(', '));
        for(var i=0;i&lt;idA.length;i++){
          var id='#' + idA[i];
          var type=String(idA[i]).slice(-1);
          console.log('idA[%d]=%s , id= %s',i,idA[i],id);  
          switch(type){
            case 'N':
              var min=$(id).attr(min);
              var max=$(id).attr(max);
              var val=$(id).val();
              console.log('type: number, min: %s, max: %s, val: %s',min,max,val);
              break;
            case 'T':  
              var val=$(id).val();
              console.log('type: text, value: %s',val);
              break;
            case 'S':
              console.log('value: %s',$(id).val());
              break;
            default:
              var val=$(id).val();
              console.log('value: %s', val);
          }
        }  
      }
      console.log('test code');
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>And this is what I see when I click on link associated with 'test code' in console.</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;style nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg"&gt;
      html, body, iframe {
          border: 0;
          display: block;
          height: 100%;
          margin: 0;
          padding: 0;
          width: 100%;
      }
  
      iframe#userHtmlFrame {
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
      }
  &lt;/style&gt;
  &lt;meta name="chromevox" content-script="no"&gt;
  &lt;script type="text/javascript" src="/static/macros/client/js/769718587-mae_html_user_bin_i18n_mae_html_user.js" nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg"&gt;&lt;/script&gt;
  &lt;script nonce="zBEN3oEdQQRu7CJxQEbQJdjrskg"&gt;
      maeInit_(true);
  &lt;/script&gt;
  &lt;iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"&gt;&lt;/iframe&gt;
  &lt;form id="example_form"&gt;&lt;/form&gt;
  </code></pre>
  
  <p><strong>This is the entire html file.</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base target="_top"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var idA=['pdCliT','pdLocT','pdTypS','pdNamT','pdSupT','pdOutS','pdGasT','pdFloS','pdAmiS','pdUopN','pdVolN','pdDru','pdLOMN'];
      $(function(){});
      function testInputs(){
        console.log('idA.join(\',\')= %s',idA.join(', '));
        for(var i=0;i&lt;idA.length;i++){
          var id='#' + idA[i];
          var type=String(idA[i]).slice(-1);
          console.log('idA[%d]=%s , id= %s',i,idA[i],id);  
          switch(type){
            case 'N':
              var min=$(id).attr(min);
              var max=$(id).attr(max);
              var val=$(id).val();
              console.log('type: number, min: %s, max: %s, val: %s',min,max,val);
              break;
            case 'T':  
              var val=$(id).val();
              console.log('type: text, value: %s',val);
              break;
            case 'S':
              console.log('value: %s',$(id).val());
              break;
            default:
              var val=$(id).val();
              console.log('value: %s', val);
          }
        }  
      }
      console.log('test code');
      &lt;/script&gt;
      &lt;style&gt;
      div#menu input[type=button]{margin:0 5px 5px 0;}
      div#content input, select{margin: 5px 2px;}
      #content{width:400px;}
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="menu"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;h1 id="hdg1"&gt;Basic Project Data Input&lt;/h1&gt;
      &lt;input type="text" id="pdCliT" value="Client Name" placeholder="Client" size="20" /&gt;&lt;label for="pdCliT"&gt;Client&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" id="pdLocT" value="Client Location" placeholder="Unit Type" size="20" /&gt;&lt;label for="pdLocT"&gt;Location&lt;/label&gt;&lt;br /&gt;
      &lt;select id="pdTypS" class="control"&gt;&lt;option value="Select Unit Type" selected&gt;Select Unit Type&lt;/option&gt;&lt;/select&gt;&lt;label for="pdTypS"&gt;Unit Type&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" id="pdNamT" value="Value 1" placeholder="Unit Name" size="20" /&gt;&lt;label for="pdNamT"&gt;Unit Name&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" id="pdSupT" value="Value 2" placeholder="Catalyst Supplier" size="20" /&gt;&lt;label for="pdSupT"&gt;Catalyst Supplier&lt;/label&gt;&lt;br /&gt;
      &lt;select id="pdOutS" class="control"&gt;&lt;option value="Select Catalyst Outcome" selected&gt;Select Catalyst Outcome&lt;/option&gt;&lt;/select&gt;&lt;label for="pdOutS"&gt;Catalyst Outcome&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" id="pdGasT" value="Value 3" placeholder="Carrier Gas" size="20" /&gt;&lt;label for="pdGasT"&gt;Carrier Gas&lt;/label&gt;&lt;br /&gt;
      &lt;select id="pdFloS" class="control"&gt;&lt;option value="Select Gas Flow" selected&gt;Select Gas Flow&lt;/option&gt;&lt;/select&gt;&lt;label for="pdFloS"&gt;Gas Flow&lt;/label&gt;&lt;br /&gt;
      &lt;select id="pdAmiS" class="control"&gt;&lt;option value="Select Amine Scrubbing" selected&gt;Select Amine Scrubbing&lt;/option&gt;&lt;/select&gt;&lt;label for="pdAmiS"&gt;Amine Scrubbing&lt;/label&gt;&lt;br /&gt;
      &lt;input type="number" id="pdUopN" value="5000" placeholder="Operating Pressure psig" size="20" min="0" max="10000" step="100" title="Not greater than 10000" /&gt;&lt;label for="pdUopN"&gt;Unit Operating Pressure, psig&lt;/label&gt;&lt;br /&gt;
      &lt;input type="number" id="pdVolN"  value="1000" placeholder="Reactor Value ft3" size="20" min="0" max="200000" step="1000" title="Not greater than 200000" /&gt;&lt;label for="pdVolN"&gt;Reactor Volume,ft3&lt;/label&gt;&lt;br /&gt;
      &lt;input type="number" id="pdDruN" value="200" placeholder="Drum of QTRX2" size="20" min="0" max="500" step="100" title="Not greater than 500"/&gt;&lt;label for="pdDruN"&gt;Drums of QTRX2&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" id="pdLOMT" value="Value 4" placeholder="Lead OM" size="20" /&gt;&lt;label for="pdLOMT"&gt;Lead OM&lt;/label&gt;&lt;br /&gt;
      &lt;input type="button" id="tstInputs" value="Test Inputs" onClick="testInputs();" /&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is what the console shows when I launch the dialog</strong></p>
  
  <pre><code>Unrecognized feature: 'picture-in-picture'.
  iframedAppPanel?mid=ACjPJvGGulDc8kqHqaTVmW8ouofBnAMf3yo988NOBs-h9XUGoRpmfzwLx1oicxsS_tKSejiCuGZgzG7Uk-hD97zxYEj_J7Qna3k88V4wF0VJZqY0qcngq85y83fmy-indV7uqhh-nwbcfmY:11 Unrecognized feature: 'vibrate'.
  userCodeAppPanel:2 Unrecognized feature: 'picture-in-picture'.
  userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
  userCodeAppPanel:30 test code
  2877393808-warden_bin_i18n_warden.js:202 To {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/2877393808-warden_bin_i18n_warden.js:186:252)"}
  </code></pre>
  
  <p>This is a simple file that I extracted from another project. I'm running it in a modeless dialog but I get the same problem in the web app which I've been debug using the console.</p>
  
  <p>I'd appreciate any ideas here.  I've tried going to settings and clicking on "Restore Defaults and Reload'.  I've been using the console for my debugging lately because I can't seem to figure this out.</p>
  
  <p>I'm wondering if it has anything to do with the picture in picture and vibrate warnings.  I googled them in different ways but couldn't find anything to help me.</p>
  
  <blockquote>
    <p>In answer to your question, <strong>"Can you reproduce when using native Javascript and not jQuery?"</strong> Sorry it took so long.</p>
  </blockquote>
  
  <p>Here's the HTML (somewhat simplified):</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;base target="_top"&gt;
    &lt;/head&gt;
    &lt;script&gt;
    window.onload=function(){
    console.log('onload has run');
    google.script.run
    .withSuccessHandler(displayDates)
    .getDates();
    }
    function displayDates(datObj){
      var s='';
      gdateObj=datObj;
      for(var i=0;i&lt;datObj.idA.length;i++){
        s+=datObj[datObj.idA[i]+'-html'];
      }
      s+='&lt;br /&gt;&lt;input type="button" value="Save Dates" onClick="saveChanges();" /&gt;';
      s+='&lt;input type="button" value="Get Dates" onClick="getDates();" /&gt;';
      s+='&lt;input type="button" value="Exit" onClick="google.script.host.close();" /&gt;';
      document.getElementById('dates').innerHTML=s;
      for(var i=0;i&lt;datObj.idA.length;i++){
        document.getElementById(datObj.idA[i]).setAttribute("value",formatDateTime(new Date(datObj[datObj.idA[i]])));
      }
    }
    function formatDateTime(dt){
      if(dt &amp;&amp; Object.prototype.toString.call(dt) === '[object Date]'){
        var M=dt.getMonth()+1;
        var d=dt.getDate();
        var h=dt.getHours();
        var m=dt.getMinutes();
        var s=dt.getSeconds();
        var MM=(M&lt;10)?String('0'+M):String(M);
        var dd=(d&lt;10)?String('0'+d):String(d);
        var hh=(h&lt;10)?String('0'+ h):String(h);
        var mm=(m&lt;10)?String('0'+m):String(m);
        var ss=(s&lt;10)?String('0'+s):String(s);
        var ds=dt.getFullYear() + '-' + MM + '-' + dd + 'T' + hh + ':' + mm;
        return ds;
      }else{
        throw("Error: Parameter dt is not a valid date");
      }
    }
    &lt;/script&gt;
    &lt;body&gt;
      &lt;div id="dates"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my console log:</p>
  
  <pre><code>Unrecognized feature: 'vibrate'.
  userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
  userCodeAppPanel:3 onload has run
  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)"}message: "There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit"name: "TransportError"stack: "TransportError: There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit↵    at new Co (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:178:339)↵    at Ho.q.Cd (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:186:350)↵    at Ai (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:76:228)↵    at zi (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:491)↵    at ui.m (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:438)↵    at Ai (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:76:228)↵    at zi (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:73:491)↵    at Ho.&lt;anonymous&gt; (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:185:159)↵    at on (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:143:304)↵    at po (https://docs.google.com/static/macros/client/js/1995166154-warden_bin_i18n_warden.js:178:252)"__proto__: C
  1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
  </code></pre>
  
  <p>Here's what the screen looks like it's all dates from  a spreadsheet:</p>
  
  <p><a href="https://i.stack.imgur.com/Kqn6q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kqn6q.jpg" alt="enter image description here"></a></p>
  
  <p>And here's what the source panel looks like when I follow the link to my javascript.  </p>
  
  <pre><code>&lt;!doctype html&gt;&lt;style nonce="TqICcsqvIDjfixWz6NYEPlNwdL0"&gt;html, body, iframe {border: 0; display: block; height: 100%; margin: 0; padding: 0; width: 100%;}iframe#userHtmlFrame {overflow-y: scroll; -webkit-overflow-scrolling: touch;}&lt;/style&gt;&lt;meta name="chromevox" content-script="no"&gt;&lt;script type="text/javascript" src="/static/macros/client/js/2261581559-mae_html_user_bin_i18n_mae_html_user.js" nonce="TqICcsqvIDjfixWz6NYEPlNwdL0"&gt;&lt;/script&gt;
  &lt;script nonce="TqICcsqvIDjfixWz6NYEPlNwdL0"&gt;maeInit_( true );&lt;/script&gt;&lt;iframe id="userHtmlFrame" allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *" src="/blank"&gt;&lt;/iframe&gt;&lt;form id="example_form"&gt;&lt;/form&gt;
  </code></pre>