1

我有一个在服务器端使用自定义框架的 java/jsp 应用程序。此特定页面是查看购物车，其中包含购物车中的商品列表。在列表中，我为每个项目提供了一个表格来更新数量或删除项目。我正在使用多个表单，因此如果我要在一个表单中提交整个列表，我不必在服务器端做太多的工作来确定需要更新的项目。我为每个表单提供了产品的唯一 ID，并且我还将相同的 ID 添加到触发提交的操作链接上的属性中。在单击操作链接时，我需要设置隐藏字段 pageAction，因此在服务器端，这对应于为任何特定页面操作运行代码的 actionEvent。因此，如果 cartUpdate 被击中，则需要将其设置为 pageAction。

 js("input[rel=actionButton]").val(action);

我不确定我是否还需要检查是否来自正确的 id 表格？或者，如果在 JS 方面有更好的方法来做到这一点，那么我在做什么。任何意见，将不胜感激。

HTML

<!-- QUANTITY AND MANAGEMENT -->
<td class="cartQty" align="left" valign="top">
    <form id="${item.product.boId}" action="${pageContext.request.contextPath}/store/viewcart.do" method="post">
        <input name="quantity" type="text" value="1" maxlength="3" class="cartQtyBox">  
        <input type="hidden" value="${item.product.boId}" name="productId">
        <input type="hidden" value="${item.productStyle.boId}" name="productStyleId">
        <input type="hidden" name="pageAction" rel="actionButton">
        <a id="buttonAction" rel="buttonAction" action="cartUpdate" pid="${item.product.boId}" href="#" class="updateCart">Update</a>
        <span>|</span>
        <a id="buttonAction" rel="buttonAction" action="cartRemove" pid="${item.product.boId}" href="#" class="removeItem">Remove</a>
    </form>
</td>

JS

js(document).ready(function() {
    js("a[rel=buttonAction]").click(function(event){
        var formId = js(this).attr('pid');
        var action = js(this).attr('action');
        js("input[rel=actionButton]").val(action);
        js("#"+formId).submit();
    });
});
4

1 回答 1

0

我不熟悉，JSP但您可以进行一些更改，我认为这是一个很好的做法。一开始你不应该在没有data-前缀的元素中使用任何自定义属性，这是HTML5规范中推荐的方式，所以你在哪里使用，例如

<a id="buttonAction" rel="buttonAction" action="cartUpdate" pid="${item.product.boId}" href="#" class="updateCart">Update</a>
<a id="buttonAction" rel="buttonAction" action="cartRemove" pid="${item.product.boId}" href="#" class="removeItem">Remove</a>

在这种情况下，您应该使用

<a data-action="cartUpdate" data-pid="${item.product.boId}" href="#" class="updateCart buttonAction">Update</a>
<a data-action="cartRemove" data-pid="${item.product.boId}" href="#" class="removeItem buttonAction">Remove</a>

Now, notice that I've removed id and rel from both inputs and modified action and pid with a data- prefix and also added a new class buttonAction in both elements. First of all an id should be unique, which means that two element can't have same id and in your case you are not using those ids either so they are unnecessary. Also you have

<input type="hidden" name="pageAction" rel="actionButton" />

You can use

<input type="hidden" name="pageAction" />

You are using

js("a[rel=buttonAction]").click(function(event){ // ... });

In this case, you should use

js(".buttonAction").click(function(event){ // ... });

Here, .buttonAction is the class name for both a elements and you can use same class name for more than one element to group them. The dot (.) used for class name. In your click handler you have

var formId = js(this).attr('pid');
var action = js(this).attr('action');
js("input[rel=actionButton]").val(action);
js("#"+formId).submit();

In this case you need only

event.preventDefault();
var action = js(this).attr('data-action');
js(this).closest('form').find('input[name="pageAction"]').val(action);
js(this).closest('form').submit();

So full code should be

js(document).ready(function() {
    js(".buttonAction").click(function(event){
        event.preventDefault();
        var action = js(this).attr('data-action');
        js(this).closest('form').find('input[name="pageAction"]').val(action);
        js(this).closest('form').submit();
    });
});

Hope I didn't miss anything.

于 2013-05-26T03:52:11.143 回答