CODEWITHSUNDEEP
javajqueryplayframeworkplayframework-2.0
Milople Inc
Milople Inc

Reputation: 399

Calling a jsp/html page using ajax in play 2.0

Can anyone guide me how can i call a jsp/html page using ajax in play framework?

I want to open a lightbox on click of a button and want to load that with a page containing data from database. Currently i have just displayed the message using ajax. Below is the method inApplication.java

public static Result index()
  {
    return ok(index.render("Your new application is ready."));
  }

My index.scala.html is:

@(products: List[Products])

@import helper._
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<h1>@products.size() product(s)</h1>
<table border=1>
<tr>
<td>Product Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
@for(product <- products) {
    <tr>
        <td>
            @product.productname
        </td>
        <td>
            @product.quantity
        </td>
        <td>        
            @product.price
        </td>
        <td id="items">        

            <a href="@routes.Application.user(product.product_id)"><input type="button" value="Add Product" name="@routes.Application.user(product.product_id)" id="but"/></a>

        </td>
    </tr>
}
</table>


<div class="result1" style="border: 1px solid black; padding: 5px;">not sent yet...</div>


<script type="text/javascript">
    jQuery("#items a").click(
            function () {
                $.get(jQuery(this).attr("href"), function (data) {
                    $('.result').html(data);
                });
                return false;
            }
    )
</script>

Upvotes: 0

Views: 600

Answers (1)

Julien Lafont
Julien Lafont

Reputation: 7877

You are on the good way.

Create a new action which will return only the html you need in your div (and not the complete html page). 

public static Result detail(Integer productId)
{
    Product product = .... (productId);
    return ok(productDetail.render(product));
}
// with the route of course

productDetail.scala.html

@(product: Product)

My product @product.product_id is beautiful !
....

You must also add a jquery plugin to display your lightbox (there are a thousand...)

Your JsCode will be something like that: 

$("#items a").click(function () {
   $("#result").load($(this).attr("href"), function() {
      displayPopup(); // code this
   });
});

(Or maybe a totally different code if the plugin natively handle ajax...)

In resume, there is a lot of work to do, and many ways to do it. Just try !

Upvotes: 2

Related Questions