How to access an HTML template argument passed from controller in a Javascript function

Question

My app is using the play framework mvc setup. In the controller I am passing a parameter while rendering the template, like this:

public static void scenario(){
     ...
     render(active_brands);  
}

Now in my HTML page "scenario.html", I can access the parameter using the play framework tags like this:

#{list items:active_brands, as:'c'}
...
#{\list}

Or using JQuery inside an HTML table like this:

<td>${active_brands.get(1)}</td>

Just for reference, the passed in parameter is a List.

However, I am trying to access the parameter "active_brands" from a javascript function and I am not sure how to do that. I thought using Jquery to access the variable would work and I tried to access the variable like this:

function update_brands(active_scenario_ids){
    ...
    alert('Reached: '+ ${active_brands});
}

but that does not work. It seems to me that the HTML attribute is out of scope for the javascript function. Is that true? It would be great if someone can help me with this. Thanks.

dbau · Accepted Answer · 2013-09-29 05:06:39Z

1

This works for me using Play 2.2.0:

Application.scala (controller):

  def index = Action { implicit request =>

   val message = "This is a test."

   Ok(views.html.test(message))

  }

test.scala.html (view template):

@(message: String)

<script type="text/javascript">
$(document).ready(function(){

console.log("@message");

});

</script>

Console output:

This is a test.

answered Sep 29, 2013 at 5:06

dbau

16.4k2 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

deepapple Over a year ago

Thanks for your response @dbau. Although I am using the Java framework for play instead of the scala framework, as shown in your example, I discovered that the problem was not due to the scope of the variables. The reason the variable "active_brands", which is a java.util.List<Object>, could be read in the play tags but not in javascript is because javascript cannot implicitly parse an object from its type without a JSON.Parse(). However play tags are server side code so POJOs are recognized by the tags. Please see my answer below.

dbau Over a year ago

Glad you got it sorted! :)

deepapple · Accepted Answer · 2013-09-30 16:09:57Z

The root of the problem was that my template variable, which is accessible in client side HTML, was of type java.util.List, which is not accessible by client side code ie. javascript. However, it is recognized in the play tags because play tags are server side code written in client side. So the only solution I could find for reading Objects inside java collections is returning a JSON object.

Therefore I had to change my code such that instead of returning a Java List as a template variable, I retrieve the data as a JSON object through an ajax call.

$.ajax({
            url: '/getBrands/',
            type: 'POST',
            data: {active_scenario_ids: active_scenario_ids},
            dataType: "json",

            success: function(data){
                console.log(data);
            },
            error: function(req, status, error){
                alert("R:"+req+"S:"+status+"E:"+error);
            }
        });
    }

Collectives™ on Stack Overflow

How to access an HTML template argument passed from controller in a Javascript function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related