views:

80

answers:

1

I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:

Summary

I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.

Currently I cannot get this to work when using the Lift framework.

Source File

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

The Error

If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.

But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:

Chrome:

Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7

Firefox (Firebug):

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

Comparing the Sources in Browser

When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:

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

Questions

Does anyone have an idea why this happens?

If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?

Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...

Thanks!

+1  A: 

I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:

LiftRules.useXhtmlMimeType = false
Aaron