Mixing JavaScript and Scala in a Playback Template

Question

I am not sure how to do this. I could hard code the route I'm trying to use, but I would like to do it correctly.

I have a drop-down list that requires a new page to load when changing. Here is basically how I am trying to do this (I tried several variations of this):

@getRoute(value: String) = @{ routes.Accounts.transactions(Long.valueOf(value)) } <script type="text/javascript"> $(function() { $("select[name='product']").change(function() { location.href = @getRoute($(this).val()); }).focus(); $('a.view.summary').attr('href', "@routes.Accounts.index()" + "?selectedAccountKey=" + $('select[name=product]').val()); }); </script> 

This identifier expected but 'val' found exception. I also tried to surround it with quotation marks, but that throws [NumberFormatException: For input string: "$(this).val()"]

So how do I insert a value from JavaScript into a Scala function?

Edit

Here is my solution, inspired by the accepted answer. This drop-down list is defined in the tag, which is used for reuse by various components, and the base URL for each component is different. To achieve this, you need to pass a function that generates a URL based on the account key in the drop-down list:

 @(accountList: List[models.MemberAccount], selectedAccountKey: Long, urlGenerator: (Long) => Html ) <select name="product"> @for(account <- accountList) { @if(account.accountKey == selectedAccountKey) { <option selected="selected" value="@urlGenerator(account.accountKey)">@account.description (@account.startDate)</option> } else { <option value="@urlGenerator(account.accountKey)">@account.description (@account.startDate)</option> } } </select> <script type="text/javascript"> $(function() { $('select[name=product]').change(function() { location.href = $(this).val(); }); }); </script> 

Then you can define a function like this:

 @transactionsUrl(memberAccountKey: Long) = { @routes.Accounts.transactions(memberAccountKey) } @accountsDropdown(transactionDetails.getMemberAccounts(), transactionDetails.getMemberAccountKey(), transactionsUrl) 

Answer 1

You need a way to store all the URLs on a page, for example.

 <option value="@routes.Accounts.transactions(id)">Display</option> 

Then onChange you can:

 $("select[name='product']").change(function() { location.href = $(this).val(); });