如何让 jQuery mobile 使用应用程序脚本？

Posted 2023-05-09

技术标签:

【中文标题】如何让 jQuery mobile 使用应用程序脚本？【英文标题】：How do I get jQuery mobile to work with app script? 【发布时间】：2018-07-30 07:56:44 【问题描述】：

我正在尝试使用 google app 脚本、google sheet 和 jquery mobile 构建一个网络应用程序。

我的 html 仅显示为未格式化的文本，我在浏览器控制台中收到以下错误消息：

error message

我在这篇文章中注意到他们的 html 代码和我的一样，至少我认为是：

similar code

在他们发布的屏幕截图中，它显然可以正常工作，即使他们在缩放级别上有一个单独的问题。

这是我的html：

<!DOCTYPE html> 
<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<?!= include('javascript');?>
</head> 
<body> 

<div data-role="page" class="page" id="pgHome" data-title="My Page Title">

The rest of my html basically follows the boilerplate html from jquery.

这是我的应用脚本代码：

function doGet() 
return HtmlService.createTemplateFromFile('myHtml').evaluate().setTitle("TAH Inventory Management");


function include(filename) 
return HtmlService.createTemplateFromFile(filename).evaluate().getContent();

我的 JavaScript.html 文件包含用于从 google 表格填充 UL 的脚本。

知道为什么 jquery mobile 的结构或样式都不起作用吗？

我也尝试使用 jquery mobile 本身的 sn-p，但也没有用。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

我非常感谢在这方面能得到的任何帮助。提前致谢。

【问题讨论】：

【参考方案1】：

显然我的问题是 jquery mobile 和 jquery 3 之间的不兼容，如这篇文章所述：enter link description here

我将代码更改为以下内容，现在可以使用了！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">