我試圖通過Google Apps腳本創建一個基於html的應用程序,該應用程序具有常量標題和導航,然後將拉入文件的內容應用到頁面的第三個動態部分。在innerHtml上丟失Javascript功能
這一切都很順利,直到我嘗試插入我希望JQuery應用的輸入字段。這對我來說是一個學習項目,但我完全迷失在這裏。以下是轉載腳本的相關部分。
我的問題是,我使用窗體上的某些框的JQuery插件日期選擇器。現在,在code.gs文件中的第一個doGet函數從index.html中拉出的頁面上,它完全可以正常工作,然後如果在插入(通過innerhtml)到動態元素之後點擊加載newcust.html文件,datepicker插件不再適用於新插入的內容(如標籤「開始日期」下的那個)。日期輸入框自身加載,與newcust.html的其餘部分一樣,但它現在只是一個標準文本框。
另外,這是我的第一個項目,所以如果我的編碼風格不好,請原諒我。
code.gs
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('GAS Application').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}
的index.html
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<div id="top-banner">
<img src="bannertop.png" width="900" />
</div>
<div id="main-content">
<div id="navigation">
<div id="menu"><ul>
<li><a href="#" id="Home" class="link1">Home</a></li>
<li><a href="#" class="drop link2">Edit<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="height:72px;top:0px;">
<li><a href="#" id="NewCust" class="link2a">New Customer/Quote</a></li>
<li><a href="#" id="EditCust" class="link2b">Edit Customer</a></li>
<li><a href="#" id="DeleteCust" class='link2c'>Delete Customer</a></li>
</ul>
</ul>
</div>
</div>
<div id="page-wrap">
<div id="dynamic" class="">
<h3 align="center">Home</h3>
<p>Home Page Text</p>
<p>Please select a date below :</p>
click here : <input type="text" name="date" id="datepicker" />
</div>
</div>
</div>
<script>
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1,
});
</script>
<script>
$(document).ready(function() {
$("#GoHome").add("#NewCust").add("#EditCust").add("#DeleteCust").click(function() {
var incoming = this.id;
pushPageData(incoming);
}
function pushPageData(e) {
if (e == 'NewCust') {google.script.run.withSuccessHandler(updatePage).insertNewCust();}
else if (e == 'EditCust') {google.script.run.withSuccessHandler(updatePage).insertEditCust();}
else if (e == 'DeleteCust') {google.script.run.withSuccessHandler(updatePage).insertDeleteCust();}
} // these point to separate .gs files, I'll reproduce one below
function updatePage(data) {
var inframe = document.getElementById('dynamic');
inframe.innerHTML = data;
}
</script>
newcust.gs
function insertNewCust() {
var html = HtmlService.createHtmlOutputFromFile('newcust').getContent();
return html;
}
newcust.html
<h3>Add New Customer or Quote</h3>
<table class='first'><tr><td>
<form name='newcustomer' id='newcustomer'>
<fieldset>
<legend>General Information </legend>
<div class='col15'>
<label for='title'>Title:</label>
<select class='dropdown' name='title'>
<option value=''></option>
<option>Mr</option>
<option>Mrs</option>
<option>Miss</option>
<option>Ms</option>
<option>Dr</option>
</select>
</div>
<div class='col25'>
<label for='firstname'>First Name:</label>
<input name='firstname' type='text' style="default">
</div>
<div class='col25'>
<label for='surname'>Surname:</label>
<input name='surname' type='text' style="default">
</div>
<div style="clear: both; height: 5px;"></div>
<div class='col50'>
<label for='address'>Address:</label>
<input name='address1' type='text' placeholder="House Name/No. & Street" style="wide" size="40">
<input name='address2' type='text' placeholder="Estate" style="wide" size="40">
<input name='addresstown' type='text' placeholder="Town/City" style="wide" size="25">
<input name='addresspost' type='text' placeholder="Postcode" style="wide" size="10">
</div>
<div class='col20'>
<label for='tel'>Telephone:</label>
<input name='tel' type='text' size="15" class='tel'>
</div>
<div class='col25'>
<label for='email'>Email:</label>
<input name='email' type='text' size="25" placeholder='[email protected]'>
</div>
<div class='col15hide'>
<label for='startdate'>Start Date:</label>
<input type="text" name="startdate" id="datepicker" size="12" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
</form>
</td></tr></table>
CSS文件不包含
我猜問題是,你要調用的jQuery在你的index.html文件,但不是在newcust.html(一旦你改變網頁,jQuery是不再被調用)。您要麼必須將jQuery包含在始終屬於DOM的文件中,要麼將您的jQuery鏈接複製到newcust.html文件中。 – APAD1 2014-09-19 21:57:43
我會如何將它始終作爲DOM的一部分呢?我認爲,因爲newcust.html被插入到index.html中,所以會使用相同的腳本。情況並非如此嗎? – 2014-09-19 22:16:23