Incremental update from Snippet

[Pablo Peraza]

Hello again fellow lift-ers!

I have a plain ol' html template which i transform in a snippet using css selectors. Regular stuff. The html is something like this:

<table class="lift:ListElements">

  <tbody>

    <tr class="iwilltransformthis">

      <td>...</td>

    </tr>

  </tbody>

</table>

The snippet goes likes this:

def render = {

  val elements = .. //load first 10 elements from db

  ".iwilltransformthis *" #> elements.map(/*transform _*/ )

}

Like i said, pretty easy. Now, to the "issue": 

I want to have a button that "loads the next 10 elements from the db" but i want to append them to the already drawn html (which contains the first 10 elements). Its lazy-loading elements from a db, but how can i append them to the already drawn elements?

See Google Plus orFacebook as examples. I know how to do "paging lazy-load", is just this especific type i'm having trouble with. Specialy, with the rendering/append stuff. I already have the logic for everything else.

You have my thanks!

[Diego Medina]

How about making your snippet a CometActor, and then use partialUpdate to load the next 10 items?

You could use jsonCall to send the comet actor a message with whatever search terms you need to populate the next 10 rows.

Regards

Diego

> --
> Lift, the simply functional web framework: http://liftweb.net
> Code: http://github.com/lift
> Discussion: http://groups.google.com/group/liftweb
> Stuck? Help us help you:
> https://www.assembla.com/wiki/show/liftweb/Posting_example_code

--
Diego Medina
Lift/Scala Developer
di...@fmpwizard.com
http://www.fmpwizard.com

[Pablo Peraza]

Thanks for your quick answer Diego!

I was trying to stay with just snippets but i don't mind going comet here.

Just, any pointers on using jsonCall, haven't used that before.

Thanks again for ALL the help you have given me!

[Diego Medina]

Hi Pablo,

I think you should be able to just a snippet, and have jsoncall return some js that would draw the next few rows, but I haven't done that yet.

For the comet path, here is a blog about jsoncall
http://blog.fmpwizard.com/back-button-and-bookmark-meet-lift-comet-revi

Regards

Diego

Diego
Sent from my android cell

--

[Pablo Peraza]

As always, thanks for the help!

[Pablo Peraza]

"I think you should be able to just a snippet, and have jsoncall return some js that would draw the next few rows, but I haven't done that yet."

Ok, i'm having a mental block here. I tried something but fail so hard that i better ask. Any pointers on doing that?

[Antonio Salazar Cardozo]

If you post an example project (http://www.assembla.com/spaces/liftweb/wiki/Posting_example_code ) someone can probably set it up for you so you can see the changes they make :)

Thanks,

Antonio

[Pablo Peraza]

Sure, i can do that!

[Pablo Peraza]

So, here is it, the example project on Github:

https://github.com/piousp/LazyLoad

[Chenguang He]

Nob Question,

What is the version of sbt in LazyLoad?

There is no "jetty-run"command?

Chenguang He

On Apr 12, 2012, at 10:13 PM, Pablo Peraza wrote:

So, here is it, the example project on Github:

https://github.com/piousp/LazyLoad

[Pablo Peraza]

Its 0.11 i think.

Instead of jetty:run use: container:start

Btw, thanks for looking at it.

[Diego Medina]

Hi Pablo,

Here it is
https://github.com/fmpwizard/LazyLoad/commit/3240e99b4f589b1b83800909259467e3605e578a

it does not add a whole table, or even 10 rows, but you will get the
idea of where to add js to create new rows.

Regards,

Diego

On Thu, Apr 12, 2012 at 11:13 PM, Pablo Peraza <pio...@gmail.com> wrote:
>
> So, here is it, the example project on Github:
>
> https://github.com/piousp/LazyLoad
>

> --
> Lift, the simply functional web framework: http://liftweb.net
> Code: http://github.com/lift
> Discussion: http://groups.google.com/group/liftweb
> Stuck? Help us help you:
> https://www.assembla.com/wiki/show/liftweb/Posting_example_code

--

[Pablo Peraza]

Well, amazing! That was quite easy!

Now, is there any way i could reuse my snippet's render method so i dont have to hard-code some html in scala files?
Since the example is just trivial, it makes sense to just run that well though line of js code there, but now that i think of it...;

well, is there anyway to apply those css transformations with the new elements?


Either way, thanks  again for the help Diego!

[AGYNAMIX Torsten Uhlmann]

Pablo,

you can put the hard coded html into a template file by itself, and then do something like this:

  def renderMyInfo(structure: SomeData): NodeSeq = {

    val template = S.runTemplate(List("templates-hidden", "folder", "template_name")).openOr(<div>Template not found</div>)

    val render = {

      ".your_class *" #> structure.myData &

      // many more bindings

     }

    render(template)

  }

This will create a val render of type CssSel and apply the template as an argument to this function. You can take this apart and reassemble it as you want, so you could use the same binding from the render method that is called from the html snippet, and also when the user clicks the "Load More" button…

Does that help?

Torsten.

-- 

AGYNAMIX(R). Passionate Software.
Inh. Torsten Uhlmann | Buchenweg 5 | 09380 Thalheim
Phone:       +49 3721 273445
Fax:             +49 3721 273446
Mobile:       +49 151 12412427
Web:           http://www.agynamix.de

[Chenguang He]

Quick question,

See Facebook as example, How to track user scroll down at bottom of the page?

Chenguang He

[AGYNAMIX Torsten Uhlmann]

You could use the jQuery autoscroll widget and bind a function to it that goes back to the server and loads more items:

  def buildScriptShowMorePosts() = {

    def doShowMorePosts(param: String): JsCmd = {

      debug("Show more posts")

      // do something to retrieve posts and create JsCmd

    }

    Function("showMorePosts", List("param"), ajaxCall(JsRaw("param"), doShowMorePosts _)._2)

  }

The function "showMorePosts" can then be called from the client side. It will go back to the server and call the enclosed function with the given parameter. You can use jsonCall instead of ajaxCall if you want to pass multiple parameters…

Does that help?

Torsten.

-- 

AGYNAMIX(R). Passionate Software.
Inh. Torsten Uhlmann | Buchenweg 5 | 09380 Thalheim
Phone:       +49 3721 273445
Fax:             +49 3721 273446
Mobile:       +49 151 12412427
Web:           http://www.agynamix.de

[Chenguang He]

Thank you, i'll take a look for autoscroll

Chenguang He

[Pablo Peraza]

Absolutely brilliant! I'm gonna try it out now!

Thanks everyone for beign so nice and helpfull!

[David Pollak]

You can also use idMemoize and other HTML memoization stuff found in SHtml.  Please see http://lift.la/shtmlidmemoize-simple-ajax-updating

--

Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro

Lift, the simply functional web framework http://liftweb.net

Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im

[Pablo Peraza]

I did tried idMemoize and memoize but i couldnt get it working. It is highly probable i did not fully comprehend memoization 

[Andreas Joseph Krogh]

On 04/13/2012 06:37 PM, Pablo Peraza wrote:
> I did tried idMemoize and memoize but i couldnt get it working. It is
> highly probable i did not fully comprehend memoization

This example has some memoize-stuff you can look at:
https://github.com/andreak/on-example-rpm
Look at editing a project or posting a blog-post, they both use
memoize-stuff to update the DOM.

--
Andreas Joseph Krogh<and...@officenet.no> - mob: +47 909 56 963
Senior Software Developer / CEO - OfficeNet AS - http://www.officenet.no
Public key: http://home.officenet.no/~andreak/public_key.asc

[Pablo Peraza]

Awesome! Thanks for all the help guys!

The project is kinda big, so i'll check it out tonight. Thanks Andreak!