Lift Web : Basics of using snippets for a beginner


If you are a beginner of using Lift web framework, then it will help you a lot for understanding how to play with views and snippets.

Here, I am explaining some basic use of snippets.
1. Replace id of a html attribute , if class is given.

html : <div class="demo">
snippet : ".demo [id]" #> ("demo"+_id)

2. Replace id of a html attribute , if id is given

html : <div id="demo">
snippet : "#demo [id]" #> ("demo"+_id)

Use # for id and .(dot) for class
3. Add a style to html element, if class is given

html : <input type="submit" class="demo" value="Edit" />
snippet : ".demo [style]" #> ("display:block")

4. Replace content of particular id

html : <span id="demo">
snippet : "#demo" #> "Content has replaced" 

5. Replace value of particular element

html : <input type="text" id="name" />
snippet : JsCmds.SetValById("name", "This is demo") 

6. How to use Javascript alert

  JsCmds.Alert("This is alert box")

7. Ajax click event on button.
a) Here “Create” will be text of Button.

html :     <input type="submit" id="demo" />
snippet : "#demo" #> SHtml.ajaxSubmit("Create", () => {
           JsCmds.Alert("This is alert box")
          })

b) No button text here

html :    <input type="submit" id="demo" value="Create"/>
snippet : "#demo [onclick]" #>SHtml.ajaxInvoke(() => {
           JsCmds.Alert("This is alert box")
          })

8. Get value of Text box

html : <input type="text" id="name" />
snippet : val text=""
          def render={
          #name" #> SHtml.text(text, text = _)
         }

Here 1st argument will set the text box default value and 2nd argument which is a function will get textbox value and assign it to text variable.

9. Get value of TextArea

html : <input type="text" id="name" />
snippet : val text=""
          def render={
          #name" #> SHtml.textarea(text, desc => {
          text = desc
         })

Here 1st argument will set the TextArea default value and 2nd argument which is a function will get TextArea value and assign it to text variable.

10. If you want to show any message from snippets then use it as :

html : <div class="lift:Msgs"></div>
snippet : S.error("This is error message")
          S.notice("This is a simple message")

Here S.error() is used for displaying error message and S.notice() is used to display notice messgae.
Messages will be displayed where above “div” tag will be defined.

11. Set full html content to given id.

SetHtml(id,"......")

SetHtml() takes 2 arguments. one is id where html content to replace and second is scala NodeSeq.
12. How to write javascript code in snippets :

JsRaw("""var modal= document.getElementById('modal');
             var shade= document.getElementById('shade');
             modal.style.display= shade.style.display= 'block';""").cmd

Whatever we write in between script tag, we can write directly that into JsRaw() method

About these ads

About Rishi Khandelwal

Software Consultant at Knoldus Software LLP, New Delhi, India having around 2.5 years industry experience. He has working experience in various technologies such as Scala, Java, Play, Akka, Lift Web, Backbone.js, javascript, Jquery, Amazon EC2, WebRTC,
This entry was posted in LiftWeb, Scala, Web and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s