使用 Lift 将 div 添加到 HTML 正文答案

【问题标题】：Adding divs to the HTML body using Lift使用 Lift 将 div 添加到 HTML 正文
【发布时间】：2010-08-06 11:39:19
【问题描述】：

我最近一直在玩 Scala/Lift/Comet/Ajax 等。我遇到了一个问题，归结为：

总结

当某个事件发生时，我想更新一个特定的div（通过 id）。如果div 尚不存在，则必须创建它并将其附加到 HTML 正文中。

目前我在使用 Lift 框架时无法使其工作。

源文件

LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function() {
            updateOrCreateMouseDiv('123', 'coords')
        });

        function updateOrCreateMouseDiv(uniqueId, coords) {
            if ($('#mouse_'+uniqueId).length == 0) {
                $('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
            }

            $('#mouse_'+uniqueId).html(coords)
        }
        // ]]>
    </script>
</head>
<body></body>
</html>

错误

如果我直接在浏览器 (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) 中打开上述文件，它可以工作，即创建一个新的 div。

但如果我通过 Lift/Jetty (http://localhost:8080/static/mouseViewTest) 运行它，我会收到以下 JavaScript 错误：

铬：

Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

火狐（萤火虫）：

An invalid or illegal string was specified" code: "12

在浏览器中比较来源

在浏览器中比较页面源时，我只能看到一个区别，即：Lift 在结束 </body> 标记之前添加了以下 JavaScript：

<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>    
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>

问题

有人知道为什么会这样吗？

如果我想将 JavaScript 代码移动到 Scala 文件中（使用 Lift 的 JavaScript 和 jQuery 支持），代码会是什么样子？

请注意：当我使用Jq("body") ~> JqAppend() 创建新的 div 时，它起作用了。我只是不知道如何检查 div id 是否已经存在。这就是为什么我将代码移到模板中，计划使用 Lift 的Call 函数来执行 JS 函数。那就是这些问题开始的时候......

谢谢！

【问题讨论】：

你的 JavaScript 中有一个小错误（应该如下所示）： $('body').append('
' +
谢谢维克多。我的第一反应是：“我应该抓住它，但肯定不会导致问题”。你猜怎么着？它做了。当我添加建议的引号时，错误消失并添加了 div。如果您将此作为答案发布，而其他人没有就发生这种情况的原因发布一个很好的解释，我会将您的答案标记为已接受。