javascript - Altering the DOM with the Play! Framework -

javascript - Altering the DOM with the Play! Framework -

hello 1 time again stackoverflow. i've been tasked modifying website runs on scala's play! framework , twitter bootstrap. i've nail roadblock concerning altering dom. need accomplish following:

(the page beingness talked takes user input , passes server form, if valid writes mapped data in form database.)

have user take category drop-down. particular drop-down has nil form. based on choice, query database objects of type relate chosen category via foreign key. alter dom (that is, show without reloading page) display objects user select them. selections added form. submit form, write database, etc.

questions:

is way go i'm trying accomplish? if so, there way alter dom via scala/play html templates without reloading page? if that's not possible, ilk of manually written javascript necessary?

admissions:

i have little experience web development other play. i have little experience javascript.

resources i've been looking at:

this post play docs on javascript routing scala.js

thank you!

for might come upon in future, short reply javascript.

long answer:

to ajax work, you'll need method next in top-level controller set javascript routing:

def javascriptroutes = action { implicit request => ok( routes.javascriptrouter("jsroutes")( someothercontroller.somemethod // returns jsvalue! ) ).as("text/javascript") }

then in html template (*.scala.html) contain ajaxy javascript:

<script type="text/javascript" src="@routes.applicationcontroller.javascriptroutes"></script>

and in actual js file (assuming you're using jquery):

$("someselector").click(function() { // notice matches method name exists in scala! // create sure pass `somemethod` needs. var req = jsroutes.controllers.someothercontroller.somemethod(...) $.ajax({ url: req.url, type: req.type, success: function(json) { // dom manipulation, etc., here. }, error: function(xhr, status, errorthrown) { console.log( "error: " + errorthrown ); console.log( "status: " + status ); console.dir( xhr ); } }); // ajax }); // handler

javascript scala twitter-bootstrap dom playframework