Search code examples
javascriptjqueryscalalift

How to change the state of a ajaxSubmit in Lift on page load


SHtml.ajaxSubmit Am using Scala with Lift. I am trying to create a SHtml.ajaxSubmit() using the CSS binding, and I want it enabled or disabled based on an external property. So far I managed to display the submit and do all the other wiring, but I am unable neither to invoke a JS method upon the ajaxSubmit() creation nor to do this any other way.

"#myCheckbox" #> SHtml.ajaxCheckbox(btns.isChecked, btnState => checkboxClicked(btnState), "id" -> "myCheckbox") &
"#myBtn *" #> SHtml.ajaxSubmit("click me", btnClicked) 


I also have 2 case classes to enable or disable the button state:

case class Disable(id: String) extends JsCmd {
  def toJsCmd = "$('#"+id+"').children().prop('disabled', 'true');"
}

case class Enable(id: String) extends JsCmd {
  def toJsCmd = "$('#"+id+"').children().removeProp('disabled');"
}

Finally I have a variable which tells me whether this should be enabled or not, but I still cannot manage to change the button's state after the page is loaded in the Lift's way.

Here is the HTML form where is the button I want to disable:

    <lift:surround with="default" at="content" xmlns:item="http://java.sun.com/xml/ns/javaee">
        <div class='pageTitle'>Some title</div>
        <p>
            some text
        </p>
        <form data-lift="form.ajax">
            <div class="lift:MyScalaCodeBehind.btns">
                <table>
                    <tr>
                        <td>
                            <!-- checkbox -->
                            <div id="myCheckbox"/>
                            <label for="myCheckbox">some text</label>
                        </td>
                    </tr>
                    <tr>
                        <!-- button -->
                        <td id="myBtn"/>
                    </tr>
                </table>
            </div>
        </form>
</lift:surround>

Btw I tested and the events don't seem to work for me?!?!


Solution

  • I've managed to change the button's state with using JS. I couldn't find a way how to fix this in Lift purely and that's why I used Lift with combination with JS.
    I created a custom JS function which does the work and I invoked it on page load. Since I wanted all the business logic behind the page to be in the Scala source, I registered the this command with S.appendJs() when the form is created. In short here's code:

    S.appendJs(CustomOnLoadCmd()) // this is done when the form is initialized
    


    Here's the implementation of CustomOnLoadCmd:

    case class CustomOnLoadCmd() extends JsCmd {
      def toJsCmd = "$(document).ready(function() {\n" +
        "                if ($('#myCheckbox').prop('checked')) {\n" +
        "                    $('#myBtn').children().prop('disabled', 'true');\n" +
        "                } else {\n" +
        "                    $('#myBtn').children().removeProp('disabled');\n" +
        "                }\n" +
        "            });"
    }
    

    I hope this helps you if you are hit an issue like mine and don't have any other solution.