Question

I’m tring to implement the classic functionality of this select:elements depends on this other select:selection using Lift, E.g. select the country and get the possible states for the selected country.

The problem that I’m facing is that the “this.myForm.submit()” that I have inside the onchange of the select element is not firing the ajax request. If I use an input type”submit” it works perfectly.

Is this behaivior related with Lift framework? Is there a better way of implementing this kind of functionality using Lift libraries?

The relevant snipped code:

"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
        "name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices")  ++ SHtml.hidden(process)) 

The view html:

<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
                    <option></option>
                </select>
                <br/>
                Device:
                <select name="devices" id="the_devices">
                    <option></option>
                </select>
</form>

The rendered HTML:

    <form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+&quot;F391649920812YBACEZ&quot;).serialize(), null, null, &quot;javascript&quot;);return false;">
                <div>  
Punto de distribución:
                <select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
                <br />              
                    Equipo:
                    <select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
                    <br />

                </div>
            </form>

[edit]

I finally got the solution. Like Chris mentioned I used ajaxSelect instead of just selects and instead of using setHtml there’s a method called JsCmds.ReplaceOptions that does exactly what I was looking for.

Answer 1

You should understand that when using Ajax submit the page is not reloaded. So I would suggest you to use JsCmds.setHtml on server side to “reset” the second select element.

So, in fact the first select is an ajaxSelect which is meant to modify the second one (so it is not concerned by the hidden submit in my opinion). The second select is updated when the first one is changed, using ‘selectPoint(s)’

Piece of Scala code

def selectPoint(s):JsCmd = {
  selectedDistributionPoint = s; 
  newDevices:List[String] = findCorrespondingDevices(s);
  JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process)) 
}

"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices")  ++ SHtml.hidden(process)) 

Piece of template code

<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>