Load content via Ajax (URL based)

[Christian]

Hi,

I want the content-part of my webapp to load via ajax, so when the user clicks a link the content is loaded without a refresh of the entire page. Additionally I want the ability to load the pages normally via URL for bookmarking and back button support. What would be the best approach for this in Lift? This example here: http://cookbook.liftweb.net/Show+a+template+inside+a+page+dynamically.html looks promising, but it doesn't seem right to do this with every page. Is there a better way? I'm sure someone did already something similar.

[Antonio Salazar Cardozo]

While we haven't used it much in some time, we created a Layout class that we use instead of lift:surround. It automatically detects incoming AJAX requests and does not run the surround in those cases, instead returning only the markup within the lift:layout tags so your JavaScript can insert it where appropriate. This should be a reasonable implementation for current Lift:

https://gist.github.com/4019866

(Our implementation was using some outdated hacks.)

Additionally, because of how form fields on a page have their associated functions kept in memory server side, you need to look for the data-lift-gc attribute that the above snippet drops on content that is inserted in this way and use it to make additional Lift GC calls. The CoffeeScript in the second file does this.

Hope that helps!

Thanks,

Antonio

[Christian]

Thanks, that is exactly what I am looking for. There are two small errors in the snippet, maybe a scala version problem, but I fixed them already.

[Antonio Salazar Cardozo]

Probably because I took my local version, which we barely use anymore, and updated it to more recent Lift idioms without compiling it O:-)

Any chance you could let me know the changes so I can update the gist?

Thanks,

Antonio

[Christian]

Sorry for late response. I forgot about this.

This is the modified version:

package code.snippet

import net.liftweb.http.S

import scala.xml.Group

import scala.xml.NodeSeq

import net.liftweb.common.Full

import scala.xml.Elem

import scala.xml.UnprefixedAttribute

import scala.xml.Null

class Layout {

  def render(xhtml: NodeSeq) = {

    if (S.request.map(_.ajax_?) == Full(true)) {

      S.skipXmlHeader = true

      S.skipDocType = true

      /**

       * We add a data-gc-version attribute to the root element. This

       * attribute is read client-side to send a __Lift_GC message back to

       * the server to make sure we don't garbage collect fields associated

       * with this page. This page is rendered under a different version than

       * the original page itself, so we have to avoid garbage collecting

       * this page's version in addition to the base page.

       */

      val rendered = xhtml match {

        case group: Group =>

          group.find {

            case e: Elem => true

            case _ => false

          }.map {

            case e: Elem => e % (new UnprefixedAttribute("data-gc-version", S.renderVersion, Null))

          } getOrElse group

        case other => other

      }

      S.session.map { liftSession =>

        liftSession.processSurroundAndInclude("xhr page", rendered)

      } openOr rendered

    } else {

      

      val layoutFile =

        S.attr("is").map {

          file => if (file.startsWith("/")) file.substring(1) else ("layouts-hidden/" + file)} openOr "default"

      val insertionPoint = S.attr("at") openOr "content"

      

      <lift:surround with={ layoutFile } at={ insertionPoint }>{ xhtml }</lift:surround>

    }

  }

}

[Antonio Salazar Cardozo]

Hm. That's odd. Neither of the changes you made are things I would have expected to be broken. Which version of Scala are you running?

Thanks,

Antonio

[Christian]

2.9.2

[Christian]

I have one other question: Do you have any experience with Ajax - LiftScreen. It just won't work if I load the LiftScreen via ajax. Seems like there is a redirect going on or the events are not fired.