0

Play フレームワークで ajax を使用して jsp/html ページを呼び出す方法を教えてもらえますか?

ボタンをクリックしてライトボックスを開き、データベースからのデータを含むページをロードしたいと考えています。現在、ajaxを使用してメッセージを表示しています。以下はメソッド inApplication.java です

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

私の index.scala.html は次のとおりです。

@(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>
4

1 に答える 1

2

あなたは良い方向に進んでいます。

div で必要な html のみを返す新しいアクションを作成します (完全な html ページではありません)。

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 !
....

ライトボックスを表示するには、 jquery プラグインも追加する必要があります (数千あります...)

JsCode は次のようになります。

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

(または、プラグインが ajax をネイティブに処理する場合は、まったく異なるコードになる可能性があります...)

履歴書では、やるべきことがたくさんあり、それを行う方法はたくさんあります。ちょうど試して ！

于 2013-01-07T15:57:23.887 に答える