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