2017-08-31 8 views
0

を働いていません。Google Appsのスクリプト - Javascriptが私は、単純なWebアプリケーションを作成し、それが動作していない

Code.gs:

function doGet() {//I think this works 
    var output = HtmlService.createTemplateFromFile('index').evaluate(); 
    output.setSandboxMode(HtmlService.SandboxMode.IFRAME); 
    output.setTitle('email button'); 
    return output; 
} 

function getContent(filename) {//might work 
    Logger.log('getContent()'); 
    return HtmlService.createTemplateFromFile('javascriptCode').getRawContent(); 
} 

のindex.html:

<!DOCTYPE html> 
<html> 
    <body> 
    <form id="email_subscribe"> 
     <input type="email" name="email" id="email" placeholder="Enter your email"> 
     <input type="button" id="submitButton" value="Submit"> 
    </form> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" /> 
    <?!= getContent("javascript") ?> 

    </body> 
</html> 

javascriptCode.html:私は、このWebアプリケーションを実行すると、電子メールやボタンフィールドが正しくロード

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#submitButton").onclick(function() { 
     alert('thx for submitting'); 
    }); 
    }); 
</script> 

、ロガーは 'getContent()'をログに記録します。ただし、ボタンをクリックすると何も起こりません。私は間違って何をしていますか?

ありがとうございました

+0

、あなたはjavascriptをしていないjavascriptCodeに渡されたのgetContentを呼び出します。 –

答えて

0

コードにはほとんど誤りがありません。

  1. スクリプトタグは、自己終了タグではありません。
  2. jqueryののバージョン、いつかHTTPコンテンツ がブロックされますHTTPSサービスを提供する方が安全です。
  3. jqueryの onclickイベントがあります。をクリックしてください。をクリックしてください。

code.gs

function doGet() { 
    var output = HtmlService.createTemplateFromFile('index').evaluate(); 
    output.setSandboxMode(HtmlService.SandboxMode.IFRAME); 
    output.setTitle('email button'); 
    return output; 
} 

function getContent(filename) { 
    return HtmlService.createHtmlOutputFromFile(filename).getContent(); 
} 

index.htmlを

<!DOCTYPE html> 
<html> 
    <body> 
    <form id="email_subscribe"> 
     <input type="email" name="email" id="email" placeholder="Enter your email"> 
     <input type="button" id="submitButton" value="Submit"> 
    </form> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <?!= getContent("javascriptCode") ?> 

    </body> 
</html> 

javascriptCode.html

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#submitButton").click(function() { 
     alert('thx for submitting'); 
    }); 
    }); 
</script> 
0

シンプルなHTMLダイアログの例では、

私は通常の作業にそれらを取得するためのダイアログとしてこれらの事をテストします。これはダイアログとして機能し、doGetも含まれています。私はこれが役立つことを願っています私はあなたが行っていたときとまったく同じように行かなかったが、これはあなたがそのように動くのを助けるだろうと思う。

Code.gs:あなたのindex.htmlで

function doGet() 
{ 
    var output = HtmlService.createTemplateFromFile('webappdoesnotwork'); 
    return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) 
} 

function getEmail(email) 
{ 
    Logger.log(email); 
    return true; 
} 

function showDialog() 
{ 
    var output = HtmlService.createHtmlOutputFromFile('webappdoesnotwork'); 
    SpreadsheetApp.getUi().showModelessDialog(output, 'My WebApp'); 
} 

webappdoesnotwork.html

<!DOCTYPE html> 
    <html> 
     <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script> 
     function getEmail() 
     { 
     var email=$('#email').val(); 
     google.script.run 
      .withSuccessHandler(sayThanks) 
      .getEmail(email); 
     } 
     function sayThanks() 
     { 
     $('#saythanks').css('display','block'); 
     $('#controls').css('display','none'); 
     } 
     console.log('My Code'); 
    </script> 
     </head> 
     <body> 
     <div id="saythanks" style="display:none">Hey Thanks for Responding</div> 
     <div id="controls"> 
      <input type="text" id="email" size="35" placeholder="Enter your email"/> 
      <input type="button" id="submitButton" value="Submit" onClick="getEmail();"/> 
     </div> 
     </body> 
    </html> 
+0

入力いただきありがとうございます。インラインJavaScriptはGoogle Appsスクリプトで許可されていますか? –

+0

はい。非同期コールバックハンドラが標準のjavascriptやJQueryに比べて単純であるという顕著な例外を除いて、ダイアログは他のhtmlファイルとよく似ています。ところで、html入力タグのonClickプロパティを引き続き使用できます。クリック機能を割り当てるときは注意してください。ダイアログが実行されている間に変更を試みる場合は、未使用のクリック割り当てをアンバインドしてください。 – Cooper

関連する問題