Mixing JavaScript and Scala in a Play template - Stack Overflow

admin管理员组

文章数量:1394585

I'm not sure how this is done. I could hard code the route I'm trying to use, but I'd like to do this the right way.

I have a dropdown that needs to load a new page on change. Here's basically how I'm trying to do it (I've tried a few 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 produces a identifier expected but 'val' found exception. I also tried surrounding it in quotes, but that causes a [NumberFormatException: For input string: "$(this).val()"]

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

Edit

Here's my solution, inspired by the accepted answer. This dropdown is defined in a tag that's made for reuse by different ponents, and the base URL is different for each ponent. The way to achieve this was to pass a function that generates a URL based on an account key into the dropdown:

@(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 to pass in:

@transactionsUrl(memberAccountKey: Long) = {
  @routes.Accounts.transactions(memberAccountKey)
}

@accountsDropdown(transactionDetails.getMemberAccounts(), transactionDetails.getMemberAccountKey(), transactionsUrl)

I'm not sure how this is done. I could hard code the route I'm trying to use, but I'd like to do this the right way.

I have a dropdown that needs to load a new page on change. Here's basically how I'm trying to do it (I've tried a few 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 produces a identifier expected but 'val' found exception. I also tried surrounding it in quotes, but that causes a [NumberFormatException: For input string: "$(this).val()"]

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

Edit

Here's my solution, inspired by the accepted answer. This dropdown is defined in a tag that's made for reuse by different ponents, and the base URL is different for each ponent. The way to achieve this was to pass a function that generates a URL based on an account key into the dropdown:

@(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 to pass in:

@transactionsUrl(memberAccountKey: Long) = {
  @routes.Accounts.transactions(memberAccountKey)
}

@accountsDropdown(transactionDetails.getMemberAccounts(), transactionDetails.getMemberAccountKey(), transactionsUrl)

• javascript
• scala
• playframework

Share Improve this question Follow edited May 31, 2012 at 19:55 Samo asked May 22, 2012 at 19:44 SamoSamo 8,2401313 gold badges6161 silver badges9696 bronze badges 5

• 1 You're thinking about this the wrong way. JavaScript gets executed on the client side, while scala gets executed on the server side! The only way to municate between the two in that direction (JavaScript to Scala) is with a POST or GET. – Eve Freeman Commented May 22, 2012 at 20:24
• Yes, you're right, those Scala statements need to be processed before the page is even rendered. I definitely don't want to make a REST call just to get the value of that route though. I wish there were some way to do this dynamically without making a call or hardcoding the route in JS. – Samo Commented May 22, 2012 at 20:28
• Can you make it part of the routing? Like location.href = '/products/'+$(this).val(); Then handle it in the route config/controller. Maybe more about your case specifics would help us find a better solution, what is "$(this).val()" in practice? – Eve Freeman Commented May 22, 2012 at 20:36
• @WesFreeman, yes I can definitely do that but I'm trying to avoid hardcoding the route if possible. I'd rather refer to an action name in case the route should change for any reason. But I think that's what I'm stuck with. – Samo Commented May 23, 2012 at 5:06
• Is it the same for all items in the list? You could then pass it in from the scala side... – Eve Freeman Commented May 23, 2012 at 13:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need a way of storing all URLs in the page, e.g.

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

Then onChange, you can:

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

本文标签： Mixing JavaScript and Scala in a Play templateStack Overflow