Liaison dynamique dans le cadre d'ascenseur

Question

Je suis newbie à soulever et j'ai une question sur l'utilisation de lier, Ajax dans Lift.

Je veux créer trois menus déroulants utilisant Ajax de manière dynamique. J'utilise "Address" comme exemple pour décrire ce que j'essaie d'accomplir. Au premier coup, je n'ai qu'à afficher le menu "Pays" avec la valeur par défaut "Aucun". L'utilisateur à ce stade peut choisir de soumettre si elle le souhaite et l'adresse est prise par défaut. Sinon, elle peut fournir l'adresse exacte. Une fois qu'elle sélectionne le pays, le menu «État» devrait s'afficher, et une fois qu'elle sélectionne «État», le menu «Comté» devrait s'afficher. À l'aide d'exemples de démonstration de portance, j'ai essayé de créer des menus statiques comme suit. J'ai créé trois extraits <select:country/>, <select:state/>, <select:county/> dans mon fichier .html et dans le code scala, je lie comme suit:

bind("select", xhtml, 
    "system" -> select(Address.countries.map(s => (s,s)), 
         Full(country), s => country = s, "onchange" -> ajaxCall(JE.JsRaw("this.value"),s => After(200, replaceCounty(s))).toJsCmd), 
    "state" -> stateChoice(country) % ("id" -> "state_select"), 
    "county" -> countyChoice(state) % ("id" -> "county_select"), 
    "submit" -> submit(?("Go!"),()=>Log.info("Country: "+country+" State: "+state + " County: "+ county) 

Le replaceCounty correspondant, stateChoice, countyChoice sont tous définis dans ma classe. Cependant, lorsque le pays est sélectionné, seul l'état est actualisé via l'appel Ajax et non le comté. Q1) Est-il possible d'actualiser les deux menus en fonction du menu pays?

Q2) Comment créer le menu dynamiquement comme je l'ai expliqué précédemment?

Answer 1

Utilisez SHtml.ajaxSelect pour votre premier choix et les éléments statiques pour les deux autres. Lorsque le premier select change, vous retournerez javascript pour remplir le prochain select avec le résultat d'un autre appel SHtml.ajaxSelect.

def countrySelect : NodeSeq = { 
    val countryOptions = List(("",""),("AR","AR")) 
    SHtml.ajaxSelect(countryOptions, Empty, { selectedCountry => 

    val stateOptions = buildStateOptions(selectedCountry) 
    SetHtml("state-select", SHtml.ajaxSelect(stateOptions, Empty, { selectedState => 
     // setup the county options here. 
    })) 

    }) 
} 

bind(namespace, in, 
    "country" -> countrySelect, 
    "state" -> <select id="state-select"/>, 
    "county" -> <select id="county-select"/>) 

Dans les callbacks pour #ajaxSelect vous voudrez probablement enregistrer les valeurs de tout ce qui a été sélectionné, mais c'est l'approche générale que je prendrais.

Answer 2

Il est un excellent exemple de code qui fait exactement ce disponible à:

http://demo.liftweb.net/ajax-form

Si vous souhaitez mettre à jour plusieurs listes déroulantes à la suite d'une mise à jour AJAX, vous aurez envie de revenir quelque chose comme:

ReplaceOptions(...) & ReplaceOptions(...)