Uncaught reference error lift ajax is not defined

Question

I'm trying to create a Lift chat server. I've taken everything straight from the Lift book that is linked to from Lift's main website. Upon running it, I cannot submit my messages because liftAjax is undefined and causes an error that appears in my chrome console.

Correct me if I'm wrong, but shouldn't Lift generate the liftAjax stuff upon starting up the website? I have a feeling I could import liftAjax myself from some source and it would work, but I don't feel I should have to do this.

This is my index.html file.

<!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>Home</title></head>
<body class="lift:content_id=main">
    <div id="main" class="lift:surround?with=default;at=content">
        <!-- the behavior of the div -->
        <div class="lift:comet?type=Chat">Some chat messages
            <ul>
                <li>A message</li>
                <li class="clearable">Another message</li>
                <li class="clearable">A third message</li>
            </ul>
        </div>
        <div>
            <form class="lift:form.ajax">
                <input class="lift:ChatIn" id="chat_in" />
                <input type="submit" value="Say Something" />
            </form>
        </div>
    </div>
  </body>
</html>

This is what is generated:

<?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">
<div id="main" xmlns="http://www.w3.org/1999/xhtml">
    <!-- the behavior of the div -->
    <div id="F156429460218VSI1GX_outer" style="display: inline">
        <div id="F156429460218VSI1GX" style="display: inline">
            <div xmlns="http://www.w3.org/1999/xhtml">Some chat messages
                <ul>
                    <li></li>
                </ul>
      </div><script type="text/javascript">
// <![CDATA[
/* JSON Func comet $$ F156429460221QEXVXK */function F156429460221QEXVXK(obj) {liftAjax.lift_ajaxHandler('F156429460221QEXVXK='+ encodeURIComponent(JSON.stringify(obj)), null,null);}
// ]]>
</script></div><script type="text/javascript">
// <![CDATA[
var destroy_F156429460218VSI1GX = function() {}
// ]]>
</script></div>

      <div>
        <form id="F156429460223BHVYIM" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F156429460223BHVYIM&quot;).serialize(), null, null, &quot;javascript&quot;);return false;">

Note: the error happens on the above line

<input name="F1564294602245ECYAU" id="chat_in" xmlns="http://www.w3.org/1999/xhtml" />
<input value="Say Something" type="submit" xmlns="http://www.w3.org/1999/xhtml" />
</form>
</div>
</div>

I'm just not really sure what could be causing this. I'm just starting to learn Lift so I do not know much. Am I missing something?

If you need more information, such as build.sbt or other files just let me know and I can post them as well.

Sorry if I do not know lift, but why is there a scala tag here? — skiwi
It is really not clear what problem you are experiencing. What are you expecting to happen? What do you feel the HTML should look like? Also, did you receive any specific error messages? — jcern
@skiwi, Lift is a scala based web framework which is probably why it was tagged scala. While he didn't post any code in the question, I suppose the answer could end up utilizing it. — jcern

prayagupa prayagupa · Accepted Answer · 2014-05-08T21:10:03

In my case, I was missing following body part that automatically seems to source liftAjax.

<body class="lift:content_id=main">
    <div id="main" class="lift:surround?with=default;at=content">
           ......
    </div>
</body>

But, in another case, sourcing jquery manually would work with JQuery module injected in Boot.scala.

<script id="jquery" src="/classpath/jquery.js" type="text/javascript"></script>

Uncaught reference error lift ajax is not defined

2 Answers